Sass入门（一）

1.CSS预处理器

CSS预处理器定义了一种新的语言，其基本的思想是，用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者只要使用这种语言进行编码工作

CSS的预处理器包括：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

2. Sass的定义

Sass 官网上的描述：Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass是采用Ruby语言（第一次见到这个Ruby还是在优快云的Markdown提示中）编写的一款CSS预处理器

3. Sass和SCSS的区别

Sass和SCSS其实是一种东西，我们平时都称为Sass，两者之前不同之处有以下几点：

• 文件扩展名不同，Sass是以“.sass”后缀为扩展名，SCSS是以“.scss”后缀为扩展名
• 语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带大括号（{}）和分号（;），而SCSS的语法书写和CSS的语法书写方式非常类似

Sass语法：

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS语法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

4. Sass语法格式

Sass语法是Sass最初语法格式，它是通过tab键控制缩进的一种语法该规则，而且这种缩进要求非常严格，另外不带有任何的分号和大括号，常常把这种格式称为Sass老版本，其文件名以“.sass”为扩展名。

“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）

5. Sass编译

• 命令编译

  单文件编译：

  sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

  多文件编译：将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中

  sass sass/:css/

  编译Sass时，开启“watch”功能，这样只要代码进行修改，就能监测到变化，并且直接编译处理

  sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

• GUI工具编译

  1. Koala (http://koala-app.com/)
  2. Compass.app（http://compass.kkbox.com/）
  3. Scout（http://mhs.github.io/scout-app/）
  4. CodeKit（https://incident57.com/codekit/index.html）
  5. Prepros（https://prepros.io/）

• 自动化编译

  通过Grunt 和 Gulp 来配置 Sass 的编译

6. Sass中常见的编译错误

• 字符的编码：在Sass的编译过程中是不支持”GBK”编码的，所以在创建Sass文件时，就需要将文件编码设置为“utf-8”
• 路径的中文字符：在项目文件命名或者文件目录命名的时候最好不使用中文字符，以至于人为失误造成编译失败

7. 不同风格的输出方式

• 嵌套输出方式 nested
• 展开输出方式 expanded
• 紧凑输出方式 compact
• 压缩输出方式 compressed

nav {
    ul {
        margin : 0;
        padding : 0;
        list-style : none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

编译：sass –watch test.scss:test.css –style nested

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

编译：sass –watch test.scss:test.css –style expanded (结束的括号的位置与nested不同)

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

编译：sass –watch test.scss:test.css –style compact

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

编译：sass –watch test.scss:test.css –style compressed

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

8. Sass声明变量

变量包含三个部分：

• 声明变量的符号”$”
• 变量名称
• 赋予变量的值（值后面有“!default”表示默认值）

全局变量就是定义在元素外面的变量: 定义全局变量(在选择器、函数、混合宏…的外面定义的变量为全局变量)：

$color:orange !default;

局部变量定义在元素内部的变量

什么时候声明变量？

• 该值出现了至少两次
• 该值至少被更新一次
• 该值所有的表现都与变量有关（非巧合）

9. Sass的嵌套

• 选择器嵌套

  html结构：

  <header>
  <nav>
      <a href=“##”>Home</a>
      <a href=“##”>About</a>
      <a href=“##”>Blog</a>
  </nav>
  <header>

  css中对于a标签的样式：

  nav a {
  color:red;
  }
  
  header nav a {
  color:green;
  }

  Sass中使用选择器嵌套实现：

  nav {
  a {
    color: red;
  
    header & {
      color:green;
    }
  }  
  }

• 属性嵌套

  css中的样式：

  .box {
  border-top: 1px solid red;
  border-bottom : 1px solid green;
  }

  Sass中的样式：

  .box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
  }

• 伪类嵌套

  伪类嵌套与属性嵌套类似，只不过它需要借助“&”符号一起搭配使用

  .clearfix{
  &:before,
  &:after {
      content:"";
      display: table;
  }
  
  &:after {
      clear:both;
      overflow: hidden;
  }
  }

  编译出来的结果：

  clearfix:before, .clearfix:after {
  content: "";
  display: table;
  }
  .clearfix:after {
  clear: both;
  overflow: hidden;
  }

10. 混合宏

• 声明混合宏

  • 不带参数混合宏

  在 Sass 中，使用“@mixin”来声明一个混合宏

  @mixin border-radius{
      -webkit-border-radius: 5px;
      border-radius: 5px;
  }

  @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

  ​

  • 带参数混合宏

  @mixin border-radius($radius:5px){
      -webkit-border-radius: $radius;
      border-radius: $radius;
  }

  • 复杂的混合宏

  带有逻辑关系的混合宏

  @mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
      @include prefixer(box-shadow, $shadow);
    } @else{
      $shadow:0 0 4px rgba(0,0,0,.3);
      @include prefixer(box-shadow, $shadow);
    }
  }

  这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”

  ​

• 调用混合宏

  在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏

  button {
  @include border-radius;
  }

混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块，Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起，这也是 Sass 的混合宏最不足之处

11. Sass扩展/继承

@extend 来继承已存在的类样式块

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

在Sass中的继承，可以继承类样式块中的所有的样式，而且编译出来的CSS会将选择器合并在一起，形成数组选择器

12. 占位符 %placeholder

%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的CSS:

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起

13. 混合宏 继承 占位符

• 【混合宏】

  不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，但是它可以传递参数

  建议：如果代码块中涉及到变量，使用混合宏会好一些

• 【继承】

  使用类名来表示，然后通过继承调用，编译出来的CSS会将使用继承的代码块合并到一起，通过组合选择器的方式呈现结果，这个比混合宏干净一些，但是不能进行变量传参

  建议：如果代码块中不需要任何变量参数，而且有一个基类已经在文件中存在，那么使用继承好一些

• 【占位符】

  与上面的继承相比，把继承的类表示的形式换成%…的形式，只是在代码中不会产生%…的相关代码，而继承是不管调不调用，这个基类都是存在的

  

14. Sass插值#{}

使用CSS预处理器的一个主要原因是想使用Sass获得一个更好的结构体系，比如说想要写更干净的、高效的和面向对象的CSS，Sass中的插值就是重要的部分

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

编译结果：

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

15. Sass的注释

• “/*……*/”：这种注释在CSS文件中显示
• “//”

16. Sass的数据类型

• 数字：如1，2，13，10px
• 字符串：有引号字符串或者无引号字符串，如“foo”，“bar”，baz
• 颜色：如blue，#04a3f9，rgba（255，0，0，0.5）
• 布尔值：true，false
• 空值：null
• 值列表：用空格或者逗号分开，如1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif，(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表

17. Sass运算

对于携带不同类型的单位时，会报错

.box {
  width: 20px + 1em;
}

编译的时候，编译器会报错：“Incompatible units: ‘em’ and ‘px’.”

”/ ”符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。

今天第一次学习Sass，感觉到了它带来的好处和方便性
在线编辑器网址: https://www.sassmeister.com/