SCSS

SCSS

基本使用：

 变量的使用这里使用$号开头
(这一块和LESS区别不大，所以做个简单的实验)
  <div id="main">
    </div>

main.scss---注意后缀名

    $color:red;  
    div{
     background-color: $color;
     height: 200px;
    width: 200px;
    }  

支持@import导入   
在css中
1，@import url（wode.css）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。   
2，@import 是css2里面的，所以古老的ie5不支持。   
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。  
@import先加载HTML加载CSS
link先加载CSS加载HTML  
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.  
##@extend
一个非常厉害的更能：继承  
很多编程语言中都有继承这个概念(非常酷的概念可以大大节约代码量)

@extend
/*div标准配置---也可以称之为父类*/

     #div{
     width: 200px;
     height: 200px;
     }

     #main{

     @extend #div;
    background-color: red;
    }
     #message{
    @extend #div;
    background-color: gray;
    }

编译之后：

    @charset "GBK";
     /*div标准配置---也可以称之为父类*/
     #div, #main, #message {
    width: 200px;
    height: 200px; }

     #main {
      background-color: red; }

     #message {
      background-color: gray; }  
 

@mixin混入

之前less学过了不过有一定的区别

  @mixin  div{——注意这里声明的部位和之前有点区别
    width: 200px;
    height: 200px;
    }

     #main{
      @include div;——引用也有区别，这样用关键字是比less麻烦了还是更清晰呢
      }
     #message{
     @include div;
    }

嵌套——这一块和less没什么区别

    <div id="main">
        <p>文章类容</p>
        <div id="message">hello world</div>
    </div>

    #main{
    width: 200px;
     height: 200px;
     background-color: grey;
     p{color: red;font-size: 14px}
     #message{
    width: 50px;
    height: 50px;
    background-color: blanchedalmond;
    }
    }  

##@function
方法的编写-和js函数一样，选择使用
实验：
页面有三个div被一个大div包含，要求用sass编写

 <div id="main">
       <div class="one"></div>
       <div class="two"></div>
       <div class="three"></div>
    </div>

     @function setSize($size){
    @return $size
    }
    @mixin div-init{
     position: absolute;
    }
       $size:200px;
    #main{
    height: setSize($size)*2;
    width: setSize($size)*2;
    background-color: grey;
    @include div-init;
    .one{
    height: setSize($size);
    width: setSize($size);
    background-color: red;
    @include div-init;
    }
    .two{
    height: setSize($size)-100;
    width: setSize($size)-100;
    background-color: blue;
    @include div-init;
    }
    .two{
    height: setSize($size)/2;
    width: setSize($size)/2;
    background-color: yellow;
    @include div-init;
    }
    }

控制语句：   
编程语言中都有控制程序顺序语句(回顾一下程序中都有几种流程结构)
@if @else @while