sass的優缺點

優點：css預處理器為css增加一些編程的特性，無需考慮瀏覽器的兼容性問題。支持嵌套、變量和邏輯等。可以讓css更加簡介、提高代碼復用性、邏輯分明等等。
缺點：css的文件體積和復雜度不可控；增加了調試難度和成本

常用的知識點

1、注釋

/* 多行 */ //單行 /*! 不會被壓縮*/

2、變量 （會有作用域的限制）

$color: red; //在值的后邊加global會變為全局屬性

3、模板字符串

#{變量}

4、@import 引入文件

支持同時導入多個文件，使用逗號隔開即可
以下情況會導致文件僅作為普通css語句，不會導入任何Sass文件

• 文件拓展名是.css
• 文件名以http://開頭
• 文件名是url()
• @import包含media queries

5、繼承 @extend

.a{ width:100px; height:100px; } .b{ @extend .a; }

6、@if的使用

p{@if 1+1==2{color:red;} }p{@if 1+1==2{color:red;}@else{color:blue} }

7、 循環語句 @for

語法 @for $var from <start> through <end> 或 @for $var from <start> to <end>
through和to的相同點與不同點?
相同點：都包含<start>值
不同點：through包含<end>值，但to不包含<end>的值

@for $I from 1 through 3{.item-#{$I}{ width: 2em * $i; } } //等價于 .item-1{width:2em; } .item-2{width:4em; } .item-3{width:6em; }

8、循環語句 @while

語法： @while experssin
指令重復輸出格式直到表達式返回結果為false。這樣可以實現比@for更復雜的循環，只是很少會用到

$1: 6; @while $1>0{.item-#{$i} { width : 2rem * $1; }$1: $1-2; //給i重新賦值 } //等價于 .item-6{width: 12em; } .item-4{width: 8em; } .item-2{width: 4em; }

總結

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

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