sass

css预处理语言

写sass然后使用工具将其编译成css

sass比css多了很多功能，比如定义变量/循环/嵌套等

 

sass的语言版本有两种，老版本的后缀名是.sass，新版本的后缀名是.scss

 

在项目中准备使用sass代替css，所以需使用gulp-sass来对sass进行编译需下载（node-sass    gulp-sass）

 

 

 

 

动态的css            

sass  动态的css

  写一些语法规范    变量   嵌套   类的重用....

 

sass

body

    background:red;

    font-size:12px;

 

scss

   body{

        ...

    }

 

考拉使用 ：

拖拽css目录

设置输出路径  scss文件要输出的css文件

识别中文 ： @charset "utf-8";

 

sass语法：

注释 

    // 不能被css识别      

    /**/ 可以被css识别

 

变量定义

    $变量   

 

 

传统css嵌套

   .nav {

     ...

     }

   .nav  ul{

          ...

     }

   .nav ul li{

    ...

     }

 

嵌套方式

     .nav{

          width:960px;

          height : 40px;

          ul{

               margin-left : 20px;

               li{

                    float: left;

               }

          }

     }

 

符合属性嵌套

border:{

     color: red;

     style:solid;

     width:1px;

}

 

&表示继承父级标签

    a{

      &:hover{ color:red }

    }

 

代码重用(函数)   

sass如何实现代码重用 ，有几种方式  ~~~

width:960px;

margin:0 auto;

.public{  //无参数   使用 @extend  .public;

     width:960px;

}

@mixin  public{  //可以定义参数   使用 :  @include 导入    先定义 后调用  （混合定义）

     ....

}

@mixin public($height:200px){//定义一个默认值

    width: 960px;

    height: $height;

    margin: 0 auto;

}

#header{

    @include public(400px);给具体的参数值 默认值无效，如果不传递参数 就按照默认值执行

}

导入：  @import "xxx.scss"   将多个scss文件合并成一个css文件

 

if语句

$type : monster;

$flag : false;    

   

     @if $type==monster {

        display :inline ;

    }

    @if $flag {

        p {color :red; }

    } @else{

         p {color :blue; }

     }

 

for语句

@for $i from 1 through 3 {

  .item-#{$i } { width: 2em * $i ; }    //   .item1   .item2  .item3

}