sass使用

sass是啥

    CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的
出现，让 CSS 实现了通过代码编程来实现的方式。
    SASS 是一种 CSS 开发工具，提供了许多便利的写法，让CSS 的处理实现了可编程处理。
    SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的 CSS 样式表文件，易于组织和维护。

后缀

sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种就是我们这    里使用的 scss 文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。
在此也建议使用后缀名为 scss 的文件，以避免 sass 后缀名的严格格式要求报错。

安装

1.ruby安装，用命令行gem install sass

编译

1.先进入包含.scss文件的文件夹
2.sass --watch example.scss:example.css --style 
参数1

参数如下：
nested  嵌套
compact  紧凑 每个选择器代码在一行
expanded  扩展(完全格式化标准)
compressed  压缩一行

3。多文件编译
sass --watch .:css --style nested 

中文注释问题

@charset "utf-8";

Sass-变量定义

变量

    必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号:进行分隔（参考 CSS 属性和值的设定语法） ，如果值后面加上[!default]就表示默认值。
引用变量的值，直接使用变量名称，即可引用定义的变量的值

$w:200px;
$h:200px;
$color:red;
.box{
    width: $w;
    height: $h;
    background: $color - 10;
}   

特殊变量

一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作为属性或者其他的特殊情况下，必须使用#{$variable}的形式进行调用。

$b:border;
$n:none;
.box1{
    #{$b}:1px solid #f99;
    #{$b}-color:red;
    display: $n;
}

Sass-数组/map

map 就是列表项目中带名称的列表
定义数组： $map：(key1:value1, key2:value2, key3:value3)

length($map):获取 map 中的元素对个数
map-keys($map):获取指定$map 中所有的 key
map-values($map):获取指定$map 中所有的 value
map-values($map):获取指定$map 中所有的 value
map-merge($map1, $map2):将$map1 和$map2 合并在一起
map-remove($map, key):将指定名称的 key 从$map 中移除

Sass-嵌套

1.选择器嵌套，在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性
2.嵌套属性——不常用

选择器

.box2{
    color:red;
    p{
        width: 10px;
        height: 200px;
        li{
            color:red;
        }
    }
}

属性

.box3{
    width: 200px;
    height: 200px;
    border:{
        width: 20px;
        style:dashed;
        color:blue;
        top:{
            style:double;
        }
        bottom:{
            color: red;
        }
    }
}

Sass-mixin函数

sass 中可以通过@mixin 声明混合，可以传递参数，参数名称以$开始，多个参数之间使用逗号分隔，@mixin 的混合代码块由@include 来调用。

@mixin top($co:red,$wb:50px){
     border-color: transparent transparent $co transparent;
     border-width: $wb;
     border-style:solid;
}
.box4{
    width: 0;
    height: 0;
    @include top();
}

Sass-语句

if语句

@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的
样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式，里面不能定$n:200px;

$m:600px;$s:red;
.box5{
@if $n<$m {

    background: #99f;
} @else {
    background: #f99;
}
width:$n;
height: $m;
background: $s;

}

for语句

@for $i from 1 through 5 {
        .box_#{$i}{
            width: 100px;
        }
    }

@for $j from 1 to 3{
      .hezi_#{$j}{
          height: 100px;
      }
}

while语句

$a:1;
@while $a < 6 {
    .hezi_#{$a}{
          border-width: 100px;
      }
      $a:$a +1;

}

继承

在 SASS 中，通过继承/扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有的样式。

.box5{
    width: 100px;
    height: 200px;
    background: #f99;
}

.box6{
    @extend .box5;
}

Sass-导入

CSS 本身包含一个指令@import，但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源
Partials 这样的文件， 命名规范是以下划线开头的， 这样的 scss 文件不会被编译成 css文件。
Partials 是用来定义公共样式或者组件的样式的， 专门用于被其他的 scss 文件 import进行使用的
在 SCSS 文件中引入指令@import 在引入Partials 文件时，不需要添加下划线和扩展名。 

自定义函数

函数的功能主要是数据的运算，SASS 中可以将一些值交给函数进行处理，具体的处理方式

@function add($n){
    @return $n*10;
}

.box8{
    width: add(50);
    height: add(25);
    background: #f99 + add(5);
}

颜色函数

 lighten(#cc3, 10%)  // #d6d65c
  darken(#cc3, 10%)  //  #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

 background: lighten(#cc3, 10%) ;