关于Sass一些了解

SASS

1.css预处理器：CSS扩展语言 -- 可以通过预处理器的特点语法生成CSS

2.热门CSS预处理器：SASS LESS Stylus PostCSS

3.工作流程：通过Sass预处理器语法编辑css --> 将这些文件编译成.css文件

4.Sass：兼容所有的CSS版本

5.Sass文件类型 ： ①.sass：早期版本，使用缩进表示属性属于某个选择器，使用换行

②.scss：现在版本

二、安装Sass

1.安装ruby：因为SAss使用ruby

1.ruby -v ：查看ruby的安装版本，安装成功后会有显示
2.将ruby添加到环境变量：勾选Add Ruby executables to your PAth
3.安装ruby时，会顺带安装gem工具（管理基于ruby开发的软件应用）
4.更改gem源：gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

2.安装Sass

1.安装：gem install sass
2.查看sass版本：sass -v
3.更新：gem update sass

3.编译sass文件

1.单个文件手动编译
sass  path/待编译文件.scss  path/编译后的文件.css
2.监听单个文件：单个文件的改变会自动编译
sass --watch path/待编译文件.scss:path/编译后的文件.css
3.监听整个文件夹：监听该文件夹下的所有scss文件的更改
sass --watch scss文件所在的目录：css文件所在的目录
注意：编译之后的css文件名和scss文件名一一对应

三、语法规则

1.嵌套规则

1.选择器内嵌套选择器：内层的选择器会将外层的选择器作为祖先选择器
2.&：表示父选择器
3.属性嵌套
background：{
   color：red；
   image：url；
   repeat：no-repeat；
}

2.注释

1.// ：只存在于源文件中，编译之后移除
2./**/:源文件和编译之后的文件都存在

3.变量

1.定义变量：$var:val;
2.调用变量：$var
注意：变量具备块级作用域，写在根目录的为全局变量，{}内的为局部边变量，局部变量可以通过！global转换为全局变量
3.插值：#{}  --拼接（选择器或属性名中）

4.流程控制：@for：数字循环 -- through包含end ， to不包含end

//@for循环
@for $i from 1 through 3{
    //插值
    .hot#{$i}{
        width: 100px*$i; //运算
    }
}

@each ：列表列表(sass的数组类型)循环

//@each循环
@each $v in discount,decrease{
    .bg-#{$v}{
        background: url("./images/#{$v}.png");
    }
}

@while：条件为真即循环

@while：条件为真即循环

@while condition{}

@if：判断

@if condition{
    //condition不为false和null时执行
}@else if condition{}@else{}

5.混合指令：定义重复的样式并调用

1.定义混合指令
@mixin name{
    css code;
}
@mixin name(arg1,arg2:val2){}
2.调用混合指令:必须先声明，再调用
@include name;
@include name(val,val2);

6.函数指令

1.定义函数指令
@function name(){
    @return val;
}
2.调用函数指令
div{css属性名:name();}

7.继承指令：将当前选择器与继承的选择器写成组选择器

@extend selector;

8.加载其他scss文件

@import "path/*.scss"

四、编译风格

1.Nested：默认，选择器与属性等单独占用一行，缩进量与Sass文件中一致，每行缩进量反映了其在嵌套规则内的层数

2.Expanded：选择器、属性等各占一行，属性根据选择器缩进，而选择器不做任何缩进--平时手写效果

3.Compact：每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符

4.Compressed：压缩格式，删除所有的空格，换行以及注释，并且还会自动替换占用空间大的属性值表示方式

5.如何设置：--style