Sass语法

一、Sass简介

菜鸟教程：https://www.runoob.com/sass/sass-functions.html
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码，易于组织和维护。

Sass 文件后缀为 .scss。

输出的Scss有4种格式

1.nested，嵌套
2.compact，紧凑
3.expanded，扩展
4.compressed，压缩

引入

CSS原生的@import会通过额外的HTTP请求获取引入的样式片段，
而SASS的@import则会直接将这些引入的片段合并至当前CSS文件，
并且不会产生新的HTTP请求。

下面例子中的代码，将会在base.scss文件当中引入_reset.scss片断。

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

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

SASS中引入片断时，可以缺省使用文件扩展名，因此上面代码中直接通过@import 'reset’引入，编译后生成的代码如下：

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

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }

混合

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作。

@mixin 名字（参数1，参数2，......）{
...............
...............
...............
}

个人理解：相当于定义一个函数，当调用这个函数时，自动将函数内的css样式进行配置。

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

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

上面的代码建立了一个名为border-radius的Mixin，并传递了一个变量$radius作为参数，然后在后续代码中通过**@include** border-radius(10px)使用该Mixin，最终编译的结果如下：

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

继承

继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式。

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%father1 {
  display: flex;
  flex-wrap: wrap;
}

%father2 {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %father1;
}

.message1 {
  @extend %father2;
  border-color: green;
}
.error {
  @extend %father2;
  border-color: red;
}

编译后最终生成的css样式如下：

.message {
  display: flex;
  flex-wrap: wrap;
}

.message1, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message1 {
  border-color: green;
}

.error {
  border-color: red;
}

嵌套属性

CSS许多属性都位于相同的命名空间（例如font-family、font-size、font-weight都位于font命名空间下），Scss当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下，请看下面的代码：

/*===== SCSS =====*/
.demo {
  // 命令空间后带有冒号:
  font: small
  {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*===== CSS =====*/
.demo {
  font: small;
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

变量

变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。

$primary-color:#1269b5;

$primary-border:1px solid $primary-color;//可以为多个属性

div.box{
    background-color: $primary-color;
}

h1.page-header {
    border:$primary-border;
}

上面例子中变量$primary-color和$primary-border的值将会替换所有引用他们的位置。编译后css样式如下：

div.box {
  background-color: #1269b5;
}

h1.page-header {
  border: 1px solid #1269b5;
}

---

多值变量

多值变量使用 nth(变量名, 索引值) 索引值起始值为1 — 类似于css中 nth-child

还不如写多个单值变量 — 并不是 — 假设需要设定一组button按钮的样式

// scss
$baseColor: red blue;
html {
background: nth($baseColor, 1);
color: nth($baseColor, 2);
}
// ==> css
html {
background: red;
color: blue; }

& 父类选择器

Scss使用"&"关键字在CSS规则中引用父级选择器，例如在嵌套使用伪类选择器的场景下：

.nav {
  a {
    font-weight: bold;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    body.firefox & {
      font-weight: normal;
    }
    ul {
      margin: 0ch;
      li {
        float: left;
        list-style: none;
      }
    }
  }
  & &-text {
    font-size: 15px;
  }
}

编译后css样式如下：

.nav a {
  font-weight: bold;
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

body.firefox .nav a {
  font-weight: normal;
}

.nav a ul {
  margin: 0ch;
}

.nav a ul li {
  float: left;
  list-style: none;
}

.nav .nav-text {
  font-size: 15px;
}

循环

// scss
$list: (top 30px) (right 30px) (bottom 10px) (left 40px);
@each $name, $value in $list {
  .box-#{$name} {
    width: $value;
  }
}

// ==>
.box-top {
width: 30px; }

.box-right {
width: 30px; }

.box-bottom {
width: 10px; }

.box-left {
width: 40px; }

---

$headers: (h1: 32px, h2: 20px, h3: 14px);
@each $key, $value in $headers {
#{$key} {
font-size: $value;
}
}


h1 {
font-size: 32px; }

h2 {
font-size: 20px; }

h3 {
font-size: 14px; }

vs code中的Easy Sass插件

1.settings.json配置文件
文件 => 首选项 => 设置 => settings.json全局配置文件
2.配置项说明

"easysass.compileAfterSave": true,  // 保存scss/sass文件后自动编译
"easysass.excludeRegex": "",   // 提供文件名正则表达式，匹配到的文件会被排除，不会编译为css，默认为空，则功能关闭
"easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
],
"easysass.targetDir": ""   // 很多情况下 scss/sass 文件和 css 文件是不在同一个目录下的，而 Easy Sass 默认输出的 css 是和当前 Sass 文件处于相同目录的为此我们需要通过该参数来配置输出路径
// 编译不同风格的css
// 1.easysass.formats[i].format 用以编译生成对应风格的css，参数值默认是expanded
//  nested：嵌套缩进的 css 代码。
//  expanded：没有缩进的、扩展的css代码，整齐。
//  compact：简洁格式的 css 代码,每个选择器的全部样式写在同一行。
//  compressed：压缩后的 css 代码。
// 2.easysass.formats[i].extension 用以设置编译输出的文件拓展名,此处可以自定义文件名，输出的 css 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成
// 例如：设置 "easysass.formats[i].extension": ".min.css"，假设当前的 Sass 文件名为style.scss，则编译输出的 css 文件名为 style.min.css

Sass函数

详见：https://www.runoob.com/sass/sass-functions.html