CSS框架——SASS

SASS
注意：这不是SARS

简介：
1、SASS是最早的CSS预处理语言，有比LESS更为强大的功能，不过其一开始的缩进式语法并不能为大众接受，不过由于强大的功能，还是有很多开发者选择了SASS
2、SASS是采用了Ruby语言编写的一款CSS预处理语言，(不用担心，我们并不用学习Ruby也可以使用全部功能）诞生于2007年，最初是为了配合HAML(缩进式HTML预编译器)而设计 
3、缩进式风格可以缩减代码量，强制代码风格，但不为大多数程序员接受，而且无法兼容已有的CSS代码，这也是SASS出现早，但是没有LESS普及的原因之一
4、但是SASS三代开始，SASS开始迎合程序员的使用习惯，放弃缩进式，以及完全兼容普通的CSS代码，这一代的SASS也称之为SCSS
想多LESS，SASS功能更加强大
5、sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号

语法区别：

/*文件后缀名为sass的语法*/body  background: #eee font-size:12px p  background: #0982c1/*文件后缀名为scss的语法*/  body {  background: #eee;  font-size:12px;}p{  background: #0982c1;} 

基本使用：   
变量的使用这里使用$号开头

(这一块和LESS区别不大，所以做个简单的实验)

main.scss  //注意后缀名

 <div id="main">    </div>$color:red;  div{  background-color: $color;  height: 200px;  width: 200px;}

执行编译(考拉最新版---查看软件中sass的3.3.7)

计算，和less一样

$number:10px;$heidth:$number+190;$width:$number*20;div{  background-color: red;  height: $heidth;  width: $width;}

也不支持减法

支持@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

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

实验main.css main1.css mian.scss
页面文件

<div id="main">    </div>main.scss@import "main1.css";main1.cssdiv {    background-color: red;    height: 200px;    width: 200px;

}

@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