Less语法

sass/scss和less的区别：
相同点：变量混入(Mixins) 嵌套运算命名空间作用域函数
不同点：
1、编译环境不一样
Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。
2、编写变量的方式不同。Sass使用$，而Less使用@。
3、Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

注释
less提供两种注释：/**/和//
两者的区别是/**/会将注释编译到css文件中，而//不会。

变量
Less中的变量有以下规则：
以@作为变量的起始标识，变量名由字母、数字、_、-组成；
没有先定义后使用的规定；
定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式.

@color: #fff;
.box{
    background-color: @color;
}
// 甚至可以用变量名定义为变量:  
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
// 解析后
content: "I am fnord.";

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构

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

混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

@testz_width:300px;
.box{
    width: @testz_width;
    height: @testz_width;
    background-color: yellow;
    .border;
}
.border{
    border: solid 5px pink;
}
// 输出：
.box {
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: solid 5px pink;
}

我们还可以带参数地调用，就像使用函数一样。

// 混合带参数
.border_02(@border_width){
    border: solid yellow @border_width;
}
.text_hunhe{
    .border_02(30px);
}
// 输出：
.border {
     border: solid 5px pink;
}

我们还可以混合是默认带参，当调用的class不传参时，就会传入默认参数

// 混合－默认带值
.border_03(@border_width:40px){
    border: solid green @border_width;
}
.test_hunhe_03{
    .border_03();
}
// 输出：
.test_hunhe_03 {
    border: solid #008000 40px;
}

arguments包含了所有的传递进来的参数，不用单独处理每一个参数

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
// 编译过后的结果是：
.box-shadow{
          box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;
}

匹配模式与导引
有些情况下，我们想根据传入的参数来改变混合的默认呈现。我们就可以使用匹配模式。可以理解为其他语言中的switch。以下是一个匹配模式的例子：

.triangle(top,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
 }
.triangle(bottom,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: @c transparent transparent  transparent;
    border-style: solid dashed dashed  dashed;
 }  

.triangle(left,@w:5px,@c:#ccc){
    border-width: @w;
    border-color:  transparent @c transparent  transparent;
    border-style:  dashed solid dashed  dashed;
 }
 .triangle(right,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent  transparent @c;
    border-style:  dashed dashed  dashed solid;
 }
 .triangle(@_,@w:5px,@c:#ccc){
    width: 0;
    height: 0;
    overflow: hidden;
 }

定义好less后我们就可以进行匹配：

html：
<div class="sanjiao"></div>
less：
.sanjiao{
    .triangle(right,100px); // 匹配到第四和第五个混合
}

结果输出：

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。

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

lightness为less定义的函数，这个函数是用来返回HSL颜色模式的亮度（lightness）。返回值为0-100%的百分比数或 0-1 的整数。

// 运行如下代码：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
// 就会得到：
.class1 {
    background-color: black;
    color: #ddd;
}
.class2 {
    background-color: white;
    color: #555;
}

导引序列使用逗号‘,’分割，当且仅当所有条件都符合时，才会被视为匹配成功。导引中可用的全部比较运算有： > >= = =< <。

.m-mixin (@a) when (@a > 10), (@a < 100) { ... }
// 导引可以没有参数，也可以对参数进行比较运算
@media: mobile;
.mixin () when (@media = mobile) { ... }
.mixin () when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

如果想要基于值的类型进行匹配的话，可以使用is表达式进行判断

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

常见的检测函数：iscolor、isnumber、isstring、iskeyword、isurl
判断一个值是纯数字，还是某个单位量，可以使用函数：ispixel、ispercentage、isem

使用and/not关键字实现与/非条件

.mixin(@a) when (isnumber (@a) ) and (@a > 0) {...}
.mixin(@b) when not ( @b > 0){...}

运算与避免编译
任何数字、颜色或者变量都可以参与运算. 来看一组例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

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

如果像下面这样单位运算的话:

