sass基础

1.Sass是一种CSS的预处理器，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

2.搭建sass环境

（1）下载并安装ruby: 根据操作系统，选择相应的安装包。安装好后配置好环境变量。打开cmd命令行界面，输入gem -v ，如果显示出了版本号，则说明安装成功。

（2）安装sass:点击运行打开命令行窗口，输入“gem install sass”,安装sass

（3）HBuilder添加sass插件

•菜单‘工具’下，选择‘预编译器设置’→选择‘.sass,.scss’，点击编辑

填写完整后点击确定完成就行。

3.sass语法特性

(1)变量

sass中把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。方便统一修改和维护。

变量声明：$highlight-color: #F90;

(2)嵌套

sass可以进行选择器的嵌套，表示层级关系。容器元素的样式规则会被单独抽离出来，而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。

(3)导入

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀。这样，在不修改样式表的前提下，可以随意修改别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。

sass中如导入其他sass文件，最后编译为一个css

@import“路径/file1.scss”,”路径/file2.scss”

（4）mixin混合

sass中可用mixin定义一些代码片段，且可传参数

(5)扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁

(5)函数

sass内置大量函数，简化了操作。

4.变量

sass的变量定义格式

$变量名:属性值;

默认变量：sass的默认变量仅需要在值后面加上!default即可。

特殊变量：如果变量作为属性则必须要以#{$variables}形式使用。

全局变量：在变量值后面加上!global即为全局变量。

5.嵌套

(1)选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

(2)属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头

6.混合（mixin）

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

7.运算、判断、循环

（1）运算

数值型的Value (如：数字、颜色、变量等)可进行加减乘除四则运算，运算符前后要留一个空格

（2）@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用  @if(条件){}@else{}

(3)三目判断

语法为：if($condition, $if_true, $if_false)。

（4）for循环

@for$var from <start> through <end>

@for$var from <start> to <end>。

$i表示变量，start表示起始值，end表示结束值

关键字through（>=）表示包括end这个数，而to（>）则不包括end这个数。