Less用法指南

时间 2019-11-20

标签用法指南繁體版

原文原文链接

　　目录：css

　　一、什么是LESShtml

　　LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用相似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。前端

　　LESSCSS能够在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。web

　　LESSCSS是一种由Alexis Sellier设计的动态层叠样式表语言。受Sass所影响，同时也影响了Sass的新语法：SCSS。[1]浏览器

　　LESSCSS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被复用为JavaScript。受益于JavaScript，LESS能够在客户端上运行（IE6+、Webkit、Firefox），也能够在服务端运行（Node.js、Rhino）。前端工程师

　　二、目的less

　　学习笔记，里边加了一些体会。同时也但愿之后不用去参照官方文档了。中文官网、英文官网。函数

　　三、语法：学习

　　3.一、变量（Variables）spa

　　其实更应该称为常量。由于只能取最后一次的赋值。

　　语法规则：

　　@变量名：值;

　　值能够是css属性值，也能够是其余变量

　　3.1.1 css属性值

@backColor: yellow;
.a {
    background-color: @backColor;
}
@backColor: blue;
.b {
    background-color: @backColor;
}

　　编译后：

.a {
  background-color: #0000ff;
}
.b {
  background-color: #0000ff;
}

　　从编译后的结果能够看出来，只取变量的最后一次赋值结果。

@backColor: blue;

　　 3.1.2 变量名作做为变量

@com: color;
@color: #111;
#header {
    background-color: @@com + 5 * 2;
    color: @color;
}

　　编译后：

#header {
  background-color: #1b1b1b;
  color: #111111;
}

　　注：仅支持@@，不支持>2@。　　3.1.3 做用域（scope）

@color: red;

#header {
  @color: white;
  .a {
    color: @color; // white
  }
}

.b {
  color: @color; // red  
}

　　编译后：

#header .a {
  color: #ffffff;
}
.b {
  color: #ff0000;
}

　　能够看出来，LESS中变量做用域处理方式和js一致，采用链式做用域方式。至于上面的嵌套写法，先不用理解，后面会说到。　

　　用法：

　　一、统一的样式修改（固然没有LESS以前，咱们也能够经过规范进行实现）；　　

　　二、四则运算（Operations），虽然仅仅四则，可是已经能够完成大多数功能了；　　

　　三、和混合（Mixins）结合使用，你像使用函数一下使用他；　　

　　四、和js相同的链式做用域，前端工程师很是容易理解。

　　3.2 混合（Mixins）　　

　　我把他分为两种形式：函数和复用。　　

　　Bad smell（代码的坏味道）中第一条通常就是Duplicated Code（重复代码）。如何解决？就是代码封装。Mixins就是这样一个做用。　　

　　函数：

.c(@bg: red) {
    background-color: @bg;
    width: 100px;
    height: 200px;
}
@bgc: yellow;
.a {
    .c(@bgc);
}
@bgColor: @bgc + #111;
.b {
    .c(@bgColor);
}
.d {
    .c();
}

　　编译以后的代码：

.a {
  background-color: #ffff00;
  width: 100px;
  height: 200px;
}
.b {
  background-color: #ffff11;
  width: 100px;
  height: 200px;
}
.d {
  background-color: #ff0000;
  width: 100px;
  height: 200px;
}

　　注：编译以后没有.c相关内容。

　　@arguments　　　　

　　这个写法借签了js的函数参数。通常用于一些简写方式：

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}

#header {
    .boxShadow(2px,2px,3px,#f36);
}

　　编译后：

#header {
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}

　　复用：

.d {
    .e;
}
.e {
    position: absolute;
}
#f {
    position: relative;;
}
.m {
    #f;
}

　　编译以后

.d {
  position: absolute;
}
.e {
  position: absolute;
}
#f {
  position: relative;
}
.m {
  position: relative;
}

　　发现没有？.e和#f内容都存在。

　　注：class, id 属性集均可以以一样的方式复用。　　

　　“函数”和“复用”区别：　　

　　一、前者能够传参；　　

　　二、前者编译以后不存在，后者依然存在。　

　　用法：　　

　　一、代码封装；　　

　　二、同变量一同，像函数同样使用，封装以后咱们能够进行统一的样式修改；　　

　　三、样式复用，主要针对“复用”。

　　3.3 运算符（Operations）　　

　　目前仅支持加、减、乘、除四则运算，主要针对数字、颜色、变量的操做。

@baseWith: 100px;
@baseHeight: 50px;
@baseColor: #333;

.a {
    
    height: @baseHeight + 300;
    min-width: @baseWith - @baseHeight;
    width: @baseWith * 3;
    color: @baseColor / 3;
}

　　编译后：

.a {
  height: 350px;
  min-width: 50px;
  width: 300px;
  color: #111111;
}

　　可使用（）改变运算的前后顺序

@com: 25px;
#header {
    width: @com + 5 * 2;
    height: (@com + 5 ) * 2;
}

　　编译后：

#header {
  width: 35px;
  height: 60px;
}

　　3.4 功能函数（Functions）　　

　　主要针对color的处理。提供以下函数：

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

　　本人使用的不是不少，想了解更详细的新能够参考官网，或者这里。

　　3.5 嵌套规则（Nested Rules）

　　为了和上面作区分，同时带入一个新功能，以一个新例子开始。html代码以下：

<div id="header">
    <h1><a href="http://www.cnblogs.com/hanyangecho/">hanyangecho</a></h1>
    <p>个人世界</p>
</div>

　　LESS代码以下：

#header {
    display: inline;
    float: left;
    h1 {
        font-size: 26px;
        font-weight: bold;
        a {
            text-decoration: none;
            color: #f36;
            &:hover {
                text-decoration: underline;
                color: #63f;
            }
        }
    }
    p {
        font-size: 12px;
    }
}

　　编译以后：

#header {
  display: inline;
  float: left;
}
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header h1 a {
  text-decoration: none;
  color: #f36;
}
#header h1 a:hover {
  text-decoration: underline;
  color: #63f;
}
#header p {
  font-size: 12px;
}

　　说实话，第一次看到这种写法的时候，我就爱上LESS了。这不就是DOM的写法吗？这种写法不管后期维护、理解都是那么天然。是否是有一种原本就该如此的感受？

　　注意一下上面那个&符号。

在Less中嵌套书写中有没有&是彻底不同的效果，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素，咱们一块儿来看一段代码

#header {
    &.fl{
        float: left;
    }
    .mln {
        margin-left: 0;
    }
}

　　编译后：

#header.fl { float: left; }
#header .mln { margin-left: 0; }

　　3.6 命名空间（Namespaces）

　　这种方式支持咱们经过命名空间的方式访问上面嵌套中的“函数”或“复用”。

#header {
    .a(@bgColor: red) {
        background-color: @bgColor;
    }
    .b {
        width: 100px;
    }
}
.c {
    #header > .a(yellow); 
    #header > .b;
    height: 200px;
}

　　编译后：

#header .b {
  width: 100px;
}
.c {
  background-color: #ffff00;
  width: 100px;
  height: 200px;
}

　　 3.7注释（ Comments）

　　单行：//多行：/**/

参考：

　　http://www.w3cplus.com/css/less

　　http://www.lesscss.net/article/document.html