less学习笔记

最新推荐文章于 2024-11-01 16:51:47 发布

卡布达蝎子莱莱

最新推荐文章于 2024-11-01 16:51:47 发布

阅读量130

点赞数

分类专栏： css less 文章标签： less

本文链接：https://blog.csdn.net/qq_36787461/article/details/104265498

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

less

1 篇文章 0 订阅

订阅专栏

一、CSS预编译

常见的css预编译器有三种：less、sass、stylus。

Bootstrap使用的是less，想看bootstrap源码的话先学习less，大概2个小时就搞定less。

二、Less

是css的预编译器，扩展了css语言；增加了变量、mixin、函数等特性，使css更易维护和扩展；既可以在客户端运行，也可在浏览器端运行。它不是一个直接使用的语言，而是编译成CSS再加以使用。

三、功能

注释：有行注释（// xxx）和块注释(/* xxx */)，注意行注释不会被编译到css文件中，而块注释使可以编译到css文件中的。
变量：使用@声明一个变量
```
@color: pink;
```
【注】a. 作为选择器和属性名，使用@{selectorName}的形式； b.作为URL，使用@{url}; c. 变量有延迟加载； d.变量使块级作用域。
嵌套规则：a. 基本的嵌套规则，和html的嵌套关系一致（父子关系）; b. &的使用（兄弟或者说平级关系）。
```
less中的写法：
.container {
    &:hover {
        color: #ccc;
    }
}


解析为：
.container:hover {
    color: ccc;
}
```
混合：将一系列属性从一个规则集引入到另一个规则集的方式。（个人理解为js函数的调用） a. 普通混合 b. 不带参数的混合 c. 带参数的混合 d. 带有默认值参数得到混合 e. 带多个参数的混合 f. 命名参数(可使用@color:pink；来指定传入对应的形参 ) g. 匹配模式(eg:三角形的方向) h. arguments变量

less的运算：加减乘除

width: (100 + 100px); // 只需要一个数带单位即可

css3中有cale()属性

继承：性能比混合高，灵活度比混合低

// 混合代码
.juzhong {  // 定义的是类，不是混合
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.box:extend(.juzhong) {}
.box { &:extend(.juzhong)}
.box { &:extend(.juzhong all)}

【注】同名混合名（@_，param1, param2...）第一个参数是匹配符，后面必须带上同名混合的形参，每次会自动调用该混合。