SCSS入门

SASS

就是去掉了分号和括号的一门语言

SCSS

SCSS就是基于SASS语言的一套更适合前端工程师看的语言

npm init -ynpm i -D parcelnpx parcel index.html

可以自动的去编译SCSS的在线工具
还可以在codepen上自己切换SCSS的工具

嵌套选择器

.nav {
  border: 1px solid;
   > ul {
    background: white;
    }
}

变量

$grey: #666;$border-width: 2px;

.nav {
  border: $border-width solid $grey;
   > ul {
    background: white;
    }
}

方便统一改样式，只需要改一处就行

mixin

可以把一堆代码写到一个地方，取个名字，然后在下面复用，如下：

$grey: #666;$border-width: 2px;
@mixin debug {  border: 1px solid red;  background: $grey;
}

.nav {
  @include debug;
   > ul {    background: white;
    }
}

高级用法，可以将其写成函数并带有参数，参数可以有默认值：

$grey: #666;$border-width: 2px;
@mixin debug($border-color: red) {  border: 1px solid $border-color;  background: $grey;
}

.nav {
  @include debug;
   > ul {    background: white;
      > li {
        @include debug(green)
      }
    }
}

placeholder

将要用同样样式的选择器放在了一起，节省了样式的代码。（mixin并没节省代码，只是复制粘贴了）

$grey: #666;$border-width: 2px;
%debug($border-color: red) {  border: 1px solid $border-color;  background: $grey;
}

.nav {
  @extend debug;
   > ul {    background: white;
      > li {
        @extend debug(green)
      }
    }
}

         

             

作者：徐金俊
链接：https://www.jianshu.com/p/c31c388c4fcd