前端less学习笔记之最后杂记

最新推荐文章于 2020-11-11 16:42:21 发布

三白学习前端

最新推荐文章于 2020-11-11 16:42:21 发布

阅读量493

点赞数

分类专栏：前端less

前端less 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端less最后的学习笔记

学习总结并转载自[ https://juejin.im/post/5a2bc28f6fb9a044fe464b19#heading-6] 和 [ https://hackycy.github.io/2019/04/15/Less入门/]
感谢网络上的博主
这篇文章记载不全，需要去官网查询[ https://www.html.cn/doc/less/features/#extend-feature]

一. 引入文件：

使用方法: @import ‘less文件名.less’ 可以省略后缀名 @import 的位置可随意放。
在less中引入css文件：不能混合css的规则到项目中，编译后原样输出“@import xxx.css”，并且引入时不能省略后缀名
带参数引入：为了在将Less文件编译生成CSS文件时，提高对外部文件的操作灵活性，还为@import指令提供了一些配置项。语法为：@import (keyword) “filename”; 如：@import(reference) ‘main.less’

选项(keyword)	含义
reference	使用文件，不会添加把导入的文件编译到最终输出中只引用。（即，文件作为样式库使用）
inline	对文件的内容不作任何处理，直接输出只引用。
less	无论文件的扩展名是什么，都将作为LESS文件被输出
css	无论文件的扩展名是什么，都将作为CSS文件被输出
once	文件仅被导入一次（这也是默认行为）而随后的导入文件的重复代码都不会解析。
multiple	多个同名文件可以被导入
css	无论文件的扩展名是什么，都将作为CSS文件被输出

注意：
- @import 和 keyword 之间有空格
- 一个@import指令可以使用一个或多个配置项，当使用多个配置项时，各配置项之间用逗号隔开。如：@import (optional, reference) “foo.less”;

二. 方法使用 !impotrant ：

提升权重优先级为最高（尽量避免使用)。
在调用的混合集后面追加 !important 关键字。混合集中所有属性都继承!important

//less
     .border{
        border: solid 1px red;
        margin: 50px;
      }
      #main{
       .border() !important;
      }
//CSS 
      #main {
         border: solid 1px red !important;
         margin: 50px !important;
      }

三. 条件表达式

