sass经验总结

常用语法总结

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