Less快速入门

CSS › 预处理器

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

在客户端使用Less

首先引入.less文件。要设置rel属性值为“stylesheet/less”：

1
<link rel="stylesheet/less" type="text/css" href="styles.less">

在这里下载Less 之后,然后在<head>中引入：

1
<script src="less.js" type="text/javascript"></script>

注意：你的less样式文件一定要在引入less.js前先引入。

注释

less的注释有两种，//和/* */

Less Code

1
2
3
4
5
6
// 单行注释，不编译
/*
   多行注释，编译
   多行注释，编译
   多行注释，编译
*/

Compiled Css Code:

1
2
3
4
5
/*
   多行注释，编译
   多行注释，编译
   多行注释，编译
*/

变量

以@开头 例如：@test_width:100px;

Less Code

1
2
3
4
@text_width:100px;
.text{
    width: @text_width;
}

Compiled Css Code:

1
2
3
.text {
  width: 100px;
}

混合

一个类可以当做另一个元素的属生值，并可以接受自己的参数。

可以在一个classA中引入另一个classB，从而实现classB继承classA的所有属性，可以带参数。经常使用在封装兼容不同浏览器的情况下。

无参混合

Less Code

1
2
3
4
5
6
7
8
9
10
11
.classA{
    border: 10px solid red;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
  }
.classB{
    .classA;
    width: 50px;
    height: 50px;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.classA {
  border: 10px solid red;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.classB {
  border: 10px solid red;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  width: 50px;
  height: 50px;
}
带参数混合(不带默认值)

Less Code

1
2
3
4
5
6
7
8
9
10
11
.classA(@radius){
    border: 10px solid red;
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
  }
.classB{
    .classA(10px);
    width: 50px;
    height: 50px;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
.classB {
  border: 10px solid red;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  width: 50px;
  height: 50px;
}
带参数混合(带默认值)

Less Code

1
2
3
4
5
6
7
8
9
10
11
.classA(@radius:5px){
    border: 10px solid red;
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
  }
.classB{
    .classA();
    width: 50px;
    height: 50px;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
.classB {
  border: 10px solid red;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  width: 50px;
  height: 50px;
}
@arguments变量

在Mixins中使用这个参数的时候，它表示所有的变量。

Less Code:

1
2
3
4
5
6
7
8
.box(@x:0,@y:0,@blur:1px,@color:gray){
    -moz-box-shadow:@arguments;
    -webkit-box-shadow:@arguments;
    box-shadow: @arguments;
  }
#main{
    .box(5px,5px,6px,#662500);
}

Compiled Css Code:

1
2
3
4
5
#main {
  -moz-box-shadow: 5px 5px 6px #662500;
  -webkit-box-shadow: 5px 5px 6px #662500;
  box-shadow: 5px 5px 6px #662500;
}

匹配

.name(条件一，参数){}
.name(条件二，参数){}
.name(@_,参数){}
调用：.name(条件值，参数值);

假设需要做一个三角形的图标，三角形可能朝不同的方向，可以这样写：

Less Code

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
//@_意思是与top,bottom,left,right都匹配
.triangle(@_,@w:5px,@c:gray){
    width: 0px;
    height: 0px;
    overflow: hidden;
}  
.triangle(top,@w:5px,@c:gray){
    border-width: @w;
    border-color: transparent transparen @c transparent;
    border-style: dashed dashed solid;
}
.triangle(bottom,@w:5px,@c:gray){
    border-width: @w;
    border-color: @c transparen transparent transparent;
    border-style: solid dashed dashed;
}
.triangle(left,@w:5px,@c:gray){
    border-width: @w;
    border-color: transparen @c transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:gray){
    border-width: @w;
    border-color: transparen transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
.sanjiao{
    .triangle(top,100,green);
}

Compiled Css Code:

1
2
3
4
5
6
7
8
.sanjiao {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 100;
  border-color: transparent transparen #008000 transparent;
  border-style: dashed dashed solid;
}

这样就可以在需要使用不同方向的三角时，直接通过匹配实现。

运算

任何数字、颜色、变量都可以参与运算，运算被包裹在括号中。

颜色的运算不常用到，更多的是数字和变量的运算。

运算中没有强制性规定一定要带单位，运算中只要有一个带单位的即可,如果单位不同，以先出现的单位为准

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@width_a: 500px;
@width_b: 50px;
.text_01 {
    width: @width_a + 20;
}

.text_02 {
    width: @width_a + 20rem;
}

.text_03 {
    width: 20rem + @width_a;
}

.text_04 {
    width: @width_a - @width_b;
}

Compiled Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.text_01 {
  width: 520px;
}
.text_02 {
  width: 520px;
}
.text_03 {
  width: 520rem;
}
.text_04 {
  width: 450px;
}

嵌套

Html Markup:

1
2
3
4
<div id="box">
        <p>hello <a href="http://zhyat.cn">zhyat</a></p>
        <span>一些学习笔记</span>    
    </div>

Less Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box{
    display: inline;
    float: left;
    p{
        font-size: 15px;
        a{
            text-decoration: none;
            color: gray;
            &:hover{
                color: blue;
            }
        }
    }
    span{
        font-size: 12px;
        color:pink;
    }
}

Compiled Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box {
  display: inline;
  float: left;
}
#box p {
  font-size: 15px;
}
#box p a {
  text-decoration: none;
  color: gray;
}
#box p a:hover {
  color: blue;
}
#box span {
  font-size: 12px;
  color: pink;
}

