scss新手使用指南

还在用死的css写样式吗？那可太麻烦了，各类长串选择器不说，还有各类继承权重有时候还有可能不生效

 

个人小程序项目也结束了，是时候总结一下scss语法了，毕竟用起来更加方便并且还能精简一点代码，好处多多啊（新项目使用的是stylus，等我弄完了又来总结一手）

1. 经过$符号去声明一个变量，而后复用

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 支持嵌套规则，这也是我用的比较多的，可是过分的使用嵌套会让产生的CSS难以维护，所以仍是要稍微注意一下

.mycon{
    .my-top{
        width: 316px;
        height: 50px;
        position: relative；
    }
}

3.支持继承，使用@extend 后面加上的class名，若是须要继承多个类用逗号隔开

继承这个就太方便了，对于那种要求了字体的不一样啊什么大小不一样啊，这种看起来很琐碎的样式，这简直就是一键复制粘贴的效果啊有木有！！！

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error; // 直接继承hhh
  border-width: 3px;
}

4. 支持混合继承，用来分组那些须要在页面中复用的CSS声明，开发人员能够经过向Mixin传递变量参数来让代码更加灵活，没看懂？上代码

/*===== SCSS=====*/
@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
/*===== CSS=====*/
.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

5. 支持引用父级选择器&，简单点说就是能够直接在父级选择器上加新样式，而不用从新写，好比伪类选择器什么的

/*===== SCSS =====*/
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

/*===== CSS =====*/
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; 
}

6. 支持属性嵌套，只能说他们想法真的是清奇，做为一个前端实习生没看到这样作的效果hhh

/*===== SCSS =====*/
.mytest {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*===== CSS =====*/
.mytest{
  font-family: fantasy;mytest
  font-size: 30em;
  font-weight: bold;
}

7. 支持嵌入字符串哦，like this >  #{ 变量 }

$bg-path: "./img"

.card{
    background: url("#{$bg-path}/card-bg.png" center center);
}

8. 若是要引入scss文件，使用@import