sass的学习

一、sass是什么东西？

Sass并不是其他的什么，而是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。
果然，概念就不是给人看的。用CSS预处理器可以让你的编码效率提高十倍。就是这样…
还有很多其他的CSS预处理器，比如：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS
  其中最优秀的技师Sass、LESS和Stylus，在这里，我们聊一下Sass

二、sass 和scss的区别？

其实这两货说的是一个东东，由于一开始Sass规定的语法格式是严格的缩进式语法，不带大括号和分号，所以造成程序员在写sass的时候有非常大的不习惯，虽然它是最早的预处理器，却没有人家LESS用的人多，所以又支持了使用大括号和分号，这就是SCSS.
· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

三、基础用法学习

• 注释
  注释分为三种：/* */css中显示，//css中不显示，/重要注释!/压缩不会被删掉

• ·@import 命令导入外部sass、scss、css文件

• 变量：
  声明变量的语法是：$+变量名+：+变量值；如下：

   $color:red; //声明变量 $color
  

• 区分默认变量：
  默认变量只需要在变量值后加上 !default , 用来设置默认值 ，对默认变量进行重新声明可以实现覆盖默认值；

   	$color:red !default; //声明默认变量 $color
   	$color:purple; //根据需求覆盖默认变量
   	.father01 {
   	color:$color;
   	}
  

• 区分全局变量和局部变量：
  全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；

   $height:200px; //全局变量声明不在大花括号内
   $bgcolor:blue;
   body {
      .father01 {  //嵌套
         width:$width;
         height:$height;
         $border:1px solid red; //局部变量是声明在元素内的
         border: $border;
         $bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖
         background-color: $bgcolor;
      }
   }
  

• 局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

   body {
      .father01 {
         width:200px;
         height:200px;
         $border:1px solid red !global; //使用global关键词将$border变为了全局变量
         border:$border;
      }
      .father02 {
         width: 300px;
         height:300px;
         border:$border; //使用全局变量
      }
   }
  

• 变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹

   $left:left;
   .father02 {
      width: 300px;
      height:300px;
      border:$border; //使用全局变量
   border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
   }
  

• 变量计算：

   $left:left;
   .father02 {
      width: 300px;
      height:300px;
      border:$border; //使用全局变量
   border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
   }
  

• 嵌套：
  属性嵌套（有相同属性前缀）如下：

   border:{
      color:red;
      width:5px;
      style:solid;
   }
   在嵌套时候可以使用 & 来引用父元素：
   .container {
      &>p {   //可以编译成CSS的 .container>p {} 效果
         color:purple;
      }
   }
  

• 继承：
  继承 .class 使用 @extend

   .container {
      color:purple;
      border:2px dashed purple;
   }
   .myText {
      @extend .container; //这里将继承.container类的所有样式
      font-size: 22px;
   }
  

• SCSS占位符 %：
  使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁：

   %m5 { background-color: lightblue;}
   .P1 { @extend %m5; }
   ·重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin
   @mixin normalStyle {
      //使用@mixin命令定义可重复使用的代码块
      width:300px;
      height:100px;
      color:black;
      background-color:lightblue;
   }
   .container {
      @include normalStyle;
      //使用@include 命令引用@mixin定义的代码块
   }
   在使用@mixin和@include时，传入参数和默认值
   @mixin normalStyle($width,$height,$color,$defaultValue:orange) {
      width:$width;
      height:$height;
      color:$color;
      background-color:$defaultValue;
   }
   .container {
      @include normalStyle(300px,100px,green,lightgray);
   }
  

• SCSS使用编程式方法

   ·条件语句 
   .container {
      p {
         @if 1+1<3 {
            border:1px solid blue;
         } @else {
            border:1ps dashed palevioletred;
         }
      }
   }
  

• SCSS中的三种循环

   for循环：
   在sass中的@for循环有两种方式：
   ①@for $i from <start> through <end>
   ②@for $i from <start> to <end>
  

注：其中$i表示变量，start表示开始值，end表示结束值；
through表示包括end这个数值；to表示不包括end这个数值；

while 循环：

	只要@while后面的条件为true就会执行，直到表达式值为false时停止循环；

each in循环：

	就是去遍历一个列表，然后从列表中取出对用值；他的指令形式为：
	@each $var in <list>($var为变量值，list为sassscript表达式）

//for 循环
@for $i from 1 to 5 {
   .item-#{$i} {
      border:#{$i}px solid;
   }
}

//while 循环
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2

//each 语法
@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
   .#{$item} {
      background-color:purple;
   }
}
//会编译成 .class01 , .class02 {background-color:purple;}

• 使用@function 自定义函数及使用

   @function double($sn){ //SCSS允许自定义函数
      @return $sn*2;
   }
   .myText {
      border:1px solid red;
      width:double(200px); //使用在SCSS中自定义的函数
   }
  

• 可以直接使用SCSS内置的颜色函数，

   .myText {
      color:black;
      &:hover{
         //以下的lighten()、darken()等是SCSS内置的颜色函数
         color:lighten(#cc3, 10%); // #d6d65c颜色变浅
         color:darken(#cc3, 10%); // #a3a329颜色加深
         color:grayscale(#cc3); // #d6d65c
         color:complement(#cc3); // #a3a329
      }
   }