@var  : 1px + 5; // 6px
width  : (@var + 5 ) *2; // 被允许使用括号
border: (@width * 2) solid black;  // 可以在符合属性中进行使用

那么如果我们不希望less进行运算，而是将表达式输出呢？

例如css3中新增的属性calc()，其最大的好处就是用在流体布局上，浏览器可以通过calc()计算得到元素的宽度。
less中也考虑到了这点，我们可以使用～“表达式”来避免编译，这样就可原样输出表达式

.test_03{
    width:~"calc(300px-30px)";
}
// 输出：
.test_03{
    width:calc(300px-30px);
}

嵌套
Less 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }
#header .navigation {
    font-size: 12px;
}
#header .logo { 
    width: 300px; 
}
#header .logo:hover {
    text-decoration: none;
}
// 在 less 中, 我们就可以这样写:
#header {
    color: black;

    .navigation {
        font-size: 12px;
    }
    .logo {
         width: 300px;
        &:hover { text-decoration: none }
    }
}

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

函数
less本身提供了一系列的颜色运算函数。颜色会被转化成为HSL色彩空间，然后在通道级别操作。

lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色
darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色
saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色
fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色
fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色
spin(@color, 10);         // 返回色调比@color大10度的颜色
spin(@color, -10);        // 返回一个比@color小10度色调的颜色
mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色

举个小栗子：

@base: #f04615;
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

可以获取颜色的具体参数

hue(@color)                     //获取色相
saturation(@color)             //获取饱和度
lightness(@color)              //获取明度

也可以在一种颜色的通道上面创建另外一种颜色,@new 将会保持 @old的色调, 但是具有不同的饱和度和亮度.
@new: hsl(hue(@old), 45%, 90%);

Math函数：less提供了一组方便的数学函数，可以使用它们处理一些数字类型的值。

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`
// 以及如下函数：
sqrt:平方根函数 （保留单位）
abs:取绝对值 （保留单位）
三角函数（返回数值)
反三角函数（返回以弧度为单位的角度)
pi:返回圆周率 π  
pow(a，b):返回a的b次方 
mod（a，b:返回第一个参数对第二参数取余的结果
min:返回最小的值 
max:返回最大的值

类型函数：验证值是否为某一类型例如：isnumber()、isstring()、iscolor()、iskeyword()、isurl() 等等。下面简单介绍isnumber()函数

如果待验证的值为数字则返回 true ，否则返回 false 。
参数：value - 待验证的值或变量。
返回值：如果待验证的值为数字则返回 true ，否则返回 false 。
案例：
    isnumber(#ff0);     // false
    isnumber(blue);     // false
    isnumber("string"); // false
    isnumber(1234);     // true
    isnumber(56px);     // true
    isnumber(7.8%);     // true

命名空间
有时候，我们可能更好地组织CSS或是单纯的为了更好地封装，我们会将会一些变量或是混合模块进行打包操作，为了后续进行复用

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}
// 当我们想要在某一个地方引入button的样式的时候：
#header a {
  color: orange;
  #bundle > .button;
}

作用域
less的作用域和其他编程语言十分的相似，首先在本地的变量和混合模块进行查找，如果没有找到的话，就会去父及作用域查找，直到找到为止。

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}

importing(导入)
我们如果想要引入less文件，.less的后缀可以有可以没有

@import "lib.less";
@import "lib";

但是想要导入一个CSS文件而且不希望less对它进行处理，只要加上CSS后缀就可以了。这样的话less就可以跳过，不去处理他了。
import "lib.css";

JavaScript表达式
（1）JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;  // @var :"HELLO!"

（2）也可以同时使用字符串插值和避免编译

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`; //@var: HELLO!;

（3）可以访问JavaScript的环境

@height: `document.body.clientHeight`;

（4）将一个JavaScript字符串解析成16进制的颜色值，可以使用 color 函数

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

参考：
https://www.jianshu.com/p/9f6...
https://www.jianshu.com/p/35c...

Less语法

浅墨

引用和评论

css/js小案例