Less

Less

vs code 使用less

1. **在扩展包搜索 less ,找到 easy less **

2. 安装完后重启

3. 文件>首选项>设置

4. 搜 less或less.compile,点击 Easy LESS configuration或less找到 setting.json

5. 在json配置中加入，less.compile(less配置)

   "less.compile": {
   "compress": false,//是否压缩
   "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
   "out": true, // 是否输出css文件，false为不输出
   "outExt": ".css", // 输出文件的后缀,小程序可以写'wxss'
   }
   

less安装

$ npm install -g less

1、变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}
请注意，变量实际上是“常量”，因为它们只能定义一次。

可变插值

选择器名称，属性名称，URL和@import语句。

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

变量名

也可以使用变量名称定义变量：

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

编译为：

content: "I am fnord.";

2、混合蛋白

一组属性集中到一个规则中，另一些规则可通过该规则来使用这些属性

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  .bordered;
}

3、嵌套规则

类似于HTML结构，&代表当前选择器的父对象，也可表示产生重复的类名

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
     &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
  }
}

&也可表示产生重复的类名、多&、更改选择器的顺序、组合爆炸

//重复的类名
.parent{
    &-son{
    }
    &-daughter{
    }
}
.parent .parent-son{}
.parent .parent-daughter{}
//多&
.parent{
    &&{}
    & &{}
    &+&{}
    &,&{}
}
.parent.parent{}//交集选择器
.parent .parent{}//后代选择器
.parent+.parent{}//兄弟选择器
.parent,.parent{}//并集选择器
//更改选择器的顺序
.parent{
    .son{
        .like &{
            color:yellow;
        }
    }
}
.like .parent .son{
     color:yellow;
}
//组合爆炸
p, a{
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}
p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
a + p,
a + a
{
  border-top: 0;
}

4、嵌套指令和冒泡

media、font-face、keyframe可以与选择器相同的方式嵌套，指令放在最上面，并且相对于同一规则集中其他元素的相对顺序保持不变。这称为起泡。

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
}

@media screen {
      .screen-color {
        color: green;
      }
    }
    @media screen and (min-width: 768px) {
      .screen-color {
        color: red;
      }
    }
}

font-face、keyframe只冒泡，身体没有改变

5、运作方式

算术运算+，-，x, /可以在任意数量，颜色或可变的操作。

数学运算会在加，减或比较它们之前考虑单位并转换数字。结果为最左侧有明确说明单位的单位类型。

@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

如果转换是不可能的或没有意义，则将忽略单位。

@incompatible-units: 2 + 5px - 3cm; // result is 4px

乘法和除法不会转换数字。Less将按原样对数字进行运算，并为结果明确指定单位类型。

@base: 2cm * 3mm; // result is 6cm

对颜色进行的操作始终会产生有效的颜色。如果结果的某个颜色尺寸最终大于ff或小于00，则该尺寸将四舍五入为ff或00。如果alpha最终大于1.0或小于0.0，则将alpha舍入为1.0或0.0。

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

6、转义（试了不行）

转义允许您将任意字符串用作属性或变量值。除插值外，里面的任何东西~"anything"或~'anything'按原样使用。

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

结果是：

.weird-element {
  content: ^//* some horrible but needed css hack;
}

7、职能

Less提供了各种功能，可以转换颜色，操纵字符串和进行数学运算。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
}

8、命名空间和访问器

#header a {
  color: orange;
  #bundle > .button;
}

9、范围

Less的作用域与编程语言非常相似。首先在本地查找变量和混入，如果找不到，编译器将在父作用域中查找

@var: red;

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

10、延伸

Extend是一个Less伪类，它将合并的选择器与匹配其引用的选择器合并。

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

产出

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

扩展语法

扩展要么附加到选择器，要么放置在规则集中。看起来像是带有选择器参数的伪类（可选），后跟关键字all：

它可以包含一个或多个要扩展的类，以逗号分隔。

.e:extend(.f) {}
.e:extend(.g) {}

// the above an the below do the same thing
.e:extend(.f, .g) {}

扩展附加到选择器

附加到选择器的扩展看起来像一个普通的伪类，带有选择器作为参数。一个选择器可以包含多个extend子句，但是所有扩展都必须在选择器的末尾。

• 在选择器之后扩展：pre:hover:extend(div pre)。
• 选择器和扩展之间允许有空格：pre:hover :extend(div pre)。
• 允许多个扩展：pre:hover:extend(div pre):extend(.bucket tr)-请注意，这与pre:hover:extend(div pre, .bucket tr)
• 这是不允许的：pre:hover:extend(div pre).nth-child(odd)。扩展必须是最后一个。

如果规则集包含多个选择器，则它们中的任何一个都可以具有extend关键字。在一个规则集中扩展的多个选择器：

.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
  // body
}

扩展“全部”

当在扩展参数中最后指定all关键字时，它告诉Less将该选择器作为另一个选择器的一部分进行匹配。将复制选择器，然后仅将选择器的匹配部分替换为扩展名，从而创建一个新的选择器。

例：

.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {}

产出

.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

减少CSS大小

使用扩展代替Mixins

.my-inline-block() {
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}


.my-inline-block {
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}

组合样式/更高级的混音

替代mixin的方法-mixins仅可用于简单的选择器

如果有两个不同的html块，需要应用相同的样式，可以使用扩展来关联两个区域。

li.list > a {
  // list styles
}
button.list-style {
  &:extend(li.list > a); // use the same list styles
}

混合蛋白

.a, #b {
  color: red;
}
.mixin-class {
  .a();括号可要可不要
}
.mixin-id {
  #b();括号可要可不要
}

不输出混音

如果要创建一个mixin，但又不想输出该mixin，则可以在其后加上括号。

.my-mixin {这个输出
  color: black;
}
.my-other-mixin() {这个不输出
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

输出

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

受保护的命名空间

如果名称空间具有保护，则仅当保护条件返回true时，才使用由其定义的混合。命名空间保护的评估方式与mixin的保护方式完全相同，因此接下来的两个mixin的工作方式相同：

#namespace when (@mode=huge) {
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode=huge) { /* */ }
}

default对于所有嵌套的名称空间和mixin，假定该函数具有相同的值。永远不会评估以下mixin，因此保证其警惕之一是错误的：

#sp_1 when (default()) {
  #sp_2 when (default()) {
    .mixin() when not(default()) { /* */ }
  }
}

参数混合

该@arguments变

@arguments在mixin内部有特殊含义，它包含调用mixin时传递的所有参数。如果您不想处理单个参数，这将很有用：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

结果是：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}