常用语法总结
1.定义变量
$变量名
2.声明混合
@mixin
带参数的写法为@mixin name(param1,param1){}
不带参数的写法为@mixin name{}
调用方式为
@include name;
3.定义function
3.1 @function fun1(){
}
3.2 @function fun1(x,o){
}
*可以使用@return返回想得到的结果
调用方式为
func1();
4.继承
@extend
可以是标签,class,id
调用方式为
@extend div;
5.遍历
@each
使用场景大多是多个相同子标签设置样式
使用方法(举例说明):
$li: 1,2,3,4,5,6;
@each $index in $li{
li:nth-child(#{$index}){
$itemUrl:'si-#{$index}.png';
@include setItemBg($itemUrl,410);
width: 427px;
}
}
注意,在循环体内部获取$var 的方式为#{$var};
这里还有@for,由于不经常使用,有兴趣的可以自己找资料看看
5.条件判断 @if ,@else if , @else
举例:
@mixin setbg($type){
@if $type == 1{
background: url(../images/bg-one.png);
} @else if $type == 2{
background: url(../images/bg-two.png);
}
}
说明:这个例子是为我的页面不同模块的设置不同的背景,通过调用setbg判断传入的参数,来进行区分
6.
@content
允许传入整块样式
举例:采用官网的例子
$color: white;
@mixin colors($color: blue) { background-color: $color; @content; border-color: $color; } .colors { @include colors { color: $color; } }
编译后:
.colors {
background-color: blue;
color: white; border-color: blue; }