scss 的基本使用

使用变量

SASS通过$符号去声明一个变量，来存储需要复用的信息

$variable-color: #333;
.main {
  color: $variable-color;
}

编译后产生的CSS代码

.main {
  color: #333; 
  }

嵌套

以嵌套的方式使用CSS，但是过度的使用嵌套会让产生的CSS难以维护

.main {
  ul {
    margin: 0;
    padding: 0;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px;
  }
}

编译后产生的CSS代码

.main ul {
  margin: 0;
  padding: 0;
 }
.main li {
  display: inline-block;
}
.main a {
  display: block;
  padding: 6px;
 }

引入

SASS能够将代码分割为多个片段，SASS会通过这些下划线来辨别哪些文件是SASS片段，并且不让片段内容直接生成为CSS文件，从而只是在使用@import指令的位置被导入，CSS原生的@import会通过额外的HTTP请求获取引入的样式片段，而SASS的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。

// _reset.scss
html, body, ul, ol, div {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  background-color: #000;
}

编译后产生的CSS代码

html, body, ul, ol, div {
  margin: 0;
  padding: 0; }

body {
  background-color: #000; }

混合(mixin)

用来分组那些需要在页面中复用的CSS声明(添加浏览器兼容性前缀的时候非常有用),可以通过向Mixin传递变量参数来让代码更加灵活。

@mixin border-radius(radius) {
          border-radius: radius;
      -ms-border-radius: radius;
     -moz-border-radius: radius;
  -webkit-border-radius: radius;
}

.main {
  @include border-radius(10px);
}

编译后产生的CSS代码

.main {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; }

继承

通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代

.layout {
  display: flex;
  flex-wrap: wrap;
}
.main{
  @extend .layout;
}

.nav{
  @extend .layout;
  border-color: green;
}

编译后产生的CSS代码

.main, .nav {
  display: flex;
  flex-wrap: wrap;
 }

.nav{
  border-color: green; 
}

CSS扩展

如果在父级选择器不存在的场景使用&，Scss预处理器会报出错误信息。

// 第一种
a {
  font-weight: 700;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.layout & { font-size: 14px; }
}
// 第二种
#main {
  color: black;
  a {
    font-weight: 700;
    &:hover { color: #000; }
  }
}
// 第三种
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译后产生的CSS代码

// 第一种
a {
  font-weight: 700;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.layout a {
  font-size: 14px;
}

// 第二种
#main {
  color: black;
}
#main a {
  font-weight: 700;
}
#main a:hover {
  color: #000;
}
// 第三种
#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

嵌套属性

CSS许多属性都位于相同的命名空间（例如font-family、font-size、font-weight都位于font命名空间下）

.main{
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 16px;
    weight: 700;
  }
}

编译后产生的CSS代码

.main{
  font-family: fantasy;
  font-size: 16px;
  font-weight: 700; }

SASS与Stylus的不同之处在于，SASS不允许@extend嵌套选择器: