Less 总结——快速入门

来自Less官网学习总结https://less.bootcss.com/

Less变量

@开头，颜色之间可计算加减,@变量名使用；用于"选择器名","属性名"，"url","import语句","变量的变量",用@{变量名}使用,变量申明可提升。

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

//颜色算法
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

//变量的变量
@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;//变量的变量 等于 @primary 即 green
  }
}

//属性名的变量使用
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;//background-color:#999;
}

//url的使用方法和import的使用方法
@images:'../img';
background: url("@{images}/white-sand.png");
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";

3.0新增 $属性名作为变量使用，可继承父级的属性，例如$color,$font-size;

父级选择器的使用

&,指代 所有父级选择器的字符串，可用于拼接伪类选择器，带有父级选择修饰的子集选择器,且可多次使用。用于 子级选择器后面可调换子父级顺序。当父级元素为并列多个时，可形成不同的组合。

1、用于拼接形成选择器名称

//1、用于拼接形成选择器名称
div{
    a {
      color: blue;
      &:hover {//拼接伪类选择器 div a:hover
        color: green;
      }
      & + &{//div a + div a
      }
    }
}

.button {
  & + &{//.button + .button
  }
  &-ok {//.button-ok
    background-image: url("ok.png");
  }
  &-cancel {//.button-cancel 
    background-image: url("cancel.png");
  }

  &-cancel  {//.button-cancel 
    background-image: url("custom.png");
  }
}

2、调换选择器顺序

div{
    color:black;
    p &{
        color:red;
    }
}
//编译后
div{color:black;}
p div{
    color:red;
}

3、多个并列父级形成不同组合

p,a{
color:black;
    & + &{
        color:red;
    }
}
//编译后
p,a{color:black;}
p+a{color:red;}
p+p{color:red;}
a+a{color:red;}
a+p{color:red;}

Less扩展extend

扩展Less,语法：选择器a:extend(选择器b [all],选择器c...)，选择器a可扩展选择器b,选择器c（b,c可为嵌套选择器）的属性样式。扩展语句必须在选择器的最后面（包括伪类的后面），可叠加多次，选择器与扩展语句间可有空格。

.a:extend(.b) {}
等价于：
.a {
  &:extend(.b);//内部扩展
}
.c:extend(.d all) {
  // 扩展所有包含.d的属性：".x.d" or ".d.x"
}
.c:extend(.d) {
  // 只扩展编译后为.d的属性
}
.e:extend(.f, .g) {}//扩展多个属性

扩展选择器的匹配规则：
1、除引号之外的所有不同的表现形式都不会被匹配到，必须一摸一样,eg:nth 表达式,伪类的顺序，*.class，嵌套选择器，虽然包含选择器且意义一样，也不会被匹配到；
2、只有选择器后面加上了 aLL字段才会被匹配到。如上所示；
3、当b,c选择器为变量时，不会被匹配到，但是a选择器为变量时，可生效；
4、@media内部的选择器只会匹配相同media类型内的选择器，且不匹配嵌套media内部的属性。
5、在外层的选择器扩展可扩展所有符合的选择器属性，包括不同media内部的所有属性

@media screen {
  .selector {  /* ruleset inside nested media - top level extend works */
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  /* ruleset inside nested media - top level extend works */
      color: blue;
    }
  }
}

.topLevel:extend(.selector) {} /* top level extend matches everything */

合并 merge

使用“+”，“+_”，合并同一个css样式的属性，前者用逗号隔开，后者用空格隔开。

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
//结果
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

.mixin() {
  transform+_: scale(2);
}

.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

//结果
.myclass {
  transform: scale(2) rotate(15deg);
}

混合模式Mixins

1、类选择器和ID选择器都可以混入，（）是可选的；
2、不输出Mixin，需要在Mixin后面添加（）；
3、Mixin不仅可以包含属性，还能包含选择器；
4、命名空间：嵌套Mixin,用于区分不同的库，解决与其他库冲突问题，“>”“ ”；
5、Guarded Namespaces 条件命名空间，满足条件时才匹配上，default()匹配所有条件。
6、在Mixins调用的后面加上！important,Mixins内部的所有属性都会继承；
7、可传参数，参数可有默认值 argu:defaultValuee;
8、多参数Mixins，参数用分号或逗号分开，推荐分号分隔，css属性列表用逗号分割，如果参数列表中有一个分号则默认为分号分隔；可设置多个名称相同的多参数Mixins,会自动选择其中强制参数符合的Mixins.调用时，不需要按照参数顺序。@arguments调用时传入的所有参数，“...” 代表可变个数（0-N）的参数，“@rest”表示指定参数之外的剩余所有参数。
9、模式匹配：根据传参，生成不同的css属性，“@_”可匹配所有值；变量可以匹配任意值，可根据个数来匹配。
10、Mixins中定的变量和Mixins相当于Mixins的return值。父层继承的变量会被覆盖，当前调用作用域的变量不会被覆盖。（相当于一个函数）；
11、递归Mixins ,在自身内部调用自己，与模式匹配和条件表达式一起用。
12、Mixin Guards——关键字When,来实现有条件的执行,依据@media执行规范。例子参照5。比较运算符：>, >=, =, =<, <，true是唯一得“真”值。参数之间也可以进行比较。逻辑运算符：'and' ,','(相当于or),'not'。类型校验函数：iscolor，isnumber，isstring，iskeyword，isurl。是否包含单位函数：ispixel，ispercentage，isem，isunit。

