前言

CSS作为一种编程语言却缺少许多普通语言具有的许多特性导致在日常开发过程中无法做到DRY, 为了解决这个问题, 衍生了许多预处理器来改良编写CSS时的语法, 在此抛砖引玉介绍下LESS的基本用法

less

LESS是一种动态样式语言, 它扩展了CSS的功能添加了变量, Mixin, 函数等特性

可以通过客户端编译

引入编译less的js文件, 会增加客户端加载时长
可以通过服务端编译

通过nodejs实现
可以通过预编译转化成css文件再从html引入

使用考拉编译器

注释

通过//编写的注释在编译成css后不会暴露

通过/**/编写的注释才会暴露

变量

变量为延迟加载

整个文件加载完后才给变量赋值，因此某个变量值可能是在这行语句之后计算出来的值

使用@来声明变量
- @color: pink;
- @a: #wrap;
- @b: margin;
- @c: min.jpg;
当变量为选择器，属性名，url时，要用@{selector|attr|url}的方式
```
  @{a}{
  }
  .wrap{
      @{b}: 20px;
  }
  .wrap{
      background-image: url(@{c});
  }
```
当变量为属性值时使用@value的方式
```
  .wrap{
      color: @color;
  }
```

嵌套规则

基本嵌套规则为大括号表示父子关系，即两个选择器之间有空格

使用&表示此选择器与上个选择器为兄弟关系，即两个选择器之间没有空格

less混合(mixin)

混合是将一系列规则集引入另一个规则集中

在less规则中明确定义混合前必须加.

普通混合

此混合会被当成.center的样式被编译进原生css文件

      // less:
              .center{
                  width: 20px;
                  height: 20px;
              }
              .wrap{
                  .center
              }
      //css:
              .center{
                  width: 20px;
                  height: 20px;
              }
              .wrap{
                  width: 20px;
                  height: 20px;
              }

不带输出的混合

      // less:
              .center(){
                  width: 20px;
                  height: 20px;
              }
              .wrap{
                  .center()
              }
      //css:
              .wrap{
                  width: 20px;
                  height: 20px;
              }

带参数的混合

      // less:
              .center(@a){
                  width: @a;
                  height: 20px;
              }
              .wrap{
                  .center(100px)
              }
      //css:
              .wrap{
                  width: 100px;
                  height: 20px;
              }

多个参数的混合

      // less:
              .center(@a, @b){
                  width: @a;
                  height: @b;
              }
              .wrap{
                  .center(100px, 100px)
              }
      //css:
              .wrap{
                  width: 100px;
                  height: 100px;
              }

有默认值的混合

      // less:
              .center(@a: 20px, @b: 20px){
                  width: @a;
                  height: @b;
              }
              .wrap{
                  .center(100px)
              }
      //css:
              .wrap{
                  width: 100px;
                  height: 20px;
              }

匹配

保证声明形参时不加@且传入实参时值与形参相同即可完成匹配

    // less:
            .triangle(@_, @a, @b){      //此处变量为形参不需要与匹配模式中其他的规则命名相同
                width: 100px;
                height: 100px;
            }
            .triangle(A, @c, @d){
                border-top: @c @d;
            }
            .triangle(B, @c, @d){
                border-bottom: @c @d;
            }
            .wrap{
                .triangle(A, 100px, solid)
            }
    //css:
            .wrap{
                width: 100px;
                height: 100px;
                border-top: 100px solid; 
            }

arguments

当形参数量较多时可以使用, 可以省去重写一遍形参的时间

    // less:
            .center(@a, @b){
                border: @arguments;
            }
            .wrap{
                .center(100px, solid)
            }
    //css:
            .wrap{
                border: 100px solid; 
            }

计算

加减乘除, 且会自动完成单位的转换, 但对于没有意义的单位会不进行转换计算, 例如长度的相乘

        //less:
        .wrap{
            border: 100+100px solid;
        }
        //css:
        .wrap{
            border: 200px solid;
        }

继承

语法: :extend()

混合在被编译成css后，效果等同于将混合规则集复制到另一个混合集中，会造成原生css中有大量的重复声明块

使用继承可以使多个选择器在被转换好的CSS中以被结合符隔开的形式表现, 能提高css性能

被继承的规则写法上必须与普通混合相同，不能加括号也不能有参数

    //less
            .center{
                width: 20px;
                height: 20px;
            }
            //第一种写法
            .wrap{
                &:extend(.center);
                &:first-child{
                    background-color: red;
                }
            }
            //第二种写法
            .wrap:extend(.center){
                &:first-child{
                    background-color: red;
                }
            }
    //css:
            .center,
            .wrap{
                width: 20px;
                height: 20px;
            }
            .wrap:first-child{
                background-color: red;
            }

避免编译

当在less使用运算时可以指定某些运算不被预编译，直接将运算过程赋值给原生css时可以使用此功能

语法为: ~"anything"

    //less:
        .wrap{
            border: ~"100+100px" solid;
        }
    //css:
        .wrap{
            border: 100+100px solid;
        }

后记

随着CSS3标准慢慢的更新, 许多只有预处理器中才能实现的功能慢慢被引入到了原生CSS中, 迟早有一天预处理器会淡出我们的视野. 且市面上有三大主流预处理器scss, less和stylus, 全都掌握没有什么必要, 因此只要学会在编写CSS时引入mixin, 变量, 嵌套等编程概念时便能一通百通

LESS入门

基本语法与基本规则介绍

前言

less

注释

变量

嵌套规则

less混合(mixin)

匹配

arguments

计算

继承

避免编译

后记

CATALOG

FEATURED TAGS

FRIENDS