参考文档
对比
- SASS: Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。from 2007
- SCSS: Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
- LESS: Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。 from 2009
使用Less
页面引入
1
2
| <link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>
|
使用npm安装
1
2
| npm install -g less
lessc styles.less > styles.css
|
导入（Importing）
1
2
| @import "library"; // library.less
@import "typo.css";
|
嵌套（Nesting）
1
2
3
4
5
6
7
8
9
| #header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
|
变量（Variables）
值变量
1
2
3
4
5
6
7
| @width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
|
选择器变量
1
2
3
4
5
6
7
8
9
10
11
12
| @mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
|
属性变量
1
2
3
4
5
| @borderStyle: border-style;
@Soild:solid;
#wrap {
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
|
url变量
1
2
3
4
| @images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
|
声明变量
1
2
3
4
5
6
7
8
9
10
11
12
| @background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
|
变量运算
1
2
3
4
5
6
7
8
9
| @width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
|
变量作用域（Scope）
1
2
3
4
5
6
7
8
| var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
|
媒体查询
1
2
3
4
5
6
7
8
9
10
11
12
| .component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
|
混合（Mixins）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
|
运算（Operations）
1
2
3
4
5
6
7
8
9
10
11
| // 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
|
为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
1
2
| @var: 50vh/2;
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
|
转义（Escaping）
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~”anything” 或 ~’anything’ 形式的内容都将按原样输出
1
2
3
4
5
6
| @min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
|
函数（Functions）
1
2
3
4
5
6
7
8
| @base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
|
命名空间和访问符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
|
映射（Maps）
1
2
3
4
5
6
7
8
9
| #colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
|
1
2
3
4
5
6
|
@var: red;
// 这一行被注释掉了！
@var: white;
|