根据DOM树形结构去书写代码，从而减少选择器的层级关系，使得代码更简洁。

需要注意的是在操作伪代码的时候，需要再前面加&。有&的时候解析为同一元素或此元素的伪类，没有&的时候解析为此元素的后代元素

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a{
    &:hover{
        color: blanchedalmond;
    }
    &{
        font-size: 15px;
    }
    :visited{
        color: burlywood;
    }
    .ml{
        font-weight: 40;
    }
}

Comoiled Css Code

1
2
3
4
5
6
7
8
9
10
11
12
a {
  font-size: 15px;
}
a:hover {
  color: blanchedalmond;
}
a :visited {
  color: burlywood;
}
a .ml {
  font-weight: 40;
}

color函数

颜色定义函数

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@color1:rgb(255,255,255);       //转化为#ffffff param1:红色通道 param2:绿色通道 param3:蓝色通道 三个参数均是包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。
@color2:rgba(155,155,155,0.2);  //rgba(155, 155, 155, 0.2) 同上，param4是alpha通道，包含0到1之间的数字或0到100%之间的百分比。
@color4:hsl(22,100%,20%);       //转化为#662500,param1:度数（0~360，整数） param2:饱和度(0~1或0~100%) param3:亮度(0~1或0~100%)
@color5:hsla(22,100%,20%,0.4);  //转化为rgba(102, 37, 0, 0.4)，同上，param4是alpha通道，包含0到1之间的数字或0到100%之间的百分比。
@color6:hsv(55,0.7,0.5);          //转化为#807826,param1:度数（0~360，整数） param2:饱和度(0~1或0~100%) param3:value(0~1或0~100%)
@color7:hsva(125,179,18,0.6);     //转化为rgba(0, 255, 0, 0.6),同上，param4是alpha通道，包含0到1之间的数字或0到100%之间的百分比。

.box{
    width: 50px;
    height: 50px;
    border-width: 2px;
    border-style: solid;
    border-color: @color1 @color2 @color4 @color5;
    background-color: @color6;
    color: @color7;
}

Comoiled Css Code

