大家可以回想一下,上次学习less/sass是什么时候了?平时是不是除了嵌套、变量貌似也没用其他啥了?知识久了,部分内容也就遗忘了。但是学会的东西再捡起来是很快的!
是时候重新 坚挺 一下了!什么,坚挺?呸,什么玩意,重来。
是时候该重新新 硬 一下了!哦~?貌似也不对~硬一下???发刻~~~
是时候重新新 温习 一下了!!!嗯,这就说对了~
好,基本的安装就不提了,大家在在各种vue、react等项目,配置应该比谁都熟悉了。先说说和导入相关的吧,笔记使用的前提还是要导入的。
导入
- css的导入
// 1.必须放在所有其他规则前面,即导入语句放在最顶部
// 文件地址是相对路径
@import url('./test.css');
复制代码
- less的导入
// 文件地址是相对路径
// 没有url包裹地址
@import '../../styles/common.less';
// 可以省略.less的后缀
// 省略后作为less文件导入
@import '../../styles/common';
// 可以通过导入配置,定义更灵活的导入方式
// 基本使用
@import (配置1, 配置2 ……) '地址';
// eg1:将导入文件一律作为less文件处理
@import (less) './test.css';
// eg2: 一律是为css文件导入,无论文件名是什么
@import (less) './test.less' // 等同于@import url('./test.less');
// eg3: 多次导入只导入一次
// 这也是默认参数
@import (once) './test';
@import (once) './test';
// 最终只导入一次
复制代码
既然使用了less,那么所有的导入方式就统一成less的导入,不要混用;
所有的样式文件写成less,不要再使用css文件,保持统一。
变量
像less/sass/scss等这些css预处理器,给我们提供了很方便的一个特性就是可以在css中定义变量进行使用。比如我们可以将全局的主题色、辅色、描述色等定义成变量在所有样式文件中使用,这样即使设计的某些大范围的修改主题色的时候,我们修改起来也是很方便的。
- 基本用法
@开头用来定义变量,冒号后面为变量的值。
// 定义变量
@main-color: #f00;
@head: header;
@width: width;
// 我们将变量作为属性值使用
.header {
color: @main-color;
}
// 可以将变量作为css属性使用
.header {
@{width}: 100px;
}
// 也可以作为选择器使用
@{head} {
width: 100px;
}
// 等同于
.header {}
复制代码
- 变量只能定义一次,重复定义取最后定义的值。类似于js中的变量覆盖。
// 重复定义两个变量
@color1: red;
@color1: blue;
// 最终为蓝色
.test__less {
color: @color1;
}
复制代码
less的变量这个特性确实很好用,据说css4的变量提案也在如火如荼的进行中,希望尽快成为标准在各大浏览器普及吧!
嵌套
在以前不支持嵌套的时候,我们编写css往往需要一级一级的写,导致多些很多选择器,真的是刀耕火种的心酸!
不过BEM的css规范,从某种程度上减轻这个问题,但是BEM的规范也引发了很多小伙伴对它的吐槽吧!萝卜青菜、各有所爱。
less的嵌套,还是蛮好用的,可以很清晰的一眼看出css的结构和对应的html结构,也不用多写很多选择器。但是和BEM规范一起使用时,大家做好取舍吧。
.header-container {
.avatar {
width: 60px;
height: 60px;
}
.user-name {
}
}
复制代码
这个很简单就不多说了,就是支持嵌套的写法而已。
计算
less中允许+-*/的计算,不说个人而言,该特性用的不多,已知的值是没必要算的,但是对于未知的需要计算得到的,还是蛮好用的。
@fs: 12px;
.test__less {
.flex;
font-size: @fs * 2;
font-weight: 200 * 2;
}
// 编译结果
.text_test__less__UJwa4 {
display: flex;
font-size: 24px;
font-weight: 400;
}
复制代码
也不多说了,和小学加减法一样,看例子即可。
转译(原样输出)
转译,即不会对字符串内进行任何操作,而是原样输出。这样在某些我们不需要less执行操作对时候可以用到,例如calc属性。
.test__less {
color: ~"#f00";
}
// 输出:
.text_test__less__UJwa4 {
color: #f00;
}
// calc的实际例子
.test__less {
position: fixed;
top: 0;
height: calc(~"100vh - 40px")
}
// 编译
.text_test__less__UJwa4 {
position: fixed;
top: 0;
height: calc(100vh - 40px);
}
复制代码
关于原样输出,平时用的最多的还是像calc等这样需要原样输出的部分,因为如果你不加原样输出,那么less在编译阶段就会认为你的减号等操作符是需要计算的,就自动帮你去计算了,结果自然也是不对的。
函数
less内置了很多函数,例如Math、类型函数等等。
这块内容比较简单,但是也是比较多的,可以查看官网手册去了解一下吧。
命名空间和选择器
.head {
.avator(@width) {
width: @width;
}
}
.test__less {
/* 通过选择器选择到.avatar的样式 */
.head > .avator(20px);
}
/* test__less的编译结果 */
.text_test__less__UJwa4 {
width: 20px;
}
复制代码
扩展
less支持扩展语法,最终实现是在css中将几个不同的选择器,通过逗号隔开并列的写法。
参数实质是选择器(例如.head 也可以是.head .avator等),可以有多个参数。
// 定义普通的一个class
.head {
font-size: 12px;
}
// 定义另一哥普通的class
.foot {
font-weight: bold;
}
// 扩展的写法1:
// 将head和foot扩展到test上,最终使得test同时拥有head和foot的样式
.test:extend(.head, .foot) {
color: red;
}
// 扩展的写法2:
// 这两种是等效的
.test {
&:extend(.head, .foot);
color: red;
}
// 也可以给伪类添加
.test:hover {
&:extend(.head, .foot);
color: red;
}
复制代码
可以看到写法(1)和(2)编译后的结果,是在css中并列的写法:
以这里为例,本质都是使得.test
拥有.head
或.foot
的样式效果,而.head
或.foot
不会拥有.test
的样式效果。
extend拓展,很大程度上可以用来复用选择器减少编译后的css样式代码。
但是,实际css编写过程中,我们是推荐尽量减少样式的继承、减少绝对的层级嵌套、减少样式直接的相互依赖。
如此,才能在html结构的变化后减少css层级受到的影响、避免部分样式修改后影响到其他样式。
这也正是高内聚、低耦合
原则中低耦合
概念在css编写中的体现。即,模块直接的联系应该尽量弱化,这可以可以演变为css直接互相的依赖关系应该尽量弱化。
BEM规范也是推荐如此的做法。
Mixins混入
- 基本用法
通俗一些,有点类似于将其他class/id等看成是定义好的函数,这些函数执行后会输出一段样式,然后在其他函数(class/id等等样式)内部调用这些函数,然后得到他们输出的样式。
// 定义普通的两个class
.head {
font-size: 12px;
}
.foot {
font-weight: bold;
}
// 在test类内部混入head和foot
// 可以看到既可以使用括号,也可以不使用括号
.test {
// 类似于调用head函数得到他的样式
.head();
.foot;
}
复制代码
- 创建mixins
可以只创建,不输出mixins
// 将head变成一个mixins
.head () {
width: 100px;
}
// 类似于只定义了函数,但是没用到它,
// 那么就会在构建的阶段就被去冗掉了,
// 最终样式里,不会有如下样式:
.head {
width: 100px;
}
复制代码
- Mixins带参
支持传递多个参数,在调用mixins的给参数赋值,类似于函数的xing形参和实参:
// 定义一个mixins,携带了两个参数
.head(@fs, @color) {
font-size: @fs;
color: @color;
}
// 调用的时候,给mixins传递参数
.test {
.head(20px, blue);
}
复制代码
参数支持默认值,类似于es6中函数形参定义时给一个默认值一样:
// @color参数给一个默认值为red
.head(@fs, @color: red) {
font-size: @fs;
color: @color;
}
// 调用的时候,给mixins传递参数
.test {
.head(20px);
}
复制代码
参数顺序可以不一一对应:
// 例如,定义mixins时的参数是@fs和@color
.head(@fs, @color) {
font-size: @fs;
color: @color;
}
// 但是我使用的时候可以像下面这样,不按顺序传参数
// 最终效果也是一样的
.test {
// 没有按顺序传参
// 但是这时需要带上参数名再赋值
.head(@color: red, @fs: 20px);
}
复制代码
- 高级参数
@arguments在mixins中指代所有参数:
// 利用@arguments指代上面的三个参数
.head(@size, @type, @color) {
border: @arguments;
}
.test {
.head(1px, solid, red);
}
复制代码
@rest
扩展运算符
less中用...
作为扩展运算符,类似于es6的扩展运算符,但是有区别,指代后续的参数。
// 一般用@rest作为less的扩展运算符变量
// 用其他字符可能会引起相关的lint不通过
.head(@rest...) {
border: @rest;
}
.test {
.head(1px, solid, red);
}
// 另一种情况
// @size后面的才作为后续参数
.head(@size, @rest...) {
border: @size @rest;
}
.test {
.head(1px, solid, red);
}
复制代码
- mixins作为函数使用
mixins作为函数使用,将返回其内部定义的变量,在调用mixins的作用域内可以使用其返回的变量:
// 定义一个mixins
// 内部定义了两个变量
.head() {
@color1: red;
@color2: blue;
}
// head作为函数被调用
// test内部可以使用head内部定义的变量
// 即使先使用,后调用也可以
.test {
color: @color2;
.head();
}
复制代码
注意:less中的变量都是延长加载的,可以先使用,后面再定义。本质是less执行编译的时候,先分析语法树,然后先提取对应的变量,最后才是编译成css。
- 逻辑运算符
支持>,>=,=,=<,<
运算符,布尔只支持true。
// 定义head这个mixins,根据参数的值,展示不同内容
.head(@size) when(@size > 50) {
color: red;
}
.head(@size) when(@size < 50) {
color: blue;
}
// 传入参数80
.test {
.head(80);
}
复制代码
支持其他内置函数检测
// 只有@color参数为color类型时,才有下面的样式
.head(@color) when(iscolor(@color)) {
color: @color;
}
// 颜色会是红色
.test {
.head(#f00);
}
// 没有任何样式内容
.test {
.head(123);
}
复制代码
其他的还有检测函数还有:iscolor
isnumber
isstring
iskeyword
isurl
其他内容
- 父选择器
用&
符号表示父选择器
// 父选择器演示
.test {
// test hover时会是蓝色
&:hover {
color: blue;
}
// test后一个兄弟test,是红色
& + & {
color: red;
}
// test内部的test是黄色
& & {
color: yellow;
}
}
// 对应的html
<div className="test">
test
<div className="test">内部test</div>
</div>
<div className="test">
test
</div>
复制代码
父选择器应该是很常用的了,没必要多说。
文章参考
关于less的介绍就到这了,有兴趣的可以继续深入学习。如果你看到了这,可能前前后后也就几分钟的时间。但是花这几分钟可以将部分less已经忘记的特性重拾起来,相信也是一种收获吧。
最后,学而时习之,不亦说乎!祝小伙伴们在前端领域继续驰骋疆场、大杀四方吧!
百尺竿头、日进一步
我是愣锤,欢迎分享与交流。