一、什么是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,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開始

//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關鍵幀的瀏覽器前綴問題

// 初始化變量 $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提供了一些內置的顏色函數

lighten(#cc3, 10%)　　 // #d6d65c darken(#cc3, 10%) 　　　// #a3a329 grayscale(#cc3) 　　　　// #808080 complement(#cc3) 　　　// #33c

　　

8）引入外部文件

使用 @import 命令引入外部文件， 引入后，可使用外部文件中的變量等。

@import "_base.scss";

　　

三、高級用法

1）函數 function

?sass允許用戶編寫自己的函數，以@function開始

$fontSize: 10px; @function pxTorem($px) {@return $px / $fontSize * 1rem; } div {font-size: pxTorem(16px); } // css編譯后樣式 div {font-size: 1.6rem; }

　　

?2）if條件語句

??@if語句可以用來判斷

// 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 值。

// 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循環?

// 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數據循環

//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數據循環

//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數據循環

//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; }

　　

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=ibihh0j&title=SASS簡介及使用方法

總結

以上是生活随笔為你收集整理的SASS简介及使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。