sass常用语法

sass常用语法

sass是css的预处理器，提供了很多方便的语法，如嵌套、可复用代码块等，但是我们在做一般程序的时候用不上这么多功能，这里总结了sass里我用的最多的几种常用语法：

定义变量

$ff: Arial;
$font-color: #ccc;
$background-grey: #f5f5f5;

元素（包含伪类）的嵌套

a {
  color: $font-color;
  cursor: pointer;
  &:hover {
    text-decoration: none;
  }
}

这里的&指的是前面的选择器。

属性的嵌套

  font: {
    family: $ff;
    size: 26px;
    weight: 900;
  }

类的继承及不表现样式

%error {
  color: #f00;
}

%error.instrusion {
  background-image: url(../images/rabbit-big.png);
}

.serious-error {
  @extend %error;
  border: #ff0000 1px solid;
}

这里的%error是不表现样式，只能用来继承。

可复用代码块@mixin

@mixin col-sm ($width:50%){
  @media (min-width: 768px) {
    width: $width;
    float: left;
  }
}

这里定义了一个名为col-sm的代码块通过后面的括号传参，名为$width的参数默认值为50%，里面的@media是媒体查询，也可以不传变量，去掉后面的括号就行。