一、什么是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注释： /* 注释 */， 会保留到编译后的文件中，压缩则删除
单行注释： // 注释
在标准注释 /*后面加入一个感叹号，表示重要注释，压缩模式也会保留注释，用于版权声明等。
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(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,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）函数 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;
}
|
?2）if条件语句
??@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;
}
|