对于scss文档写了很多，但是常用语法就这些，下面做一个总结

一、嵌套

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

//编译为

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

二、父选择器

对于class命名是个难题，所以我们有时习惯用前缀来区别不同

例如：

<div class="home">
    <div class="home-title"></div>
     <div class="home-content"></div>
     <div class="home-footer"></div>
</div>

scss写法

.home{
    &-title{
        background:red;
    }
     &-content{
        background:black;
    }
      &-footer{
        background:green;
    }
}

编译后

.home-title{
     background:red;
}
.home-content{
     background:red;
}
.home-footer{
     background:red;
}

三、变量

scss定义变量很简单就是加个$,可以写在{} 内也可以不写，代表着全局变量和局部变量

$width:5px;
.main{
    $heigth：10px;
    width:$width;
    .child{
        heigth:heigth;
        width:$width;
}
}

四、插值语句

#{} 代表的插值

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

五、运算与数据类型

scss支持js的运算，

数字运算， +, -, *, /, %

关系运算 <, >, <=, >= ==, !=

布尔运算 and or not，

数组 用空格逗号隔开都可以称为数组 1 2 或者 1,2 ( )代表空数组

字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

数字，1, 2, 13, 10px

maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
//假设要获取 facebook 键值对应的值 #3b5998，我们就可以使用 map-get() 函数来实现：

.btn-dribble{
  color: map-get($social-colors,facebook);
}

编译后

.btn-dribble {
  color: #3b5998;
}

六、导入scss @import

@import "foo.scss"

七、继承样式 @extend

当下面的样式和上面样式完全相同，可以用@extend直接继承上面的样式，同时在编译的时候，scss会在合并样式的时候，避免重复的css

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

对于伪类只能继承一层，但是可以延展给选择器列

#fake-links .link { //延展给所有选择器
  @extend a;
}

a {
  color: blue;//只能继承到一层
  &:hover {  //这里不会被继承
    text-decoration: underline;
  }
}

编译为

a, #fake-links .link {
  	color: blue; 
}

  a:hover, #fake-links .link:hover {
    text-decoration: underline; 
}

多层是可以继承的

示例 如下 可以知道@extend是可以多个使用，同时可以继承嵌套的scss，但是有个问题，如果嵌套中使用了父选择器

那么最外层，下面必须存在css样式不然会报错

.large-text {
     .title {
    color: blue;
    background-color: red;
  }
}
//使用
div {
 @extend .large-text;
 @extend .a;
  padding: 4px;
  margin-top: 10px;
}
.a {
  font-size: 16px; //这里必须有css，不然会找不到.a
  &-hover {  //这里不会被继承
    color: blue
  }
}

八、常用的指令

指令常用于封装工具样式，我会单独用一篇文章来阐述，工具样式的封装，提供编写效率

@each

示例

@each $var in(left,center,right){
    .text-#{$var}{
		text-align:$var;
    }
}

编译后

.text-left{
    text-align:left;
}
.text-center{
    text-align:center;
}
.text-right{
    text-align:right;
}

示例2：

$color{
    "black":#000;
    "white":#fff;
}

@each $colorKey,$color in $color {
    .text-$colorkey{
        color:$color
    }
}

编译后

.text-black{
    color:#000;
}
.text-white{
    color:#fff;
}

@mixin 和 @include

用处类似于extend，区别在于mixin是可以传递参数

这2个是对应关系，一个定义混合样式，一个使用

示例1

@mixin large-text {
  font: { //scss允许这种写法，但是基本不咋用
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
     a {
    color: blue;
    background-color: red;
  }
}

//使用
page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译后

.page-title {
       a {
    color: blue;
    background-color: red;
  }
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

示例2 函数写法

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

//第二种写法
@mixin sexy-border($color, $width: 1in) { //可以给与默认值，
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }//当不传递的时候默认第二个值
h1 { @include sexy-border($color: blue, $width: 2in); }//也可以添加关键词，这样顺序可以打乱

原文地址：点击进入