sass的基本使用

最近在项目中利用到了css预处理器（sass），而之前没接触过的本博主出于好奇心，就在业余的时间里搜了一些资料来看看，看完后觉得sass挺不错，就想简单的介绍一下sass的基本使用方法（ps：本文只介绍sass的一些基本使用，而这些内容都是本博主觉得比较有趣而且比较用得上的知识点）

- 1.sass的配置：

sass使用范围很大，如在vue的单组件文件中可以作为样式模板调用，react中也可以使用sass，而至于在vue，react中如何配置，本文不打算详细阐述，有兴趣的读者可以自行查阅。
本文所有的例子都是在webstorm中编译，而webstorm可以自行编译sass，具体可以查看该链接：
webstorm配置sass
- 2.sass的概念：

定义：sass是css的一种预处理器，文件后缀名为.scss，可以用webpack中的sass-loader来转成css样式。
ps：因为sass是基于ruby编写的，所以需要安装ruby后才能下载sass，才可以用；

- 3.sass的基本使用方法：

A）基本用法：

- 变量

语法：$变量名：变量值 ;
用途：在sass中，可以定义一些项目中常用的样式变量，如font-size，color，background-color等；
eg：

      $a:12px;
      .box1{font-size:$a;}
      .box2{font-size:$a + 2px}

ps：sass中的所定义的变量不单只利用在样式值上，还能拼接字符串，动态改变属性的名称；
用法：#{$变量}
eg：

      $a:left;
      $b:#888;
      .box1{border-#{$a}-color : $b}

- 计算功能

在项目中，如果用到sass，定义变量时都会定义一些常用的值作为sass的变量，但如果在写样式时如font-size的值在常用变量中没有定义，那么可以利用sass变量的计算能力（加减乘除）

- 嵌套

定义：若几个节点存在存在亲属关系，则在sass上可以用嵌套的方式来代替原css中的后代选择器；如果在嵌套中想调用父元素，则可以用&代替；

- 媒体查询

在sass中@media可以不用写在外层，直接嵌套在对应的选择器里面写响应式；
eg：

未改变之前：

改变之后：

B）复用：

- 继承

定义：在sass中允许一个选择器继承另一个选择器的全部样式；
语法：选择器 { @extend 另一个选择器 }

eg:

- mixin

定义：在sass中，可以利用@mixin来定义一个复用块，而且该复用块还能引入参数和参数的默认值。
语法：

 定义复用块  @mixin name （param1：default1 ，param2：default2，...）{   }
 引用复用块  选择器{
                    @include name (val1,val2,...)
                  }

eg:
（mixin.scss文件）

（调用文件）

插入文件

这个知识点在css中就已经存在，就是将css模块化处理，然后利用@import来调用；上面的例子就是利用了这个知识点，一般情况下，在项目开发过程中，也推荐这种做法。

C）高级用法：

条件用法

定义：sass中可以像js一样采用条件判断语句选择性采用合适的样式块；
语法：

  @if （confident） { 样式块1 }
  @else { 样式块2 }

eg:

注意：如果mixin中，有些参数有默认值，有些参数没有，则没有默认值的参数要放在参数列表的前面。

循环用法

定义：sass中不仅仅可以用条件语句，还可以调用循环语句；sass中的循环语句有@for 和@while，用法基本一致。
语法： @for $i from start to end { 样式 } ，@while confident { 样式 }
注意：@for 是从start到end但不包含end；
eg：