CSS预处理--Less语法整理

这是本人整理的Less语法,基本上全了,至于进阶就是看你怎么组合怎么使用了。本文整理的内容都亲测有效!

一,变量

基本使用

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");

&:after {
display: block;
content: @@var;
}
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "你好啊";
@var: "name";

生成CSS:

1
2
3
4
5
6
7
8
9
10
11
.box {
width: 100px;
height: 100px;
color: #000;
background: url("../img/test.png");
}

.box:after {
display: block;
content: "你好啊";
}

字符串插值

1
2
@base-url: "http://abc.com";
background-image: url("@{base-url}/images/bg.png");

选择器插值

1
2
3
4
5
6
7
8
9
10
//Less
@name: blocked;
.@{name} {
color: black;
}

//输出css
.blocked {
color: black;
}

二,运算

任何数字、颜色或者变量都可以参与运算

1
2
3
4
5
6
7
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位,括号也同样允许使用,并且可以在复合属性中进行运算:

1
2
3
@var: 1px + 5;
width: (@var + 5) * 2;
border: (@width * 2) solid black;

三,Mixin混合

基本使用和extend

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*不加括号显示样式,生成并集选择器组合*/
.public {
width: 100px;
height: 100px;
}
.public() {
/*加括号隐藏样式,生成在调用者里,代码重复*/
width: 100px;
height: 100px;
}
nav:extend(.public) {
background-color: #f00;
}
div {
&:extend(.public);
background-color: #00f;
}
footer {
.public;
background-color: #cccccc;
}

生成CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*不加括号显示样式,生成并集选择器组合*/
.public,
nav,
div {
width: 100px;
height: 100px;
}
nav {
background-color: #f00;
}
div {
background-color: #00f;
}
footer {
/*隐藏样式,生成在调用者里,代码重复*/
width: 100px;
height: 100px;
background-color: #cccccc;
}

模式匹配

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.mixin (dark, @color) {
background-color: darken(@color, 10%);
}
.mixin (light, @color) {
background-color: lighten(@color, 10%);
}
.mixin (show) {
display: block;
}
.mixin (hide) {
display: none;
}

div {
width: 100px;
height: 100px;
.mixin(show);
//.mixin(hide);
.mixin(dark,red)
}

生成CSS:

1
2
3
4
5
6
div {
width: 100px;
height: 100px;
display: block;
background-color: #cc0000;
}

命名空间

Less:

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
/*加括号隐藏了样式 .div命名空间*/
.div() {
width: 200px;
height: 200px;
background-color: #000;

div {
width: 50px;
height: 50px;
background-color: #f00;
}
.color {
color: skyblue;
}
&:hover{
background-color: lighten(rgb(0, 0, 0), 20%);
}
}
/*这样使用*/
nav {
.div;
}
nav p {
.div > .color;
}

生成CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
nav {
width: 200px;
height: 200px;
background-color: #000;
}
nav div {
width: 50px;
height: 50px;
background-color: #f00;
}
nav .color {
color: skyblue;
}
nav:hover {
background-color: #333333;
}
nav p {
color: skyblue;
}

作用域

(类似于JS作用域链,一层一层网上找,找到为止)
Less:

1
2
3
4
5
6
7
8
9
10
11
12
@color: #ccc;
.box {
@color: #eee;
.gray {
color: @color;
}
}
.box2 {
.gray {
color: @color;
}
}

生成CSS:

1
2
3
4
5
6
.box .gray {
color: #eeeeee;
}
.box2 .gray {
color: #cccccc;
}

!important

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box() {
@color: #eee;
background-color: #f00;
width: 100px;
height: 200px;
.gray() {
color: @color;
}
}
nav {
/*可以使继承到的混合集所有属性都添加!important*/
.box !important;
.box > .gray;
}

生成CSS:

1
2
3
4
5
6
7
nav {
/*可以使继承到的混合集所有属性都添加!important*/
background-color: #f00 !important;
width: 100px !important;
height: 200px !important;
color: #eeeeee;
}