.my-hover-mixin() {
  &:hover {//包含选择器
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

//输出
//带有括号，不输出.my-hover-mixin
button:hover {
  border: 1px solid red;
}
//4、5************命名空间
#outer {
  .inner {//嵌套在outer id里面
    color: red;
  }
}
.c {
  #outer > .inner;
//以下用法效果一样
//#outer > .inner;
//#outer > .inner();
//#outer .inner;
//#outer .inner();
//#outer.inner;
//#outer.inner();
}

//5*******************Guarded Namespaces
#namespace when (@mode=huge) {//@mode=huge 换成default()则可匹配所有条件
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode=huge) { /* */ }
}
//7****************传参
.border-radius(@radius：5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}//.border-radius(4px);.border-radius，默认5px

//8**********多参数Mixins
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
//9**************模式匹配
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}
//引用
@switch: light;
.class {
  .mixin(@switch; #888);
}
.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}

//10**************返回变量和Mixins
.mixin() {
  @size: in-mixin;
  @definedOnlyInMixin: in-mixin;
}

.class {
  margin: @size @definedOnlyInMixin;
  .mixin();
}

@size: globaly-defined-value; //被弃用了 最后额结果margin: in-mixin in-mixin;

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}

//11*******************递归Mixins
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
//12*****************Mixin Guards
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
.class {
  .truth(40); //不匹配以上得两个，只有.truth(true)才会匹配上
}
& when (@my-option = true) {//&可达到if条件句功能。
  button {
    color: white;
  }
  a {
    color: blue;
  }
}

Detached Rulesets 分离规则集

定义：
定义一个变量，内部包含，css属性集，嵌套样式，media定义样式集。 不返回变量。可作为混合模式得参数传递进去。规则集中的media定义可以引用对象得media定义合并（and），遵循 media query bubbling；
作用域：
1、可利用定义作用域和引用作用域得变量，定义作用域变量优先。
2、复制和引用（@detached-2: @detached-1; ）规则集不能改变定义作用域。
3、unlocked 规则集可改变过用于

// 定义规则集
@detached-ruleset: { background: red; };

// 引用规则及
.top {
    @detached-ruleset(); 
}

//混合模式得规则集利用
.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200px) { @rules(); }
  html.lt-ie9 &                         { @rules(); }
}
header {
  background-color: blue;

  .desktop-and-old-ie({//参数为一个属性的对象，@rules即为规则集。
    background-color: red;
  });
}

//unlocked detached ruleset CAN see this variable
#space {
  .importer-1() {
    @detached: { scope-detached: @variable; }; // define detached ruleset
  }
}

.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

Import选项

可随处引用，Syntax: @import (keyword) "filename";keyword之间用逗号分隔；
keyword:
reference: 引用Less文件，引用了其中得Mixins或者extend得选择器才会被输出。extend:在import得地方输出，mixin在引用的地方输出；
inline:直接在编译后得文件中import文件，不进行处理。
less: 将文件当作less文件处理，不管后缀是什么
css: 将文件当作css文件处理，不管后缀是什么
once: 至引入一次样式文件
multiple: 可多次引入样式文件
optional: 可选的样式文件，如果没找到该文件，继续编译

插件（V2.5）

用法：@plugin "my-plugin";定义一个插件JS文件，返回一个Less节点。可定义不同文件得重名得函数，在插件引用作用域中用。return false可调用该函数但不返回任意值。3.0版本之后，函数可返回任意类型。

//新建一个简单得插件如下：
registerPlugin({
    install: function(less, pluginManager, functions) {
        functions.add('pi', function() {
            return Math.PI;
        });
    }
})
module.exports = {//nodej其他commonJS其他语法不支持，如require()
    install: function(less, pluginManager, functions) {
        functions.add('pi', function() {
            return Math.PI;
        });
    }
};