變量: $blue:#1875e7; .box{color:$blue;}
$r:right; .box{border-#{$r}-radius:5px;}
算術計算: .box{margin:50px*10%;}
包裹嵌套:
元素:body{
.bod{
color:$blue;
}
}
屬性:p{
background:{
color:red淤翔;
}
}
$父級:a{
color:red;
$:hover{color:yellow}
}
代碼注釋: /塊注釋編譯后保留/
// 行內注釋忽略省去
樣式繼承: @extent
classA|classB
classB{@extent .classA} classB繼承classA
代碼塊重用:@mixin
定義:@mixin left($x,$y){float:left; margin-left:$x;margin-top:$y;}
調用:.box{ @include left(20px ,30px); }
顏色: 高亮20% lighten(#333霹琼,20%)
變暗 darken()
灰度 grayscale(#333)
complement(#cc3) //#33c
@import 插入外部文件
條件語句:@if{} @else{}
循環(huán)語句:@for @while
each命令:作用與for類似
可編寫自定義函數(shù)
定義:@function double($n){
@return $sn*2;
}
調用:#sidebar{ width:dublue(10px)蝇率;}