前端工具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