sass基本语法

前言

Sass的学名叫“CSS预处理器”，就是在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们以更少的代码实现同样的效果，而且代码的整洁度、可读性更强。

环境 参考

我是放在vue脚手架中操作的，不需要装，大致的语法是一样的，编译参考上文

本文是参考Sass中文网的，我只是个精简版的

Sass中文网

使用变量

变量声明用 $作为前缀

变量使用

可能看起来代码量反而增多了，但是在写大型项目的时候会让我们加快速度编码 $link-color与$ink_color指向的是同一变量，使用时小心

嵌套规则

大家肯定经历过这种事情

导入sass文件

当我们不需要把导入的文件生成一个单独的css时，我们仅需在在文件名前面加一个_

@import '/sass/_sigle.css' //这就会将内容导出到这个引用的地方

被导入文件的名字以.css结尾；

被导入文件的名字是一个URL地址（例如http://www.sass.hk/css/css.css ），由此可用谷歌字体API提供的相应服务；

被导入文件的名字是CSS的url()值。

设置默认值 加 !default

当多个文件导入，有重名的变量时，保证引用的时重新定义过的，如果没有重新定义则使用预先定义好的默认值

嵌入导入

你的局部sass文件在哪里被引用，就会导出到那个地方

注释

混合器

当一组css在多个地方使用时，可以使用这种方式

先定义一个混合器 @mixin

使用 @include

给混合器传参数

可以指定默认参数

选择器继承 @extend

颜色函数

另外几种颜色函数

数据类型 (Data Types)

数字，1, 2, 13, 10px字符串，有引号字符串与无引号字符串，"foo", 'bar', bazSassScript 支持 CSS 的两种字符串类型：有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；与无引号字符串 (unquoted strings)，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名

颜色，blue, #04a3f9, rgba(255,0,0,0.5)布尔型，true, false空值，null数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算

支持数字算数，支持关系运算

/ 除法是特例，通常在这几种种情况下展现如果值，或值的一部分，是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分

小结

https://www.sass.hk/docs/#t7-3-6 这是比较齐全的地址 仅供学习之用。