1
2
3
4
5
6
7
8
9
.box {
  width: 50px;
  height: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff rgba(155, 155, 155, 0.2) #662500 rgba(102, 37, 0, 0.4);
  background-color: #807826;
  color: rgba(0, 255, 0, 0.6);
}
颜色通道函数
序号 函数 描述 例子
1 hue 在HSL颜色中提取颜色的色调 background: hue( hsl(22,100%,20%); Comoiled Css Code background: 22;
2 saturation 在HSL颜色中，提取彩色对象的饱和通道。 background: saturation( hsl(22,100%,20%);Comoiled Css Code background: 100%;
3 lightness 在HSL颜色空间中，从颜色对象提取亮度通道。 background: lightness( hsl(22,100%,20%);Comoiled Css Code background: 20%;
4 hsvhue 在HSV色彩空间中，提取色彩对象的色调通道。 background: hsvhue(hsv(55,0.7,0.5)); Comoiled Css Code background: 55;
5 hsvsaturation 在HSL颜色空间中，提取彩色对象的饱和通道。 background: hsvsaturation(hsv(55,0.7,0.5)); Comoiled Css Code background: 70%;
6 hsvvalue 在HSL颜色空间中，提取颜色对象的值通道。 background: hsvvalue(hsv(55,0.7,0.5)); Comoiled Css Code background: 50%;
7 red 提取彩色对象的红色通道。 background: red(rgba(155,154,153,0.2)); Comoiled Css Code background: 155;
8 green 提取彩色对象的绿色通道。 background: green(rgba(155,154,153,0.2)); Comoiled Css Code background: 154;
9 blue 提取彩色对象的蓝色通道。 background: blue(rgba(155,154,153,0.2)); Comoiled Css Code background: 153;
10 alpha 提取颜色对象的alpha通道。 background: alpha(rgba(155,154,153,0.2)); Comoiled Css Code background: 0.2;
11 luma 计算颜色对象的亮度值。 background: luma(rgba(155,154,153,0.2)); Comoiled Css Code background: 6.47593448%;
12 luminance 在没有伽马校正的情况下计算亮度值。 background: luminance(rgba(155,154,153,0.2)); Comoiled Css Code background: 12.08944314%;
颜色操作

以不同的方式改变和操作颜色，形如function(param1,param2);

param1是颜色对象

param2可以是

序号 函数 描述
1 saturate 改变元素中颜色的强度或饱和度。
2 desaturate 降低了元素中颜色的强度或饱和度
3 lighten 增加了元素中颜色的亮度
4 darken 改变元素中颜色的强度或饱和度
5 fadein 增加了所选元素的不透明度
6 fadeout 减少所选元素的不透明度
7 fade 用于设置所选元素的颜色的透明度
8 spin 用于旋转所选元素的颜色的角度
9 mix 将两种颜色与不透明度混合
10 tint 将颜色与白色混合，同时减少颜色的比例
11 shade 将颜色与黑色混合，因为您减少了颜色的比例
12 greyscale 从所选元素中的颜色中丢弃饱和度
13 contrast 设置元素中颜色的对比度
颜色混合函数
序号 函数 描述
1 multiply 将两种颜色相乘，并返回结果颜色
2 screen 需要两种颜色，并返回更明亮的颜色。 与multiply函数相反
3 overlay 它通过组合乘法和屏幕的效果来生成结果
4 softlight 工作方式类似于覆盖，但它仅使用颜色的一部分，其中柔和突出显示其他颜色
5 hardlight 工作方式类似于覆盖 ，但颜色的作用相反
6 difference 从第一输入颜色中减去第二输入颜色
7 exclusion 工作原理类似于difference，但对比度较低
8 average 计算每个通道(RGB)基础上的两种输入颜色的平均值
9 negation 与opposite函数相反，其从第二颜色中减去第一颜色

命名空间

在为了更好的组织CSS或者为了更好的封装，将一些变量和混合模块打包起来。在使用的时候，就需要把有关的一部分取出来。

Less Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#bundle {
    .button () {
      display: block;
      border: 1px solid black;
      background-color: grey;
      &:hover { background-color: white }
    }
    .tab {  }
    .citation {  }
  }

#header a{
    color: orange;
    #bundle > .button;
}

Comoiled Css Code

1
2
3
4
5
6
7
8
9
10
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #ffffff;
}

作用域

less的作用域和别的编程语言非常相似，变量同样也有作用范围，首先会先从本地查找，如果没有再从父级的作用域查找。其实就是就近原则，元素先查找本身有没有这个变量，如果有，就取本身的变量，如果没有，就从父级元素的作用域查找，以此类推，直至找到相应的变量。

Less Code

1
2
3
4
5
6
7
8
@var:green;
#main{
    @var:white;
    #box{
        @var:red;
        color: @var;
    }
}

Comoiled Css Code

1
2
3
#main #box {
  color: #ff0000;	//red
}

!importing

提升优先级,但是和css一样，不推荐使用，多用于调试。会为所有的混合所带来的样式，添加上!importing

Less Code

1
2
3
4
5
6
7
#box {
    border: 5px solid red;
    border-radius: 3px;
}
#main{
    #box !important;
}

Comoiled Css Code

1
2
3
4
5
6
7
8
#box {
  border: 5px solid red;
  border-radius: 3px;
}
#main {
  border: 5px solid red !important;
  border-radius: 3px !important;
}

importing

引入.less,.less后缀可不带

1
2
@import "lib.less";
@import "lib";

如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:

1
@import "lib.css";

避免编译

将需要避免编译的字符串用“”包含，并在“前加上~，如：

1
2
3
.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

参考资料：

Less 一种动态样式语言

大漠的博客 CSS-LESS

imooc–less即学即用