• 主页
  • github
  • 简历

学习使用Less小记

关于Less

Less是一个css预处理工具, 它拓展了css的语法, 添加了一系列特性.

使用Less

在命令行使用

全局安装Less:

1
npm install -g less
  1. 编译less文件

    1
    lessc styles.less
  2. 编译less文件并指定文件名

    1
    lessc styles.less styles.css
  3. 编译less文件并产生压缩后的代码

    1
    lessc --clean-css styles.less styles.min.css

在webpack中使用

在webpack配置中添加loader, 并安装相应loader包 npm install less less-loader css-loader style-loader

1
2
3
4
{
test: /\.less?$/,
loaders: ['style-loader', 'css-loader', 'less-loader'],
}

在客户端使用

引入less库: <script src="less.js" type="text/javascript"></script>
添加less文件: <link rel="stylesheet/less" type="text/css" href="styles.less" />

在node.js中使用

1
2
3
4
5
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) {
console.log(output.css);
});

Less语法

变量

  1. 变量属性值

    1
    2
    3
    4
    5
    @backColor: green;
    body {
    background-color: @backColor;
    }

    编译为:

    1
    2
    3
    body {
    background-color: green;
    }
  2. 变量属性

    1
    2
    3
    4
    5
    @bkColor: background-color;
    body {
    @{bkColor}: red;
    }

    编译为:

    1
    2
    3
    body {
    background-color: red;
    }
  3. 变量选择器

    1
    2
    3
    4
    5
    @b: body;
    @{b} {
    background-color: yellow;
    }

    编译为:

    1
    2
    3
    body {
    background-color: yellow;
    }
  4. 变量URL

    1
    2
    3
    4
    5
    @domain: "http://cdn.suisuijiang.com/";
    body {
    background-image: url("@{domain}user_57d65f739e1dc93d74ce4811_1473667014140.gif");
    }

    编译为:

    1
    2
    3
    body {
    background-image: url("http://cdn.suisuijiang.com/user_57d65f739e1dc93d74ce4811_1473667014140.gif");
    }
  5. 变量做变量名

    1
    2
    3
    4
    5
    6
    @pink: pink;
    @other: "pink";
    body {
    background-color: @@other;
    }

    编译为:

    1
    2
    3
    body {
    background-color: pink;
    }
  6. 变量懒加载

    变量在使用前不需要定义, 可以把定义放在使用后, 变量值使用当前作用域最终值, 当前作用域不存在该变量时则取父作用域最终值

    1
    2
    3
    4
    5
    6
    7
    body {
    @color: red;
    background-color: @color;
    @color: yellow;
    }
    @color: purple;

    编译为:

    1
    2
    3
    body {
    background-color: yellow;
    }
  7. 变量默认值

    由于变量懒加载机制的存在, 我们可以定义变量的默认值, 并在需要改变时直接赋其它值

    1
    2
    3
    4
    5
    6
    // library
    @base-color: green;
    // use of library
    @import "library.less";
    @base-color: red;

