前端Sass的基础知识

Sass基础知识

说明：本处的Sass的学习最后是经过nodeJs的学习以后再来进行，因为其中使用的node-sass是编译环境

Sass是一种预处理CSS语言，通过SASS的功能，我们可以在写CSS的时候使用继承，变量等功能，SASS是一种兼容性强，成熟，特性丰富的CSS语言

在使用SASS之前，我们需要先安装SASS的开发环境，SASS是可以通过NodeJS平台来进行编译处理的

Sass与SCSS的区别

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法

由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 SCSS。

下面两部分代码对比，大家就会很清楚两者之间的关系了

#sidebar
  width: 30%
  background-color: #faa

上面的代码是Sass的代码

#sidebar {
  width: 30%;
  background-color: #faa;
}

上面的代码是Scss的写法

说明：通过上面的两部分我们发现，这段简单的 Sass 代码只需添加花括号和分号就能转换为 SCSS 语法
各位一定要注意 ，SASS是一种标准 ，而SCSS是一种语法，我们在使用Sass的时候都是采用的SCSS这种语法

Sass的编译环境安装

1. 在nodejs的平台下面，我们需要安装node-sass模块，通过这个模块，我们可以将scss文件转换成css文件

   $ cnpm install node-sass --save
   

2. 安装完成以后，我们新建一个文件，名为index.scss文件

3. 使用node-sass的语法来编译index.scss,具体语法如下

   node-sass --watch src/index.scss dist/index.css
   

4. 如果我们需要监控一个文件夹下面所有的文件，则需要使用如下的语法格式

   node-sass  -w -r <源文件夹> -o <目标文件夹>    //它只会跟踪同名文件，没有则新建
   -w, --watch                Watch a directory or file //监听
   -r, --recursive            Recursively watch directories or files  //递归地查看目录或文件
   -o, --output               Output directory //输出目录
   

5. 为了能够方法的执行我们的node-sass语法，我们一般会把编译命令写在package.json的配置文件下面，如下：

   {
       "name": "sass01",
       "version": "1.0.0",
       "description": "sass的练习",
       "main": "index.js",
       "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1",
           "sass": "node-sass --watch ./src/index.scss ./src/index.css"
       },
       "keywords": [],
       "author": "",
       "license": "ISC",
       "dependencies": {
           "node-sass": "^4.8.3"
       }
   }
   

Sass的基础语法

变量声明与引用

sass变量的声明和css属性的声明很像：

$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。

嵌套CSS规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID:

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

上面的CSS代码经过使用SCSS的语法以后就会变得非常简单，如下所示

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

父选择器的标识符&

在SCSS中，有时候，我们需要在子级当中使用父级选择器，这个时候，我们就需要使用&来选取父级选择器

.div1{
  width:100px;
  height:100px;
}
.div1 img
{
  width:100%;
  height:auto;
}
.div1:hover
{
    border:1px solid black;
}

上面的CSS代码经过Scss的处理以后，我们可以简写为如下

.div1{
  width:100px;
  height:100px;
  img{
    width:100%;
    height:auto;
  }
  &:hover
  {
      border:1px solid black;
  }
}

子级选择器中的> ~与+

1. '>'代表是的子级选择器
2. 空格代码的是后代选择器
3. '+'代表的是相邻兄弟选择器
4. ‘～’代表兄弟选择器

以上的四种用法与CSS的选择器保持一致

跳出嵌套

如果想在一个嵌套里面跳到外边去，我们需要使用@at-root

混合器

有时候我们在写样式的时候会发现，有些地方有样式，其中有一些是相同的，这个时候，我们会把这些样式提取出来，然后再单独导入进去。

例如：假设我们需要写一个button，这个button的大小与边框都一样，唯独里在的颜色中一样的时候，我们可以 使用混合器做如下处理

@mixin btn
{
  width:120px;
  height:35px;
  border:1px solid lightgray;
  border-radius:15px;
}
.btn-success{
  @include btn;
  background-color:green;
}

说明：在上面的代码当中，我们发现，我们使用了@mixin来定义一个混合器，在下面的样式当中，我们使用了@include导入混合器。这样 .btn-success的样式就结合了之前定义的样式了

混合器的中参数

SCSS中的混全器有点类似于我们之前学习的方法，定义一个混合器就相当于定义了一个方法，而我们定义方法的时候可以定义参数，在调用方法的时候，我们则可以使用这个参数。同理，在SCSS当中，我们定义混合器也可以使用参数，代码如下所示：

@mixin flex-box($direction){
  display:flex;
  flex-direction:$direction;
}
.item1
{
  @include flex-box(row);
  justify-content:center;
  align-items:center;
}

上面的代码经过node-sass处理以后，如下：

.item1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
}

混合器参数的默认值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值，上面的SCSS中，我们希望弹性例子默认的主轴是column这个时候，我们可以定义如下：

@mixin flex-box($direction:column){
  display:flex;
  flex-direction:$direction;
}
.item1
{
  @include flex-box;
  justify-content:center;
  align-items:center;
}

在上面的SCSS当中，我们在调用的时候没有传递参数给混合器，而是使用了它的默认值

选择器继承

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.divError {
  @extend .error;
  border-width: 3px;
}

上面的@extend就相当于继承，后面的.error则是继承的选择器，上面的SCSS经过编辑以后所呈现的代码如下所示：

.error, .divError {
  border: 1px solid red;
  background-color: #fdd; }
 
.divError {
  border-width: 3px; }

说明：我们可以看到，继承的选择器，它在这里使用了分组选择器来完了这个功能，这样我们的.divError的样式则单独的区分了开

Sass写在最后

1. 变量
2. 嵌套CSS规则
3. 混合器
4. 继承

在上的四种是Sass的核心内容，也是最基础内容，通过上面的四点以后，我们可以快速的编写页面样式，提高开发效率，做到CSS代码重复率低，可用性高