一、什么是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($变量名, $索引)取值
//一维数据 $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允许使用算式。
div { padding: 2px * 4px; margin: (10px / 2); font-size: 12px + 4px; }
3)嵌套
标签嵌套
// 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; }
属性嵌套:
//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注释: /* 注释 */, 会保留到编译后的文件中,压缩则删除
单行注释: // 注释
在标准注释 /*后面加入一个感叹号,表示重要注释,压缩模式也会保留注释,用于版权声明等。
/*! 重要注释 */
5)继承
sass 中,选择器继承可以让选择器继承另一个选择器的所有样式
// 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文件
// sass样式 %h1 { font-size:20px; } div { @extend %h1; color:red; } // css编译后样式 div { font-size:20px; color:red; }
6)混合(mixin)
sass中使用@mixin声明混合,可以传递参数,参数名义$符号开始,多个参数以逗号分开,如果参数有多组值,那么在变量后面加三个点表示,如: $var...
//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(opacity=50); } // --------------------- // 多参数 @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