变量: $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{}
循环语句:@for @while
each命令:作用与for类似
可编写自定义函数
定义:@function double($n){
@return $sn*2;
}
调用:#sidebar{ width:dublue(10px);}
网友评论