SASS是SCSS3的新語法
SASS允許使用變量,所有變量以$開頭翁都。
$red: red;div {? color: $red;}//也可以鑲嵌在字符串里面使用,必須需要寫在#{}之中,作用于屬性名$left: left;margin-#{$left}:30px阅畴;
SASS允許在代碼中使用算式。
body{ margin:(14px/2); top:50px + 100px; right:$var * 10%;}
SASS允許選擇器嵌套
div h1{color:red;}//也允許屬性嵌套(注意屬性后面要加上冒號)border:{size:2px;style:solid;color:black;}
注釋
SASS共有兩種注釋風(fēng)格题翰。
標(biāo)準(zhǔn)的CSS注釋 /* comment/ 恶阴,會保留到編譯后的文件诈胜。
單行注釋 // comment,只保留在SASS源文件中冯事,編譯后被省略焦匈。
在/
后面加一個感嘆號,表示這是"重要注釋"昵仅。即使是壓縮模式編譯缓熟,也會保留這行注釋,通乘ん裕可以用于聲明版權(quán)信息够滑。
SASS允許一個選擇器,繼承另一個選擇器吕世。
.class1{border:1px solid #ddd;}//class2要繼承class1彰触,就要使用@extend命令:.class2{@extend.class1;font-size:120%;}
SASS可以設(shè)置可以重用的代碼塊
@Mixin表示是可以重用的代碼塊。
@mixin center{display:flex;justify-content:center;align-items:center;}//使用@center命令命辖,調(diào)用這個mixindiv{@includecenter;}//mixin的強(qiáng)大之處况毅,在于可以指定參數(shù)和缺省值。@mixincolor($color:black){color:$color;border:1px solid$value;}//使用的時候尔艇,根據(jù)需要加入?yún)?shù):div{@includecolor(red);}
高級用法
@if? ? 或者? @if @else
p{@if1+1==2{border:1px solid;}@if5<3{border:2px dotted;}}//@if @elsep{@if1+1==2{border:1px solid solid;}@else{border:10px solid? red;}}
鏈接:http://www.reibang.com/p/e2ed8227eda4