这几天白老师叫我们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;
}
等等...
实在是太强,学习中,还不能体会其中的精妙之处...好了;
