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：

• 自定义函数

定义：在sass中还能自定义函数，但必需要有返回值，并且要在调用前定义该函数。
语法：

@function name （） { return  }

eg：

sass的内容远不止这些，若是看完本博客后也有兴趣继续深刻学习sass，能够去看一下官方文档：
sass中文文档
官方文档