less 随手记

刺骨的言语ヽ痛彻心扉 2022-05-06 03:08 222阅读 0赞

### less 随手记 ###

*  使用
 *  变量
 *   *  普通值变量
     *  选择器变量
     *  url 变量
     *  声明变量
     *  变量运算
     *  变量作用域
 *  嵌套
 *   *  普通嵌套
     *  & 的作用
     *  媒体查询
 *  混合
 *   *  普通混合
     *  无参数的混合
     *  默认参数的混合
     *  命名参数
     *  匹配模式
     *  arguments
     *  方法使用 important！
 *  继承
 *   *  all 全局搜索替换
 *  导入
 *   *  导入文件的特性
 *  函数
 *  注释
 *  避免编译

本文是 css 的预处理语言 less 的学习笔记，简单记录 less 的用法及知识点；

# 使用 #

**less** 可以同**css** 一样，直接在**style** 标签中写，或单独存储 **.less** 文件 ， 在 **html** 文件的**head** 标签中引用。  
**注意：link 标签一定要在 script 标签前边，rel="stylesheet/less"**  
在 浏览器中，直接使用需要在**head** 标签中引入文件 **less.js**

在 node 中 通过 npm 安装  
webpack中需要配合 less-loader 使用；

# 变量 #

## 普通值变量 ##

变量定义采用 **@** 变量名 的形式，变量值不需要加引号 **@color：\#333；**  
变量引用直接在属性后用 **@** 变量名 **\#wrap \{ color：@color；\}**  
**项目中，可以单独将常用变量封装在一个文件中，方便后期维护或更新。**

## 选择器变量 ##

选择器变量就是将 class 名或 id 名 声明为变量，可以只赋值 class 或 id 名，也可带有选择符；  
如： **@selector：\#wrap** 引用时直接 **@\{变量名\}** 即可；  
如果变量值只是名，那么引用时需要添加选择符， 如 **@Wrap：wrap；** 用时： **.@ \{wrap\}**

## url 变量 ##

用于图片或者是文件路径，定义方式相同，但变量值需要加引号 @images："…/img" ;  
使用时 **@\{变量名\}； background:url(@\{images\}/dog.png)；**

## 声明变量 ##

声明变量的结构是 **@name:\{属性：值；\}** ，即一句样式代码或一段样式代码；  
使用时 **@name（）；** 类似于方法调用；

## 变量运算 ##

加减法运算时，以第一个数据的单位为基准；  
乘除法时，单位必须统一；

## 变量作用域 ##

就近原则，一个 **\{\}** 为一个作用域； **\{\}** 里的变量调用时先查找 **\{\}** 里边，如果没有从外边查找；

# 嵌套 #

## 普通嵌套 ##

按照html 文档中的 dom 节点层级来进行嵌套。

## & 的作用 ##

**&**： 代表的上一层选择器的名字，就是父级元素；

## 媒体查询 ##

对于媒体查询，css 中媒体查询的样式和单独的样式需要分开写，less 则不用；直接在 \{\} 中写媒体查询样式；

# 混合 #

## 普通混合 ##

混合定义 .car \{//一些样式\} ，这种混合会编译到生成的css 文件中，无用而且造成 css 文件变大。所以不建议使用这种混合；

## 无参数的混合 ##

混合定义 .car \{//一些样式\} 与 .car()\{//一些样式\} 两种混合是等价的，为了避免混淆，建议后者写法；而且后者写法不会再编译进生成的css 文件；  
调用时也是， .car; 与 .car(); 等价；  
**混合的前缀，. 与 \# 皆可，看个人习惯.**

## 默认参数的混合 ##

混合可以有默认参数，如果混合调用时没有参数，可使用默认参数；  
传入的参数必须有单位；  
@arguments 指代的是全部参数。

## 命名参数 ##

在调用混合的时候传入带变量名称，这样可以直接将这个变量值覆盖；

## 匹配模式 ##

调用时，会从第一个参数匹配，选取匹配程度最高的，如果这些混合的匹配程度都相同，那么就全部选择，出现样式覆盖替换，编译后的样式所有包含所有混合样式。  
如果匹配的参数是变量，则匹配，

## arguments ##

## 方法使用 important！ ##

在混合名后边加上 ！important ，就会为混合中的所有属性添加上 ！important；

# 继承 #

extend 是less 的一个伪类，使用后，当前的元素可以继承所匹配的元素的全部声明样式；  
使用方法，在继承元素中 &：extend（被继承元素）

## all 全局搜索替换 ##

会将所i匹配的元素的全部样式复制一份  
**继承与方法最大的区别就是 继承不重新声明自己的样式，只是将需要继承的元素添加在被继承的元素的样式声明，而 方法，需要重新声明自己的样式。节约了代码，减少代码重复。**

# 导入 #

导入less 文件，可省略后缀 import “main” 等价于 import “main.less”  
import 的位置没有强制要求放在文档开头，可以随意防止，

## 导入文件的特性 ##

1.  reference 特性，使用引入的less 文件，但是不会编译到最终的输出中。
2.  once @import 语句的默认行为。这表明相同的文件只会被导入一次，之后再导入的就都不会解析。
3.  multiple 允许导入多个同名文件。

# 函数 #

1.  判断类型函数  
    isnumber()  
    iscolor()  
    isurl()
2.  颜色操作  
    saturate() 增加饱和度  
    lighten（）增加颜色亮度  
    darken（）降低颜色亮度  
    fade（）给颜色设置透明度  
    mix（）根据比例混合两种颜色
3.  数学函数  
    ceil （）向上取整  
    floor（）向下去整  
    percentage（）将浮点数转换为百分比字符串  
    round（）四舍五入  
    sqrt（）计算一个数的平方根  
    abs（）数的绝对值  
    pow（）计算乘方  
    更多参数请查看[less 函数][less]

# 注释 #

// 单行注释，不会在编译后的css 文件中显示。  
/\*\*/ 多行注释，会在编译后的css 文件显示。

# 避免编译 #

#wrap{
        width:~"calc(200px + 700px)";
    }

通过这种方式，就不会进行编译。

[less]: http://lesscss.cn/functions/