写在前面乱七八糟的前言:emmm,最后还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?
目录
5、Sass
6、Less
7、Sass与Less的区别
8、Stylus
4、Sass(Syntactically Awesome Style Sheets)
4.1
4.2安装:
4.2.1安装ruby环境
安装过程中请注意勾选Add Ruby executables to your PATH
添加到系统环境变量
在命令行输入gem install sass
4.2.2使用sass
在屏幕上直接转化:sass test.scss
转化成文件:sass test.scss test.css
4.2.3监听
//watch a file
sass --watch test.scss:test.css
//watch a directory
sass --watch ./sass:./css
4.2Sass使用:
4.2.1变量:声明:$变量名:变量值;调用:$变量名
ps:若变量名需在字符串内嵌套,则需使用#[ ]包裹;
$side:left;
.test{
border-#{$side}-radius:5px;
}
4.2.2运算
单位会进行运算,需注意最终单位
4.2.3嵌套:
4.2.3.1选择器嵌套
ul{
li{ }
}
4.2.3.2属性嵌套
border:{
color:red;
width:10px;
}
4.2.3.3伪类嵌套
ul{
li{
&:hover{ }
}
}
4.2.4混合
声明:@mixin name($param:value){ };调用:@include name(value)
ps:声明时可带参可不带,可带默认值,但调用需符合命名规范
优点:可传参,不会生成同名class
缺点:将混合代码copy到对应的选择器中
4.2.5继承(Inheritance)
声明:.class{ }调用:@extend .class
优点:继承相同代码并提取到并集选择器中
缺点:不可传参,在CSS中生成一个同名class
通常都是p,ul{ common style},往往我们需要给单独元素添加另外的样式,这个时候我们就需要把其中选择器单独出来写样式,如此一来我们维护样式就相当的麻烦
4.2.6占位符
声明:%class{ }调用:@extand %class
优点:继承相同代码并提取到并集选择器,不会生成同名的class选择器
缺点:无法传参
ps:传参用混合,先有class用继承,无须参数无须class用占位符
4.2.7if条件
@if{ }
@else{ }
4.2.8for循环
@for $i from 1 to 10{ }不含十;
@for $i from 1 through 10{ }含十;
4.2.9while循环
$j:1;
@while $j<10{
.while#{$j}{
border:#{$j}px solid red;
}
$j:$j+1;
}
4.2.0each循环遍历
@each item in a,b,c,d{
//item 表示每一项
}
4.2.11函数
@function func($length){
$length:$length*5;
@return $length;
}
调用:func(10px);
5、Less
5.1Less产生:
5.2Less优势:
让开发者平滑地从现存CSS文件过渡到LESS,而无需像Sass一样将CSS文件转换成Sass
5.3Less使用:
5.3.1变量:声明变量:@变量名:变量值;
5.3.2混合(MiXins):
将部分样式抽出,作为单独定义的模板,被多选择器调用,如某段样式经常用到多个元素时,需重复写多次,则可使用
Sass:
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { @include error();/*直接调用error mixins*/ } .login-error { @include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/ }
Less:
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { .error();/*直接调用error mixins*/ } .login-error { .error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/ }
5.3.2.1无参混合:声明:.name{ };调用:调用选择器
5.3.2.2带参混合:
5.3.2.2.1无默认值声明:.name(@param){ } 调用:name(parValue); parValue不可省
5.3.2.2.2有默认值声明:.name(param:value( )){ } 调用:name(parValue); parValue可省
ps:无参混合会在CSS中编译同名的class选择器,带参的不会。
5.3.3嵌套(Nesting):
保留Html中的代码结构,默认后代选择器
需子代选择器,则在子代前加>
&表示上一层
5.3.4运算(Operations)
+-×÷,可带单位可不带
颜色运算时,红绿蓝分三组计算,组内可进位,组间互不干涉。
函数
颜色函数
导入
在CSS中,并不喜欢用@import来导入样式,因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同,它只是在语义上导入不同的文件,但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件,那效果跟普通CSS导入样式文件一样。注意:导入文件中定义了变量、混合等信息也将会被引入到主样式文件中,因此需要避免他们的相互冲突
注释(Comment)
CSS预处理器语言中的注释是比较基础的一部分,这三款预处理器语言除了具有标准的CSS注释之外,还具有单行注释,只不过单行注释不会被转译出来。
a)Sass、LESS和Stylus的多行注释
多行注释和CSS的标准注释,他们可以输出到CSS样式中,但在Stylus转译时,只有在“compress”选项未启用的时候才会被输出来。
/*
*我是注释
*/
body
padding 5px
b)Sass、LESS和Stylus的单行注释
单行注释跟JavaScript语言中的注释一样,使用双斜杠(//),但单行注释不会输出到CSS中。
-
//我是注释
-
-
在Stylus中除了以上两种注释之外,他还有一种注释,叫作多行缓冲注释。这种注释跟多行注释类似,不同之处在于始的时候,这里是”/*!”。这个相当于告诉Stylus压缩的时候这段无视直接输出。
/*!
*给定数值合体
*/
add(a, b)
a + b
6、Sass与Less
6.1编译环境:
Sass需要安装ruby环境,是服务端处理的
Less需node js环境,引入less.js,是客户端处理的
6.2变量符
Sass用$
Less用@
6.3输出设置
Sass:四种输出风格,默认nested
nested:嵌套缩进
expanded:展开多行
compact:简洁格式
compressed:压缩
Less:无
6.4条件语句
Sass:if、else、for
Less:无
6.5工具库
Sass:Compass,基于Sass的封装
Less:UI组件库Bootstrap
6.6文件转译
Sass:源文件不能给浏览器直接识别,需转译为css
Less:源文件无需转译为css
6.7作用域
Sass:无全局作用域,定义相同变量名时,在调用要注意
Less:首先定义局部定义的变量,若无,像冒泡一样一级级往下查找,直到根为止