less 基础语法教程

2019-10-11 本文已影响0人 yxlwq

less入门

less笔记会随着时间进行更正

再次更新：2019/10/11 18:04

几个概念

less是什么？
- 一种css预编译处理语言，能使用变量，函数等功能，比css具有更强大的功能 - less的编译环境为客户端，不像sass这类预处理器需要在特殊环境下才能编译
less文件需要less预处理器编译成css文件后，才能在浏览器上运行
编译方法
- html中通过script标签在less文件之前引入less.js文件，对less文件进行自动编译成css
- 通过node下的lessc命令手动编译成css文件
- 在webpack中引入less-loader处理器自动编译less文件
- 提前编译好处大于线上编译
以.less为文件名后缀

less语法

变量

声明

@变量名:变量值;

引用

@变量名

  @color: red;
  *{
      color: @color;  // 引用less变量
  }

变量可运算，最左边的单位优先级最高

 @var1: 1rem;
 @var2: 1.5px;
 @var3: 1vh;
 @nowVar: @var1+@var2+@var3;   // @nowVar: 3.5rem

转义

～ "变量值"
使变量原样输出变量值

 @screenSize: ~"(max-width: 992px)";    // 定义转义
 a{
        @media screen and @screenSize{
            color: yellow;
        }
    }

编译成

@media screen and (max-width: 992px){
     a{
        color: yellow
    }
}

混合

混合相当于一个js函数
可以将一个规则集混入另一个规则集
可以使用类选择器或id选择器

普通混合

特点
less编译后，定义的混合会存在于less文件中

.mixins{    //定义混合
    color: red;
}
a{
    font-size: 1px;
    .mixins;    //混入混合
    //另一种写法：.mixins();
}

类函数混合

特点
less编译后，定义的混合不会存在less于文件中

.mixins(){    //定义混合
    color: red;
}
a{
    font-size: 1px;
    .mixins;    //混入混合
    //另一种写法：.mixins();
}

混合可以类似函数传递参数

.mixins(@color;@fontSize){    //定义混合
    color: @color;
    font-size: @fontSize;
}
a{
    @color: red;
    @fontSize: 16px;
    .mixins(@color;@fontSize);
}

嵌套

定义

按照html标签的包裹顺序，将选择器层层嵌套进行书写，易于以后查找和修改

html结构：
<body>
<div class="div1">
    <ul></ul>
</div>
<div class="div2">
</body>

less嵌套写法：
body{
    .div1{
        color: red;
        ul{
            color: black;
        }
    }
    .div2{
        color: yellow;
    }
}

less中的@media

选择器中的@media写法

.div1{
    @media (max-width: 576px){
        max-width: 576px; 
    }
}
.div2{
    @media (max-width: 992px){
        max-width: 768px; 
    }
}

less编译成

@media (max-width: 992px){
    .div2{
        max-width: 768px;
    }
}
@media (max-width: 576px){
    .div2{
        max-width: 576px;
    }
}

命名空间

当混合过多，需要同时命名多个相同名称的混合时，可以通过定义不同的命名空间来加以区分
同混合类似，可以用类选择器或id选择器
可对命名空间中的混合传入参数，但不可给命名空间传入参数，注意在命名空间内且在混合外定义的变量不会生效
命名空间引用时，不能加括号，等价于不能给命名空间传参
引用方式
- 命名空间的类选择器(id选择器)混合的类选择器(id选择器)()
- 命名空间的类选择器(id选择器)>混合的类选择器(id选择器)()
```
#Color(){
    #red(@color: yellow){
        color: @color;
    }
}
a{
    #Color#red();
    // 或者 #Color>#red();
}
```

映射(less版本大于3.5以上可使用)

类似于js类的属性

#colors() {
    primary: blue;
    secondary: green;
}
.button {
    color: #colors[primary];
    border: 1px solid #colors[secondary];
}

编译成

.button {
    color: blue;
    border: 1px solid green;
}

作用域
- 变量会懒加载，等待less文件加载完成后，会按照在当前区域，从下上至下查找声明的变量对应的值，后面声明的同区域的变量优先级高，当前区域未找到变量，向上一区域按照此规则继续查找，直至找到对应变量
```
例1：
@color: red;
a{
    @color: yellow;
    span{
        color: @color;  // 此时的color: black;
    }
    @color: black;
}
例2：
@color: red;
a{
    @color: yellow;
    color: @color;  // color: black
    @color: black;
}
    @color: pink;
```
注释
- less的两种注释符号编译处理方式不同
- /**/会原样复制到编译后的css文件中
- //会在编译后的css文件中被删除
导入

@import less文件路径;
- 导入其他less文件可以使用该less文件中的变量，混入,命名空间和映射

随手点个赞，谢谢大家

更多文章我的github

less 基础语法教程

less入门

几个概念

less语法

嵌套

命名空间

猜你喜欢

热点阅读

less 基础语法 教程

less入门

几个概念

less语法

嵌套

命名空间

猜你喜欢

热点阅读

less 基础语法教程