Parametric Mixins(参数混合)

Less:

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
/*可以设定参数,也可以同时设置默认值*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
-webkit-transition: @property @duration @function @delay;
-moz-transition: @property @duration @function @delay;
-ms-transition: @property @duration @function @delay;
-o-transition: @property @duration @function @delay;
transition: @property @duration @function @delay;
}
/*等同于上式,Less中也有arguments*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-ms-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
div1 {
.transition;
}
div2 {
.transition(@duration: 2s);
}
div3 {
.transition(@duration: 3s;@property: width;)
}

生成CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div1 {
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
}
div2 {
-webkit-transition: all 2s linear 0s;
-moz-transition: all 2s linear 0s;
-ms-transition: all 2s linear 0s;
-o-transition: all 2s linear 0s;
transition: all 2s linear 0s;
}
div3 {
-webkit-transition: width 3s linear 0s;
-moz-transition: width 3s linear 0s;
-ms-transition: width 3s linear 0s;
-o-transition: width 3s linear 0s;
transition: width 3s linear 0s;
}

Less:

1
2
3
4
5
6
7
8
9
.test(@width:100px;@height:100px;) {
width: @width; //可以不需要执行体,只为了获得返回值
@result: (@width + @height) / 2;
}

div {
.test; //call the mixin
padding: @result; //use the return value
}

生成CSS:

1
2
3
4
div {
width: 100px;
padding: 100px;
}

高级参数用法与 @rest 变量

1
2
3
4
5
6
7
8
9
10
11
.mixin (...) {        // 接受 0-N 个参数
.mixin () { // 不接受任何参数
.mixin (@a: 1) { // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) { // 接受 1-N 个参数

//此外
.mixin (@a, @rest...) {
// @rest 表示 @a 之后的参数
// @arguments 表示所有参数
}

Mixin Guards(导引表达式/混合保护)

我们可以在mixin中设置条件;常用的条件运算符:>、>=、<、<=、=;我们设定的条件还可以使用IS函数:iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

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

//->LESS代码
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}

.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}

.box1{
.mixin(#ddd);
}

.box2{
.mixin(#555);
}

//->编译为CSS的结果
.box1 {
background-color: black;
}

.box2 {
background-color: white;
}

when是在设置条件,除了像上面的写法外,我们还可以通过when设置多个条件,而且条件中可以使用is函数

1
2
3
4
5
6
7
8
9
10
11
12

//->LESS代码:使用IS函数
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

//->LESS代码:多条件,可以使用and或者逗号间隔
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ...

//你可以使用关键词 and 在 guard 中加入额外的条件:
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
//或者,使用关键词 not 否定条件:
.mixin (@b) when not (@b > 0) { ... }

我们还可以通过与&特性结合实现'if'类型的语句

1
2
3
4
5
6
7
8

//->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色
@my-option: true;
& when (@my-option = true) {
.box {
color: white;
}
}

四,Loops(递归/循环)

在Less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard条件表达式,就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS
Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*生成栅格系统*/
@media screen and (max-width: 768px){
.generate-columns(12);
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-xs-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i+1));
}
}
@media screen and (min-width: 768px){
.generate-columns(12);
.generate-columns(@n, @i: 1) when (@i <= @n) {
.column-sm-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i+1));
}
}

生成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
27
28
@media screen and (max-width: 768px) {
.column-xs-1 { width: 8.33333333%; }
.column-xs-2 { width: 16.66666667%; }
.column-xs-3 { width: 25%; }
.column-xs-4 { width: 33.33333333%; }
.column-xs-5 { width: 41.66666667%; }
.column-xs-6 { width: 50%; }
.column-xs-7 { width: 58.33333333%; }
.column-xs-8 { width: 66.66666667%; }
.column-xs-9 { width: 75%; }
.column-xs-10 { width: 83.33333333%; }
.column-xs-11 { width: 91.66666667%; }
.column-xs-12 { width: 100%; }
}
@media screen and (min-width: 768px) {
.column-sm-1 { width: 8.33333333%; }
.column-sm-2 { width: 16.66666667%; }
.column-sm-3 { width: 25%; }
.column-sm-4 { width: 33.33333333%; }
.column-sm-5 { width: 41.66666667%; }
.column-sm-6 { width: 50%; }
.column-sm-7 { width: 58.33333333%; }
.column-sm-8 { width: 66.66666667%; }
.column-sm-9 { width: 75%; }
.column-sm-10 { width: 83.33333333%; }
.column-sm-11 { width: 91.66666667%; }
.column-sm-12 { width: 100%; }
}