Less使用关键字 when 而不是 if/else来实现条件判断
表达式中可以使用比较运算符、逻辑运算符、或检查函数来进行条件判断。
比较运算符：Less包含五个比较运算符：<、>、<=、>=、=，
注意：可以使用比较运算符（=）来比较数字，字符串、标识符等，而其余的运算符只能与数字一起使用。如，以下Less代码：

     // less：
         .min(@a) when (@a > 40px){
           a: @a;
       }
       // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
       .min-two(@color,@pad) when (@color = #033) and (@pad > 10px){
           color:@color;
           padding: @pad;
       }
       // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
       .min-three(@color,@mt) when (@color = #000), (@mt > 20px){
           color:@color;
           margin-top: @mt;
       }
       // not 运算符，相当于 非运算 !，条件为 不符合才会执行
       .min-four(@a) when not (@a > 16px){
           font-size:@a;
       }
       // 特点： not 可以使 >= 符号进行颜色进制比较 ，不加 not ，不可以比较
       .background(@color) when not (@color>=#222){
           b:@color;
       }
       h1{
           .min(50px);
           .min-two(#033, 20px);
           .min-three(#033, 25px);
           .min-four(14px);
           .background(#333);
       }
      // css:
       h1 {
           a: 50px;

           padding: 20px;

           color: #033;

           margin-top: 25px;

           font-size: 14px;

           b: #333;
         }

以下是常见的类型检查函数：
iscolor：是否为颜色值。
isnumber：是否为数值。
isstring：是否为字符串。
iskeyword：是否为关键字。
isurl：是否为URL字符串。
以下是常见的单位检查函数：
ispixel：是否为像素单位。
ispercentage：是否为百分比。
isem：是否为em单位。
isunit：是否为单位。
```
  如：.mixin (@a, @b: 0) when (isnumber(@a)) { ... }
```

四.不定参数

如果你希望你的方法接受数量不定的参数，你可以使用… ，犹如 ES6 的扩展运算符。

    //less:
        .boxShadow(...){
            box-shadow: @arguments;
        }
        div{
            .boxShadow(1px,4px,30px,red);
        }
   //css:
        div {
            box-shadow: 1px 4px 30px red;
        }

五. 循环

混合可以调用自身，当一个混合递归调用自身就构成循环结构。

  //less：
    .wrap(@count) when (@count <= 5){
        .h-@{count}{
            padding: 5px;
        }
        .wrap(@count + 1);
    }
    .div5{
        .wrap(1);
    }
 // css：
    .div5 .h-1 {
        padding: 5px;
      }
      .div5 .h-2 {
        padding: 5px;
      }
      .div5 .h-3 {
        padding: 5px;
      }
      .div5 .h-4 {
        padding: 5px;
      }
      .div5 .h-5 {
        padding: 5px;
      }

六.属性拼接：将多条属性合并为一条

+_ 代表的是空格；+ 代表的是逗号。
需要拼接的属性需要加 +_ 或 + 这两个符号。

属性两两之间从上到下拼接，拼接成空格还是逗号，取决去，两两之间的第二个拼接的属性是 +_ 还是 +；前一个随便。

 // less
 .div6(){
     box-shadow+_: 1px 2px 1px 1px red;
 }
 #main{
     box-shadow+: inset 0 0 10px #575;
     box-shadow+_: inset 0 0 10px #565;
     box-shadow+: inset 0 0 10px #595;
     .div6;
 }
 // css：
 #main {
     box-shadow: inset 0 0 10px #575 inset 0 0 10px #565, inset 0 0 10px #595 1px 2px 1px 1px red;
   }

七.避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法。要输出这样的值我们可以在字符串前加上一个 ~ 可以和 less 变量拼接。
如：~“circle-@{i}”

       //less
           .con(@a){
            padding: ~"cicle-@{a}";
            width:~'calc(300px-30px)';
          }
          .wra{
            .con(5);
          }
      // css：
          .wra {
            padding: cicle-5;
            width: calc(300px-30px);
          }

八. 继承：

extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式。
注意：所继承样式只能是不带参数甚至不能带括号的混合或者只能是 css，不如混合灵活。

extend 关键字的使用：
（1） extend有两种语法格式。注意： Selector有多种参数，参考官网

         一种是：
         <selector>:extend(<Selector>) { }
         
         另一种是：
         <selector> {
             &:extend(<Selector>);
         }

    //例子：less
         .inline{
             color: blue;
         }
         nav ul:extend(.inline){
         }
    // css：
         .inline,
         nav ul {
           color: blue;
           }
           ```

一个选择器还可以继承多个选择器的属性，只需写多个 :extend 语句就可以了。如，.e 同时继承了 .f 和 .g 的属性：

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

为了方便，Less允许仅使用一个 :extend 语句，只需在括号中提供用逗号隔开的选择器列表即可。什么两个 :extend 语句的等价写法为：

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

all 全局搜索替换：使用选择器匹配到的全部声明。

 //less
       .block:hover{
           color: #000;
       }
       .c{
           &:extend(.block all);
       }
   // css:
       .block:hover,
       .c:hover {
           color: #000;
       }

从表面看来，extend 与方法最大的差别，就是 extend 是同个选择器共用同一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性。方法示例与上面的 extend 进行对比：

    //less
        .Method{
            width: 200px;
            &:after {
                content:"Less is good!";
            }
          }
          #main{
            &:extend(.Method);
          }
          #wrap{
            .Method;
          }
    // css：
          .Method,
          #main {
            width: 200px;
          }
          .Method:after {
            content: "Less is good!";
          }
          #wrap {
            width: 200px;
          }
          #wrap:after {
            content: "Less is good!";
          }