学习SASS

　　这几天白老师叫我们css的扩展技术,有什么LESS,还有SASS(我还以为是SAS...QAQ),LESS由于功能比较简单,用的也比较少所以我们重点学习了SASS.简单地说SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。SASS扩展了CSS3，增加了规则、变量、混入、选择器、继承等等特性。SASS 生成良好格式化的 CSS 代码，易于组织和维护。

　  SASS让我们能够像JS一样来编写CSS,说起来也是方便我们的代码书写,然而我并没有感觉到方便啊!可能是还没习惯吧...既然说到了SASS,就不能不提一下koala工具,安装方法就是下一步,下一步...安装完成之后,把你css所在的文件夹拖入koala即可(注意是文件夹),刷新一下,然后再文件夹内新建后缀名为.scss的文件(为什么不是.sass呢?因为scss文件更符合我们日常的书写习惯,有助于上手.而sass文件在书写时,少了冒号和花括号,总觉得少了什么,当然不排除什么大神喜欢这么干!),新建完成后,就可以写代码了,写完了编译一下会生成.css文件和.map文件,至于.map文件不用管了,反正浏览器只认识.css文件.

　　1.引入文件:@import;

　　例如:@import "b";注意这里的b文件指的是.sass文件或是scss文件,不用写后缀;而如果是css文件的话,就要写后缀名了;

　　2.定义变量:$;

　　例如$color:red !default;    (这里的default是指默认值);

　　　　$direct:top;

　　好了我们就可以开始使用了:

　　p{

　　　　color: $color;//red;

　　　　.border-top: 1px solid red; //我们可以写成.border-#{$direct}: 1px solid red;

　　}

　　是不是很方便,可能现在看起来很繁琐,但是代码多起来的时候,我们会遇到很多重复的代码,我们就可以用变量来替换.当我们需要修改的时候,就不用一一去找对应的选择器再去修改其中对应的数值了;

　　3.我们还可以用到函数.比如:

　　//数组

　　$num:1px 2px 3px 4px;

　　margin:nth($num,1);//即表示margin:1px;

　　//键值对

　　$map:(a1:1em,a2:23em,a3:20em);

　　width:map-get($map,a1);//即是取得a1键的值;

　　4.嵌套

　　嵌套我们平时其实就在使用;比如div下边的所有p元素,我们可以写作:div p{}

　　div{

　　　　width:100px;

　　　　height:100px;　　

　　　　p{

　　　　　　font-size:100px;

　　　　}

　　}//当然还有属性的嵌套由于使用较少,没栗子;

　　5.混合封装

　　@mixin wh{
　　　　　width:100px;　　

　　　　　height:10px;

　　}

　　//可以传入参数

　　@mixin whb($w,$h){

　　　　width:$w;

　　　　height:$h;

　　}

　　在引入时只需要写:@include wh(100px,200px);即可;

　　6.继承.如果我们使用的重复的内容有参数我们就用混合,没有就用继承

　　h1{

　　　　font-size:20px;

　　　　font-weight:bold;

　　}

　　.my{

　　　　@extend h1;　　//即表示继承h1的属性;

　　7.判断(很强大吧)

　　$it7:false;

　　p{

　　　　@if($it7){

　　　　　　zoom:1;

　　　　}

　　　　@else{

　　　　　　overflow:hidden;

　　　　}

　　等等...

　　实在是太强,学习中,还不能体会其中的精妙之处...好了;