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
网友评论