sass跟scss基本相同，区别在于sass去掉了分号和大括号，用缩进来区分样式表，而scss保留了大括号和分号

为了便于阅读，本篇使用scss形式

1 变量

1-1 声明变量&引用变量

使用$来声明变量，引用时直接填入声明的变量名，如

$titlefont-size: 20px;

.title{
  font-size: $titlefont-size
}
// 编译后
.title {
  font-size: 20px;
}

2 嵌套规则

按照html文档内容的层级关系来编写样式表，与less语法一致，比如有如下的html文档

<div class="article">
  <div class="title">
    <h2></h2>
  </div>
  <div class="content">
    <p></p>
  </div>
</div>

如果直接对h2或p的样式直接修改，会影响到全部的h2和p标签样式，如果按照层级去编写就会嵌套很长的选择器，在sass中

.article {
  .title {
    h2 {
      color: red;
    }
  }
  .content {
    p {
      font-size: 17px;
    }
  }
}

就可以自动编译出嵌套的选择器

image-20200923120729272

2-1 父元素选择器

使用&选择父元素，跟less也是一样的，主要用于伪类选择器

.father {
  p {
    color: red;
  }
  &:hover {
    cursor: pointer;
  }
}
// 可以将伪类选择器直接追加到父类选择器后面
.father p {
  color: red;
}
.father:hover {
  cursor: pointer;
}

2-2 群组选择器

使用,进行群组嵌套，如

.container {
  h1, h2, h3 {
    color: red;
  }
}
// 会把内容展开分别嵌套
.container h1, .container h2, .container h3 {
  color: red;
}

2-3 子组合，同层组合选择器

使用>选择元素的直接子元素，使用+选择紧跟在对照选择器后面的目标选择器，使用~选择同层全体

.father {
  > .son {
    color: red;
  }
  + father2 {
    color: yellow;
  }
  ~ fathers {
    color: black;
  }
}

2-4 属性嵌套

可以使用-来组合属性，如

section {
  border: {
    style: solid;
    width: 1px;
    color: red;
  }
}
// 编译后如下
section {
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

你可能会觉得这没有什么，直接使用border属性可以组合三种属性，别急，继续看，他还能这么组合

section {
  border: solid 1px red {
    left: 0;
    right: 0;
  }
}
// 编译后
section {
  border: solid 1px red;
  border-left: 0;
  border-right: 0;
}

3 导入文件

使用@import导入导入外部样式，sass和scss后缀名可省略

3-1 默认变量

重复声明一个变量后边的赋值会覆盖前面的变量，在导入文件时可能会被定义的样式覆盖，可以使用默认变量值!default声明变量

3-2 嵌套导入

.blue-theme {@import "blue-theme"}

//生成的结果跟scss文件的内容完全一样

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

4 注释

有两种注释方式，一种会编译到css文件，一种不会被编译

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

5 混合

使用@mixin声明一段代码，然后使用@include来提取这段代码

6 继承

使用@extend继承一段已经写好的css样式

赏

前端小白