less基础知识总结

1. 预处理器及less注释

种类

• less
• Sass
• stylus

使用
其实，我们在vscode下下载一个插件easy less就可以直接写less代码了，我们需要引入他编译后的css代码，当然这里还有其他用法

• 命令行
• 浏览器端(注意引入文件的位置:代码的下面) 点击

注释

• 以 // 开头的注释，不会被编译到css文件中
• 以 /**/ 包裹的注释会被编译到css文件中

2. 变量

2.1 声明

• 使用@来声明一个变量

2.2 使用

2.2.1 属性

普通属性值

• 调用:@变量

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

选择器和属性名

• 调用:@{ 变量 }

选择器

// Variables
@mySelector: banner;

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

属性名

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

属性作为变量用$来选取属性(less的版本需要 > 3)

.widget {
  color: #efefef;
  background-color: $color;
}

// 会编译成
.widget {
  color: #efefef;
  background-color: #efefef;
}

// 还需要注意变量的延迟加载
.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 
// 编译成
.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 

2.2.2 url

• 调用：url("@{url}")

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

2.2.3 引入文件

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

2.3 变量的延迟加载(Lazy Loading)

• 当一个块级作用域加载完毕，再去赋值变量

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

输出

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

3. 嵌套规则

• 父子：基本嵌套规则
• 平级：&的使用（平级）

&所决定的而是 选择器和选择器之间有没有 空格，&所代表的就是父级选择器

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

输出

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

4. 混合(Mixins)

详情点击

4.1 普通混合

• 可以把选择器直接当做一个混合
• 并通过.name或者.name()来进行调用

把选择器当做混合

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

输出

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}
/* 当然我们还可以通过 .a ,或者 .a() 来进行调用 */

4.2 参数

1. 不带输出的混合

详情点击

• 什么是不带输出的混合呢？
  我们定义的混合，不会被编译到最终的css文件中

• 语法
  使用.name(){ }来定义混合就可以了

定义混合

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

输出

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

• 我们会发现带括号的没有被编译

2. 带参数的混合

• 我们可以想混合混合定义参数
• 并在调用的时候传递，着优点想我们的函数

定义混合

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

调用混合

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

3. 带参数并且有默认值的混合

• 参数还可以有默认值

定义

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

调用
如果我们不传参的话，可以不加括号进行调用

#header {
  .border-radius;
}

4. 带多个参数的混合

• 在最新版的less中，多个参数可以用逗号隔开，也可以用分号隔开
• 混合可以携带多个参数

定义并调用

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

输出

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

• 通过看参数我们似乎发现了一个缺点
  • 定义多个参数的话，传递一个参数，他只能传到第一个参数
  • 但是如果我想传递一个参数，这个参数值传递到padding中呢，下面要看命名参数

5. 命名参数

• 在传递参数的时候指定将参数传递给谁

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

输出

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

4.3 匹配模式

详情点击
什么是匹配模式呢？
这就相当于一个钥匙开一把锁，我们有很多锁，想要开哪个锁，用哪个钥匙就可以了

• 在less中我们定义几种样式，这些样式上都有一个标识
• 我们通过这些标志就能用上这些样式

定义混合

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

调用混合

@switch: light;

.class {
  .mixin(@switch; #888);
}

令我们吃惊的是@_,我们并没有调用它，为什么他的样式会在里面呢？

@_表示的是无论我们调用谁，他都会跟过来

4.4 arguments

• 通俗的来说他的意思是将所有变量的值都打包到这里

.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;
}

5. 运算

• less中还可以进行一些简单的运算

width:(10px + 10)
/* 或者写成下面的两种形式
width:(10 + 10)px
width:(10 + 10px)
*/

6. 避免编译

• 加上~ " ",引号里的内容就不会被编译

7. 继承

语法

• 不支持参数，相当于在需要的样式前增加并集选择器
• &:extend(选择器)，括号内调用混合 *all 把所有的相同名称的样式都继承下来

定义继承

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

输出

nav ul {
  background: blue;
}
/*在inline后面添加了nav ul*/
.inline,
nav ul {
  color: red;
}

优缺点

• 性能比混合高
• 灵活度比混合低

高级

高级方面主要看一些函数，官网