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

巴特西

scss新手使用指南

最新文章

热门文章