scss新手使用指南

2019-11-11 来源: 爱好中医的女前端 发布在  https://www.cnblogs.com/fdd-111/p/11836446.html

还在用死的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

相关文章