SCSS语法

1.嵌套规则

// scss
#id {
    color: #f00;
    .name {
        color: #00f;
        .child {
            color: #ff0;
        }
     }
}
// css
#id {
    color: #f00;
}
#id .name {
    color: #00f;
}
#id .name .child {
    color: #ff0;
}

2.引用父选择器&

// scss
.btn{
    background: #f00;
  &.active{
      background: #ff0;
  }
  &:hover{
      background: #fff;
  }
  &:visited{
      background: #f0f;
  }
  &-success{
   background: #00f;
  }
}


// css
.btn {
    background-color: #f00;
}

.btn.active {
    background-color: #ff0;
}

.btn:hover {
    background-color: #fff;
}

.btn:visited {
    background-color: #f0f;
}

.btn-success {
    background-color: #00f;
}

3.嵌套属性规则

// scss
.attr {
    font: {
        family: Microsoft YaHei;
        size: 18px;
        line-hight: 32px;
    };
    border: {
        radius: 50%;
    };
}


// css
.attr {
    font-family: Microsoft YaHei;
    font-size: 18px;
    font-line-hight: 32px;
    border-radius: 50%;
}

4.运算

声明变量

// scss
$width: 50px;

.wt {
    width: $width;
}

// css
.wt {
    width: 50px;
}

数学运算

// scss
#id {
    width: (1 + 2) *3px;
}


// css
#id {
    width: 9px;
}

特殊的/除法运算符

// scss
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5px)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
  padding-left: + 100px / 2;  
}

// css
p {
    font: 10px/8px;
    width: 500px;
    width: 1px;
    height: 250px;
    margin-left: 9px;
    padding-left: 50px;
}

scss为了兼容IE8,10px/8px不能种的 /不能编译为除法运算符，可以在除法运算前使用+运算符创建命名空间

颜色运算符

// scss
p {
  color: #001100 + #040506;
}
p {
  color: #010 + #040506;
}



// css
p {
    color: #041606;
}

p {
    color: #041606;
}

插值 #{}

// scss
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}


// css
p.foo {
    border-color: blue;
}

p {
    font: 12px/30px;
}

插值内的计算，null为空字符串

// scss
p:before {
    content: 'string #{1+2} str';
}
$val: null;
p:before {
    content: 'sting #{$val} str';
}



// css
p:before {
    content: "string 3 str";
}

p:before {
    content: "sting  str";
}