属性继承

  1. 选择器内继承

    1
    2
    3
    4
    5
    6
    7
    8
    .red {
    background-color: red;
    }
    body {
    &:extend(.red);
    display: flex;
    }

    编译为:

    1
    2
    3
    4
    5
    6
    7
    .red,
    body {
    background-color: red;
    }
    body {
    display: flex;
    }
  2. 选择器继承

    1
    2
    3
    4
    5
    6
    7
    .lawngreen {
    background-color: lawngreen;
    }
    body:extend(.lawngreen) {
    display: flex;
    }

    编译为:

    1
    2
    3
    4
    5
    6
    7
    .lawngreen,
    body {
    background-color: lawngreen;
    }
    body {
    display: flex;
    }
  3. 选择器内的子选择器继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .color {
    .aqua {
    background-color: aqua;
    }
    background-color: red;
    }
    body:extend(.color .aqua) {
    display: flex;
    }

    编译为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .color {
    background-color: red;
    }
    .color .aqua,
    body {
    background-color: aqua;
    }
    body {
    display: flex;
    }
  4. 继承所有匹配的选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .color.a {
    background-color: red;
    }
    .color.b {
    &:hover {
    background-color: blue;
    }
    }
    body:extend(.color all) { }

    编译为:

    1
    2
    3
    4
    5
    6
    7
    8
    .color.a,
    body.a {
    background-color: red;
    }
    .color.b:hover,
    body.b:hover {
    background-color: blue;
    }
  5. 使用继承比使用属性混合的代码体积更小

    使用属性混合:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .my-inline-block {
    display: inline-block;
    font-size: 0;
    }
    .thing1 {
    .my-inline-block;
    }
    .thing2 {
    .my-inline-block;
    }

    编译为:

    1
    2
    3
    4
    5
    6
    7
    8
    .thing1 {
    display: inline-block;
    font-size: 0;
    }
    .thing2 {
    display: inline-block;
    font-size: 0;
    }

    使用继承:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .my-inline-block {
    display: inline-block;
    font-size: 0;
    }
    .thing1 {
    &:extend(.my-inline-block);
    }
    .thing2 {
    &:extend(.my-inline-block);
    }

    编译为:

    1
    2
    3
    4
    5
    6
    .my-inline-block,
    .thing1,
    .thing2 {
    display: inline-block;
    font-size: 0;
    }

Mixins

  1. 混合其它选择器属性

    1
    2
    3
    4
    5
    6
    .base {
    background-color: red;
    }
    body {
    .base();
    }

    编译为:

    1
    2
    3
    4
    5
    6
    .base {
    background-color: red;
    }
    body {
    background-color: red;
    }
  2. 不输出混合

    在混合名称的末尾加上(), 可以不输出该混合

    1
    2
    3
    4
    5
    6
    .base() {
    background-color: red;
    }
    body {
    .base;
    }

    编译为:

    1
    2
    3
    body {
    background-color: red;
    }
  3. 使用!important

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .base() {
    background-color: red;
    }
    .flex() {
    display: flex;
    }
    body {
    .base;
    .flex !important;
    }

    编译为:

    1
    2
    3
    4
    body {
    background-color: red;
    display: flex !important;
    }

带参数的Mixins

  1. 多个参数

    1
    2
    3
    4
    5
    6
    7
    8
    .size(@width: 100%, @height: 100%) {
    width: @width;
    height: @height;
    }
    .container {
    .size(100px, 100px);
    background-color: red;
    }

    编译为:

    1
    2
    3
    4
    5
    .container {
    width: 100px;
    height: 100px;
    background-color: red;
    }
  2. 命名参数传递

    1
    2
    3
    4
    5
    6
    7
    8
    .size(@width: 100%, @height: 100%) {
    width: @width;
    height: @height;
    }
    .container {
    .size(@height: 200px, @width: 100px);
    background-color: red;
    }

    编译为:

    1
    2
    3
    4
    5
    .container {
    width: 100px;
    height: 200px;
    background-color: red;
    }
  3. @arguments参数

    @arguments参数包含所有的参数值, 如果你不想用单个的参数值来拼接属性, 就可以直接使用@arguments

    1
    2
    3
    4
    5
    6
    7
    8
    .shadow(@x; @y; @blur; @color) {
    box-shadow: @arguments;
    }
    .container {
    width: 100px;
    height: 100px;
    .shadow(0px; 0px; 5px; red);
    }

    编译为:

    1
    2
    3
    4
    5
    .container {
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 5px red;
    }

Mixins作为函数

在minin中定义的变量和minxins可以在调用者的作用域使用

1
2
3
4
5
6
7
8
9
10
.size() {
@width: 200px;
@height: 100px;
}
.container {
.size();
width: @width;
height: @height;
background-color: red;
}

编译为:

1
2
3
4
5
.container {
width: 200px;
height: 100px;
background-color: red;
}

因此, 我们可以将Mixin当做函数使用, 比如用于计算的函数

1
2
3
4
5
6
7
8
9
.sum(@a; @b) {
@sum: @a + @b;
}
.container {
.sum(22px; 88px);
width: @sum;
height: @sum;
background-color: red;
}

编译为:

1
2
3
4
5
.container {
width: 110px;
height: 110px;
background-color: red;
}