less 常用方法

介绍

Less 是 CSS 的预处理语言之一，为 CSS 增添了变量、Mixin、函数等特性，使CSS更易于维护扩展。

嵌套（Nesting）

.header {
    .navgation: {
        font-size: 30px;
    }
}

编译结果：

.header .navgation: {
    font-size: 30px;
}

&符号

&符号用于对父级选择器的引用

.demo {
    &:hover {
        color: red;
    }
}

编译结果：

.demo:hover{
    color: red;
}

一个&符号和两个&符号的区别：

一个&符号是对父级选择器的引用，并没有嵌套关系

两个&符号会增加一个demo的层级，即引用了选择器，又增加了嵌套关系

.demo {
  &-title {
    color: red;
  }
}
.demo {
  &&-title {
    color: red;
  }
}

编译结果：

.demo-title {
  color: red;
}
.demo.demo-title {
  color: red;
}

变量（Variables）

使用@操作符声明变量

@width: 100px;
@height: @width + 100px;

#box {
    width: @width;
    height: @height;
}

编译结果：

#header {
  width: 100px;
  height: 200px;
}

混入（Mixins）

// 声明一个属性
.border-style{
    border: 1px dashed red;
}
// 使用
.demo {
    border-style()
}

编译结果：

.demo{
    border: 1px dashed red;
}

参数化

可以加默认值，可以不加

// 声明
.border-style(@width: 10px, @type: dotted, @color: red){
    border: @width @type @color;
}
//使用
.demo{
    .border-style()
}

编译结果：

.demo{
    border: 1px dashed red;
}

参数顺序

Mixins中的参数顺序可以不按照特定的顺序来传，可以按照参数名传参

.box-size(@width: 10px, @height: 10px) {
  width: @width;
  height: @height;
}

.demo {
  .box-size(@height: 20px);
}

编译结果

.demo {
  width: 10px;
  height: 20px;
}

!important关键词

.size {
    width: 100px;
    height: 100px;
}
.demo {
    .size()!important;
}

编译结果：

.demo {
    width: 100px!important;
    height: 100px!important;
}

@argument

@argument 代表调用 Mixins 时传入的所有参数。可以同时处理所有参数

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

div {
  .box-shadow(2px, 5px)
}

编译结果：

div {
  -webkit-box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  box-shadow: 2px 5px 1px #000;
}

继承 （Extend）

Extend 是 Less 语法中的一个伪类，可以继承其他样式类的全部样式

1. Extend 是为了解决样式表中重复的样式，这一点与其它语言中的继承功能相似
2. Extend 主要用于复用重复的样式类，可附加在选择器上或放置到样式集中

使用&:extend()实现继承

.button {
    width: 100px;
    height: 50px;
    text-align: center;
}
.primary-button{
    &:extend(.button);
    background-color: #409eff;
}

编译结果：

.button,
.primary-button {
  width: 100px;
  height: 50px;
  text-align: center;
}

.primary-button {
  background-color: #409eff;
}

继承多个样式类

.a {
  color: red;
}
.b {
  font-size: 16px;
}

.c {
  &:extend(.a, .b);
}

编译结果：

.a,
.c {
  color: red;
}
.b,
.c {
  font-size: 16px;
}

all关键字

不加all的情况下，只继承样式表的第一层，

加了all，可以理解为继承了样式表的所有，进行一个深度的继承

.a {
  .b {
    font-size: 16px;
  }
}
.c{
  &:extend(.a all);
}

以上样式是有嵌套结构的，

看下编译结果：

.a .b,
.c .b {
  font-size: 16px;
}

接下来看下不加all的编译结果：

.a,
.c {
  color: red;
}

对比两者：不加all，.c不会继承.a下面嵌套的样式

减小css代码体积

平常我们遇到重复的代码可能会这样写，将.a的样式粘贴到.b中，然后代码成了下面这样：

.a{
  color: #fff;
}

.b{
  color: #fff;
}

使用:extend()

.a, .b{
  color: #fff;
}

继承和混入的区别

相同点：两者都可以将classA的样式引入到classB中

不同点：

• 混入可以带参数调用，缺点是会有冗余代码
• 继承不会有冗余代码

合并（Merge）

逗号分割

合并结果进行逗号分割

声明一个合并样式函数minxin，并且在需要合并的属性后加上 + ，然后在引入 minxin 后，在被合并的属性后也加上+

.mixin() {
  box-shadow+: 0 0 10px 10px #333;
}

div {
  .mixin();
  box-shadow+: 0 0 10px 10px red;
}

编译结果：

div {
  box-shadow: 0 0 10px 10px #333, 0 0 10px 10px red;
}

空格分割

合并结果会进行空格分割

使用步骤同逗号分隔，将属性后的符号改为 +_ 即可。

.mixin(){
  transform+_: scale(2);
}
div{
  .mixin();
  transform+_: rotate(15deg);
}

编译结果

div {
  transform: scale(2) rotate(15deg);
}

映射（Maps）

// 声明一组map
#colors {
    primary: #409eff;
    success: #67c23a;
}
// 使用
.demo {
    color: #colors[primary]
}

编译结果：

.demo {
    color: #409eff;
}

转义字符（Escaping）

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

@min768: ~"(min-width: 768px)";

.demo {
  width: 100px;
  height: 100px;
  background-color: aqua;

  @media @min768 {
    background-color: red;
  }
}

编译结果：

.demo {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
@media (min-width: 768px) {
  .demo {
    background-color: red;
  }
}

less 3.5 之后可以简写为：

@min768: (min-width: 768px);

混合守卫（Mixin Guards）

根据条件进行判断

.mixin1 (@width) when (@width > 100px) {
  width: @width;
  height: 200px;
}

.mixin1 (@width) when (@width < 100px) {
  width: @width;
  height: 100px;
}

div {
  .mixin1(120px)
}

通过when关键字，进行条件判断。

编译结果：

div {
  width: 120px;
  height: 200px;
}

条件判断运算符

条件判断的运算符有这几个：>、>=、=、<、=<

条件逻辑运算符

适用于判断条件两个及以上时

• 使用逻辑运算符and进行关联，取并集：

类似中的&&

.minix (@width, @height) when (@width > 100) and (@height > 100) { ... }

• 使用, 运算符模拟or，其中一个成立即可：

类似js中的||

.minix (@width) when (@width > 20%) , (@width < 80%) { ... }

• 使用not关键字代表否定条件：

类似js中的!

.mixin3 (@width) when not (@b > 10%) { ... }

循环（Loops）

其他语言都是通过for关键字实现循环。但是less中并没有这种语法，二是通过自身调用，递归的方式实现循环

.create-columns(@l, @i: 1) when (@i <=@l) {
  .column-@{i} {
    width: (@i / @l * 100%);
  }
  .create-columns(@l, @i + 1)
}

.create-columns(4);

编译结果：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}