标签:表示 选择性 add 顺序表 idt back 参数设置 传递 默认
sass
文件后缀名有两种,.sass中不包含{}和; .scss中包含{}和; 与css原生代码很类似, 所以建议使用.scss的后缀名
导入文件,可引入.scss或者.css文件,后缀名都可以去掉,区别在于,.scss文件会被考拉编译,.css文件不会
@import "";
变量,$变量名称(自取):值,如果在值后面接!default表示默认值,如果不想用默认值,重新声明一个即可
语法结构:$变量名:值;其中变量名自取
div {属性名:$变量名;}
$border:1px solid red!default;
div{
border: $border;
}
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值
声明的@mixin通过@include来调用。
混合mixin,@mixin 名称{声明},调用时使用@include 名称
无参数mixin
举例:@mixin widthHeight{
width: 200px;
height: 200px;
}
div{
@include widthHeight;
}
有参数mixin
@mixin background($color:green){
background: $color;
}
div{
@include background;
}
多个参数mixin
调用时可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,
后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。
@mixin marginPadding($margin:50px,$padding:100px){
margin: $margin;
padding: $padding;
}
div{
@include marginPadding;
}
标签:表示 选择性 add 顺序表 idt back 参数设置 传递 默认
原文地址:http://www.cnblogs.com/liam-lee0787/p/5966813.html