中南路网站建设公司,代理财务记账公司,杭州建设网站建站,资海集团网站建设一、什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具#xff0c;它允许你使用变量、条件语句等#xff0c;使开发更简单可维护。这里是官方文档。 二、基本语法 1#xff09;变量 sass的变量名必须是一个$符号开头#xff0c;后面紧跟变量名…一、什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具它允许你使用变量、条件语句等使开发更简单可维护。这里是官方文档。 二、基本语法 1变量 sass的变量名必须是一个$符号开头后面紧跟变量名。 //sass 样式 $red: #f00; div {color: $red; } // 编译为css后 div {color:#f00; } 特殊变量如果变量嵌套在字符串中则需要写在 #{} 符号里面如 $top: top; div {margin-#{$top}: 10px; /* margin-top: 10px; */ } 默认变量仅需在值后面加入 !default即可 默认变量一般用来设置默认值当该变量出现另外一个值时无论定义先后都会使用另外一个值覆盖默认值 $color: red; $color: blue !default; div {color: $color; /* color:red; */ } 多值变量多值变量分为list类型和map类型list有点像js对象中的数组map类型像js中的对象 list : 可通过空格逗号或小括号分割多个值使用 nth($变量名, $索引)取值 1 2 3 4 5 6 7 8 9 10 11 12 //一维数据 $px: 5px 10px 20px 30px; //二维数据相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px); // 例子 $px: 10px 20px; div {     margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */ } map: 数据以key和value组成格式$map: (key1: value1, key2: value2); 通过map-get($map, $key);  $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); each $header, $size in $headings {#{$header} {font-size: $size;} } 2计算功能 sass允许使用算式。 1 2 3 4 5 div {     padding: 2px * 4px;     margin: (10px / 2);     font-size: 12px 4px;    } 3嵌套 标签嵌套 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // sass 样式 div {     color: #333;     a {        font-size:14px;        :hover {           text-decoration:underline;        }     } } // 编译后css div {     color: #333; } div a {     font-size:14px; } div a:hover {     text-decoration:underline; } 属性嵌套 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 //sass 样式 .fakeshadow {   border: {     style: solid;     left: {       width: 4px;       color: #888;     }     right: {       width: 2px;       color: #ccc;     }   } } //css 编译后样式 .fakeshadow {   border-style: solid;   border-left-width: 4px;   border-left-color: #888;   border-right-width: 2px;   border-right-color: #ccc; } 4注释 sass有两种注释风格 标准css注释 /* 注释 */ 会保留到编译后的文件中压缩则删除 单行注释 // 注释 在标准注释 /*后面加入一个感叹号表示重要注释压缩模式也会保留注释用于版权声明等。 1 /*! 重要注释 */ 5继承 sass 中选择器继承可以让选择器继承另一个选择器的所有样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // sass样式 h1 {     font-size:20px; } div {     extend h1;     color:red; } // css编译后样式 h1 {     font-size:20px; } div {     font-size:20px;     color:red; } 使用占位符选择器 %  从sass3.2.0后就可以定义占位选择器%这个的优势在于不调用不会有多余的css文件 1 2 3 4 5 6 7 8 9 10 11 12 13 // sass样式 %h1 {     font-size:20px; } div {     extend %h1;     color:red; } // css编译后样式 div {     font-size:20px;     color:red; } 6混合(mixin) sass中使用mixin声明混合可以传递参数参数名义$符号开始多个参数以逗号分开如果参数有多组值那么在变量后面加三个点表示如 $var... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 //sass 样式 mixin opacity($opacity:50) {   opacity: $opacity / 100;   filter: alpha(opacity$opacity); } .opacity{   include opacity;      //参数使用默认值  50/100 0.5 } .opacity-80{   include opacity(80); //传递参数  80/100 0.8 } //  css编译后样式 .opacity{   opacity: 0.5;   filter: alpha(opacity50); } // --------------------- // 多参数 mixin center($width, $height) {     position: absolute;     left:50%;     top:50%;     width:$width;     height:$height;     margin:(-$height / 2) 0 0 (-$width / 2); } div {     include center(200px, 100px); } // css编译后样式 div {     position: absolute;     left:50%;     top:50%;     width:200px;     height:100px;     margin:-50px 0 0 -100px; } // ------------------- //多组值 mixin box-shadow($shadow...) {     -webkit-box-shadow: $shadow;     box-shadow: $shadow; } div {     include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4)); } // css编译后样式 div {     -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);     box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4); } content在sass3.2.0中引入 可以用来解决css3中 meidia 或者 keyframes 带来的问题。它可以使mixin接受一整块样式接收的样式从content开始 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //sass 样式               mixin max-screen($res){   media only screen and ( max-width: $res )   {     content;   } } include max-screen(480px) {   body { color: red } } //css 编译后样式 media only screen and (max-width: 480px) {   body { color: red } } 使用content解决keyframes关键帧的浏览器前缀问题 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 // 初始化变量 $browser: null; // 设置关键帧 mixin keyframes($name) {     -webkit-keyframes #{$name} {         $browser: -webkit-; content;     }     -moz-keyframes #{$name} {         $browser: -moz-; content;     }     -o-keyframes #{$name} {         $browser: -o-; content;     }     keyframes #{$name} {         $browser: ; content;     } } // 引入 include keyframes(scale) {     100% {         #{$browser}transform: scale(0.8);     } } // css编译后 -webkit-keyframes scale {     -webkit-transform: scale(0.8); } -moz-keyframes scale  {    -moz-transform: scale(0.8); } -o-keyframes scale  {     -o-transform: scale(0.8); } keyframes scale  {     transform: scale(0.8); } 7颜色函数 sass提供了一些内置的颜色函数 1 2 3 4 lighten(#cc3, 10%)　　  // #d6d65c darken(#cc3, 10%) 　　　// #a3a329 grayscale(#cc3) 　　　　// #808080 complement(#cc3) 　　　// #33c 8引入外部文件 使用 import 命令引入外部文件 引入后可使用外部文件中的变量等。 1 import _base.scss; 三、高级用法 1函数 function sass允许用户编写自己的函数以function开始 1 2 3 4 5 6 7 8 9 10 11 $fontSize: 10px; function pxTorem($px) {     return $px / $fontSize * 1rem; } div {     font-size: pxTorem(16px); } // css编译后样式 div {     font-size: 1.6rem; } 2if条件语句 if语句可以用来判断 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // sass样式 $type: monster; div {     if $type ocean {         color: blue;     } else if $type matador {         color: red;     } else if $type monster {         color: green;     } else {         color: black;     } } // css编译后样式 div {     color: green; } 三目判断语法为 if($condition, $if_true, $if_false)。 三个参数分别表示 条件条件为真的值条件为假的值 if(true, 1px, 2px) 1px if(false, 1px, 2px) 2px 3循环语句 for循环有两种形式分别为for $var from start through end 和 for $var from start to end。 $var 表示变量start表示开始值end表示结束值两种形式的区别在于 through 包括 end 的值to 不包括 end 值。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // sass样式 for $i from 1 to 4 {     .item-#{$i} {width: 2em * $i;} } // css编译后样式 .item-1 {     width: 2em; } .item-2 {     width: 4em; } .item-3 {     width: 6em; } while循环  1 2 3 4 5 6 7 8 9 10 11 12 13 // sass样式 $i: 2; while $i 0 {     .item-#{$i} {width: 2em * $i;}     $i: $i - 1; } // css编译后样式 .item-2 {   width: 4em; } .item-1 {   width: 2em; } each循环语法为each $var in list or map。 其中$var表示变量而list和map表示数据类型sass3.3.0新加入多字段循环和map数据循环 单字段list数据循环 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //sass 样式 $animal-list: puma, sea-slug, egret; each $animal in $animal-list {   .#{$animal}-icon {     background-image: url(/images/#{$animal}.png);   } } //css 编译后样式 .puma-icon {   background-image: url(/images/puma.png); } .sea-slug-icon {   background-image: url(/images/sea-slug.png); } .egret-icon {   background-image: url(/images/egret.png); } 多字段list数据循环 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //sass 样式 $animal-data: (puma, black, default),(sea-slug, blue, pointer); each $animal, $color, $cursor in $animal-data {   .#{$animal}-icon {     background-image: url(/images/#{$animal}.png);     border: 2px solid $color;     cursor: $cursor;   } } //css 编译后样式 .puma-icon {   background-image: url(/images/puma.png);   border: 2px solid black;   cursor: default; } .sea-slug-icon {   background-image: url(/images/sea-slug.png);   border: 2px solid blue;   cursor: pointer; } 多字段map数据循环 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //sass 样式 $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); each $header, $size in $headings {   #{$header} {     font-size: $size;   } } //css 编译后样式 h1 {   font-size: 2em; } h2 {   font-size: 1.5em; } h3 {   font-size: 1.2em; }