前端工具sass使用

一、sass的理解

sass就是让程序员写css时，可以按照编程语言的思路写。即有了sass，咱们写css就会简单得多。Sass是扩展了css3。Sass里有：变量，条件判断，循环，函数，混合，继承。

二、Sass的安装

1、安装ruby语言

因为，sass是基于ruby。但是程序员不需要学习ruby。
测试：
在命令行输入 gem -v 。
如果提示版本号，就说明没有问题，
否则，配置环境变量。

2、在windows环境下

(1)安装sass
①在命令行输入：gem install sass
如果不能安装，则，参见下一篇”sass安装包及来源远程服务器的配置”.

三、Sass的基本使用

1、编译sass文件

写好的sass代码，使用sass命令编译成css，就可以使用了。步骤如下：
(1)在项目根目录下创建demo01.scss
(2)在项目根目录创建文件夹css
(3)在demo01.scss文件里写上sass代码

(4)使用sass命令编译：
在命令行输入 sass demo01.scss:css\demo01.css
(5)那么，就会在项目目录下产生一个css文件

2、监听

在命令行输入：sass --watch .:css
这句命令的意思是：
监听当前目录（. 表示当前目录）下的所有sass文件，如果任何一个sass文件有改动，都会进行sass编译，产生css文件。

四、sass的语法

1、sass 的变量

sass中定义变量，要求以 $ 开头，赋值用冒号，
如：
$baseFontSize:12px; 表示定义了一个变量，名字$baseFontSize，赋值为12;

1）、sass定义的变量使用在属性值里

$baseFontSize:10px;*{margin:0;padding: 0;font-size: $baseFontSize;
}

2）、sass变量作为类名，或者属性名，要用 #{} 把变量名括起来

$direction:bottom;
#box1{border-#{$direction}:1px solid red;font-size: $baseFontSize+2;
}

2、Sass 嵌套

1）、选择器嵌套

#box3{width: 300px;a{color: red; }ul{list-style: none;}
}

2）、属性嵌套

//属性名嵌套
#box4{border:{top:1px solid pink;bottom:2px solid red;}
}

3、Sass 混合（@mixin @include）

(1)无参混合（可以用继承替代）

@mixin redBox {width: 200px;height: 150px;background-color: red;
}

(2)带参混合

@mixin blueBox($w:300px,$h:250px) {width: $w;height: $h;background-color:blue;
}

4、继承（@extend）：

//继承
#box8{width: 200px;height: 150px;background-color: skyblue;
}#box9{@extend #box8;color: white;
}

5、Sass里有数据类型和运算符，可以进行算术运算，比较运算，逻辑运算

(1)数据类型：
数字类型： 12，12px；
字符串：带双引号和不带双引号的都算，如：“hello”, hello
颜色：red,blue #ff9966
布尔类型：true，false
列表类型：
…………………………………………
(2)运算符：
算术运算符： + - * / %
比较运算符： > < >= <= != ==
逻辑运算符：and or not

6、流程控制

(1)@if

$theme:dark;body{@if $theme=="light" {background-color: yellow;}@else if $theme=="dark"{background-color: gray;}
}

(2)@for

$column:9;@for $i from 0  to $column {.col-#{$i} {left: $i * 150px;}
}

(3)@each
(4)@while