常用语法总结

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; }