#千锋逆战班，打卡第二天#

sass是css的预编译语言，比css更高更快更强

将sass语言写在后缀为 .sass 或者 .scss 的文件里面。

.sass文件和 .scss 文件的区别

  在.scss文件里面和写css语法基本一致         
  在.sass文件里面就没有大括号和分号，全部依靠缩进来维持关系          
  这两个文件被编译成css文件以后是一样的

sass工具编译 .sass 和 .scss文件

   1.sass单文件编译          
    + 先写好一个.scss 或者 .sass后缀的文件          
      + 打开命令行，切换到文件的目录          
      + 输入指令           
     -> sass 要编译的文件 编译后的文件名          
      + 每次修改scss文件都需要从新编译一下         
   2. sass 单文件实时编译          
     => 你先写好一个 .sass 或者 .scss 后缀的文件          
     => 打开命令行, 切换到文件的目录          
     => 输入指令            
       -> sass --watch 要编译的文件:编译后的文件名         
     => 一个终端只能监控一个文件, 你要是想监控多个文件, 需要开启很多终端       
   3. sass 文件夹实时编译          
     => 把一个文件夹里面的 sass 文件全部编译到另一个文件夹里面         
      => 先准备好一个文件夹, 这个文件夹是专门来写 sass 文件的         
      => 代开命令行, 切换到这个文件夹的目录        
      => 输入指令            
       -> sass --watch 要编译的文件夹:生成的文件夹          
      => 实时编译的时候黑窗口要一致开着
   4. 生成的 map 文件的作用        
       映射生成代码的位置到源文件代码位置          
       => 我在写代码的时候, 调试出现问题了         
       => 我要修改 sass 文件的代码, 让他重新编译出 css 文件来          
       => 再浏览器控制台的时候, 直接把样式后面的信息给你映射到 sass 文件的指定行

sass 的变量

/* 在 sass 里面定义一个变量 ，一次定义多次使用  
     => 语法: $名字: 值;  
 注意:你的变量名是 $名字   ,值不需要引号  
 使用: 直接使用变量名就可以了 
 只要变量的值修改了,那么所有使用这个变量的位置就都修改了*/

$color: green;// 定义了一个叫做 $color 的变量, 值是 green
$fs: 30px;
$border: 10px solid #333;
p {background-color: $color;font-size: $fs;border: $border;}//使用变量
a {color: $color;font-size: $fs;}

sass 的注释

//     1. 单行注释, 再编译的时候不进行编译
/**/   2. 多行注释    
          => 再编译的时候会保留   
          => 再使用 gulp 打包的时候不会保留
/*! */ 3. 强力注释    
          => 再编译的时候会保留    
          => 再使用 gulp 打包的时候也会保留

sass 的条件分支语句

依赖于变量使用    
=> if 语句      
 -> 语法: @if 变量 == 值 { 样式 }    
=> if else 语句      
 -> 语法: @if 变量 == 值 { 样式 } @else { 样式 }    
=> if else if 语句      
 -> 语法: @if 变量 == 值 { 样式 } @else if 变量 == 值 { 样式 }
 
 $type: c;// 准备一个变量
 h1 {  
     width: 100px;  height: 100px;
     @if $type == a {    
         color: red;  
     } @else if $type == b {    
         color: green; 
     }
  }

sass 的循环语句

  for 循环   
   => 依赖变量使用    
   => 语法: 有两种     
    1. @for 变量 from 数字 to 数字 { 代码 }        
      -> 包含开始数字, 不包含结束数字        
      -> 在循环里面使用变量          
        => 再选择器中使用 #{变量}          
        => 再样式里面使用 变量      
    2. @for 变量 from 数字 through 数字 { 代码 }        
      -> 包含结束数字        
      -> 在循环里面使用变量         
        => 再选择器中使用 #{变量}          
        => 再样式里面使用 变量
  each 循环    
  => 依赖一个 sass 数组使用    
  => 写一个 sass 数组      
    -> 语法: 变量: (), (), (), (), ...    
  => each 的使用      
    -> 语法: @each 变量1, 变量2, ... in 数组
    
/* for 循环 */
//这个循环的数字变化是 1 2, 不包含 3
@for $i from 1 to 3 {  li:nth-child(#{$i}) {   
     width: 10px*$i;  }}
     
$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);//定义一个数组
//each循环
@each $index, $color in $colorArr {  
   li:nth-child(#{$index}) {   
      background-color: $color;  
   }
}

sass 的选择器嵌套

/*  和 html 一样让选择器也有一个上下级的关系    
1. 后代选择器嵌套      
  => 语法: 父级 { 子级 {} }    
2. 子代选择器嵌套       
  => 语法: 父级 { > 子级 {} }    
3. 连字符选择器嵌套     
  => 伪类选择器和伪元素选择器嵌套      
  => 当你需要的伪类和伪元素和选择器连接再一起的时候           
  => 使用 & 连接符操作     
  => 语法: 选择器 { &:hover {} }    
4. 群组选择器的嵌套(使用太少)        
  => 语法: 群组选择器 { 子级 {} }      
  => 语法: 选择器 { 群组选择器 {} }     
  => 语法: 群组选择器 { 群组选择器 {} }*/

sass 属性的嵌套

属性嵌套   
 + 前提: 可以嵌套的属性才能使用     
 +  => 就是属性中带有中划线的属性
 +  => 如 border-left  ，margin-left
p {  border: 10px solid #333{    
       left: 10px dashed pink;  
     };
 }

## sass 的混入(混合器/函数) mixin

/*  混合器, 就是类似于 js 里面的函数   
 + js 的函数 function 函数名(形参) {}    
 + + sass 的混合器     
 +   => 语法: @mixin 混合器名称 {}      
 +   => 语法: @mixin 混合器名称(形参) {}     
 +   => 语法: @mixin 混合器名称(形参默认值) {}    
 + + sass 的混合器的使用      
 +   => 语法: @include 混合器名称;      
 +   => 语法: @include 混合器名称(实参);*/

//   再定义混合器的时候可以传递一个参数默认值
//   你如果传递了实参, 就用你传递的
//   如果你没有传递实参, 那么就是用默认值
@mixin transition($t: 1s, $p: all, $d: 0s, $tf: linear) {  
  -webkit-transition: $p $t $d $tf;  
  -moz-transition: $p $t $d $tf;  
  -ms-transition: $p $t $d $tf;  
  -o-transition: $p $t $d $tf;  
  transition: $p $t $d $tf;}
  //将参数去掉就是不传参，也可以将参数默认值去掉，此函数不使用的时候是不会被编译的
h1 {  width: 100px;height: 100px;// 使用这个带有参数默认值的混合器  
       @include   transition(3s, height);// 传递两个参数, 剩余的使用默认值}
  }

sass的继承

sass里面的继承语法：@extend 另一个选择器；

div {width: 100px;height: 100px;padding: 10px;margin: 20px；}
p {  @extend div; // 继承了 div 里面的所有样式  
    padding: 20px; border: 10px solid #333;//p自己的样式
}