五,Merge(兼并)

+代表以逗号分隔,+_代表多个之前以空格分隔
Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mixin(){
/*内阴影*/
box-shadow+: inset 0 0 10px #555;
}
.scale(@num){
transform+_: scale(@num);
}
div{
width: 100px;
height: 100px;
background-color: #f00;
margin: 100px auto;
.mixin;
box-shadow+: 0 0 20px black;
transform+_: translateX(100px);
.scale(2);
}

生成CSS:

1
2
3
4
5
6
7
8
9
div {
width: 100px;
height: 100px;
background-color: #f00;
margin: 100px auto;
/*内阴影*/
box-shadow: inset 0 0 10px #555, 0 0 20px black;
transform: translateX(100px) scale(2);
}

六,Parent Selectors

Less:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.box(){
border-color: #f00;

top {
/*名称写死的后代选择*/
width: 10px;
}
&:hover {
background-color: #00f;
}
&.current {
/*选择当前选择器并且class为current*/
color: red;
}
&>top{
/*名称写死的直接后代选择*/
width: 11px;
}
&-top {
/*根据选择器名称变化的直接选中*/
background-color: #fff;
}
& &-top{
/*根据选择器名称变化的后代选择*/
width: 12px;
}
&>&-top{
/*根据选择器名称变化的直接后代选择*/
width: 13px;
}
&,&-top{
/*根据选择器名称变化的并集选择*/
height: 14px;
}
&-top+&-main{
/*根据选择器名称变化的兄弟选择*/
height: 15px;
}
&+&{
/*根据选择器名称变化的兄弟选择*/
height: 16px;
}
}

nav {
.box;
}

生成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
27
28
29
30
31
32
33
34
nav {
border-color: #f00;
}
nav top {
width: 10px;
}
nav:hover {
background-color: #00f;
}
nav.current {
color: red;
}
nav > top {
width: 11px;
}
nav-top {
background-color: #fff;
}
nav nav-top {
width: 12px;
}
nav > nav-top {
width: 13px;
}
nav,
nav-top {
height: 14px;
}
nav-top + nav-main {
height: 15px;
}
nav+nav{
height: 16px;
}

改变选择器顺序,下面的案例中,选择器.no-border-radius &会前置插入它的父选择器.header .menu,最后变成.no-border-radius .header .menu形式输出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//->LESS代码
.header {
.menu {
border-radius: 5px;
.parent & {
/*增加权重?*/
background-color: #f00;
}
}
}

//->输出的CSS
.header .menu {
border-radius: 5px;
}
.parent .header .menu {
/*增加权重?*/
background-color: #f00;
}

七,Import Directives(导入指令)

从其他样式表中导入样式。

1
2
3
4
5
//->LESS代码
@import "public.less"; //默认把指定文件的less也编译
@import "header.less"; //默认把指定文件的less也编译

@import (reference) "public.less"; //设置仅导入指定文件的less但不编译

除了reference以外我们还可以配置一些其他的参数值:
inline:在输出中包含源文件但不加工它
less:将文件作为Less文件对象,无论是什么文件扩展名
css:将文件作为CSS文件对象,无论是什么文件扩展名
once:只包含文件一次(默认行为) multiple:包含文件多次

八,注释

CSS 形式的注释在 LESS 中是依然保留的:

1
2
/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

1
2
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

九,内置函数

Less函数手册

坚持原创技术分享,您的支持将鼓励我继续创作!
0%