用LESS、SASS语言编写CSS

最近花时间研究了下LESS与SASS。这两种语言主要是为了简化CSS的编写,引入了变量,运算,函数等。SASS比LESS强大一些,支持if、else等。两种语言基本写法还是与CSS类似,简单也很好理解。Bootstrap框架的css文件就是用LESS来编写的(不过Bootstrap4.0改为SASS编写了)。


LESS

less官网
http://lesscss.cn/
http://www.1024i.com/demo/less/

一些LESS/SASS相关工具

要编译less需要lessc工具。在sublime编辑器上可以下载less、lessc插件,保存的时候自动编译css文件。(推荐只下语法高亮即可, 用以下工具进行编译)

windows上用koala编译即可(国人开发)。
mac上也可以用koala,还可以用Codekit。
使用方式都是拖动包含less/sass/scss文件即可。设置为自动编译后,保存时即可自动编译出css文件。

LESS的基本语法

引入其他less文件用法:

@import “common.less”; //导入其他less文件, 可以省略.less

变量

1
2
3
4
5
6
7
//声明变量
@test_width:300px;
.box{
width: @test_width;
height: @test_width;
}

混合

就是声明一段代码后其他地方可以直接引用

1
2
3
4
5
6
7
8
9
10
11
12
13
.border{
border: solid 5px palevioletred;
}
//混合, 可带参数(带默认参数)
.border_02(@param1:2px){
border: solid @param1 yellow;
}
.box{
.border; //混合. 直接将border插入到这里
.border_02(10px + 10); //能运算
}

匹配模式

根据传入的参数自动匹配。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//匹配模式========================================
.box{
.triangle(top,100px);
//.triangle(bottom,100px);
}
//这个都会加载
.triangle(@_,@width:5px,@color:#ccc){
width: 0;
height: 0;
overflow: hidden;
}
.triangle(top,@width:5px,@color:#ccc){
border-width: @width;
border-color: transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@width:5px,@color:#ccc){
border-width: @width;
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}

嵌套

这个应该是看起来最直观,最好用的了。就是直接根据包含关系写css。不用再一层层选择。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//嵌套(简化css中的嵌套)===============================
//.list li{}
//.list a{}
.list{
width: 600px;
height: 200px;
padding: 0px;
margin: 0px auto;
list-style: none;
li{
height: 30px;
line-height: 30px;
background: yellow;
}
a{
float: left;
//hover属性
&:hover{
color: red;
}
}
}

以上几个都是最常用也是最好用的功能,更多的语法可以参见官网。


SASS

sass官网
http://www.w3cplus.com/sassguide/
http://sass.bootcss.com/

编译sass的工具推荐还是Koala与Codekit,里面都有集成。

sass与scss文件的最大差别

sass不带花括号{} 与分号;
scss带花括号{} 与分号等;

两者都是sass语言,只是scss为新语法,且更加常规易懂。所以推荐使用scss文件进行编写,以下都是用scss的格式进行编写的。

SASS的基本语法

引入其他文件用法:

@import “a.css”;

变量与默认值

变量还有多值变量list,map等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$blue:#aaa;
//list类型。可用nth($var,$index)取值。
$mylist: 6px 10px 100px;
//map类型。可通过map-get($map,$key)取值。
$mymap: (h1: 2em, h2: 1.5em, h3: 1.2em);
body{
color: $blue;
width: nth($mylist,1); //第一个开始
height: map-get($mymap,h1);
}
//>默认值. 后面加上!default即可
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}

继承

1
2
3
4
5
6
7
8
9
.class1{
border: 1px solid #FF3366;
}
//class2继承class1
.class2{
@extend .class1;
font: arial;
}

Mixin

类似于C语言中的宏定义, 可重用的代码块.

1
2
3
4
5
6
7
8
@mixin myleft($value){
float: left;
height: $value;
}
div{
@include myleft(100px);
}

条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//8.条件语句
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
@if 1>2 {
} @else if 1 == 1 {
} @else {
}
}

循环for / while / each

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@for $i from 1 to 10 {
p{
border: 10px+$i solid #FF0000;
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

字符串 / 占位符

1
2
3
4
//字符串. +号连接. 颜色也可以相加相乘.
p:before {
font-family: sans- + "serif"; //最后输出sans-serif
}
1
2
3
4
5
6
7
8
9
//占位符%
//abc只是占着地方预留. 只有当使用extend后才调用
%abc {
margin-top: 5px;
}
div{
@extend %abc;
}

嵌套

与less中的一样

1
2
3
4
5
div{
ul{
color: red;
}
}

总结

LESS 与 SASS的语法相差不大,其实LESS基本够用,但SASS中有多种类型的变量,循环,条件语句等,相比更加强大。

转载请注明出处,有疑问欢迎留言!