sass语法（考拉）

一、sass语法              

sass功能 ：

它使用自己的语法并编译为可读的CSS

可以在更少的时间内轻松地编写CSS代码  

是一个开源的预处理器，被解释为CSS

可以兼容所有的CSS版本

 

sass是动态的css

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

         

 

考拉使用 ： 

    拖拽css目录

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

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

 

sass语法

1、注释 ：  // 不能被css识别      /**/ 可以被css识别

sass中有哪些注释类型 ： //注释     /*注释*/

 

2、变量定义  ：   $变量   

3、嵌套 ： 

传统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的嵌套的过程中，如果需要用到父元素，在 SASS 中通过（& ）符号引用父属性

 

4、代码重用、混合(函数)：   sass如何实现代码重用 ，有几种方式  ~~~

width:960px;

margin:0 auto;

第一种方案 ： 类的继承  使用.定义一个类  然后通过 @extend 调用这个类（缺点：不能定义参数）

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

     width:960px;

}

总结：sass中定义一个类，要继承这个类，需要使用的关键字是 （@extend）

第二种方案 ：  使用 @mixin 定义一个代码块   使用 @include 调用这个代码块 （先定义 后调用）  该方式可以定义参数 

该方式用于定义可重复使用的样式，避免了使用无语意的class

如果参数有默认值  该参数放到后面

 

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

     ....

}

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

    width: 960px;

    height: $height;

    margin: 0 auto;

}

#header{

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

}

总结：sass中使用@mixin定义了一段代码块，需要使用的关键字是 ： （ @include）

 

sass中混合和函数的不同点：

函数有返回值   sass混合没有

混合的结果是一段代码

 

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

sass中用于导入一个新文件的关键字是 ：@import

 

6、if语句 :

$type : monster;

$flag : false;    

   

     @if $type==monster {

        display :inline ;

    }

 

    @if $flag {

        p {color :red; }

    } @else{

         p {color :blue; }

     }

例如 ： 

这个代码正确输出是

p {  

    @if 1 + 1 == 2 { border: 1px solid; }  

    @if 5 < 3 { border: 2px dotted; } 

    @if 5 >6 { border: 4px dotted; }  

    @if null  { border: 3px double; } 

}

 

 

7、for 语句：

@for $i from 1 through 3 {

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

}

 

循环语句两种写法：

@for $i from 1 to 4 { 语句;}

@for $i from 1 through 4{ 语句;}