阅读 439

【愣锤笔记】温故而知新、嗯!来花几分钟时间极速重温less高级核心特性

大家可以回想一下,上次学习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、类型函数等等。

这块内容比较简单,但是也是比较多的,可以查看官网手册去了解一下吧。

less函数手册

命名空间和选择器

.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中并列的写法:

image

以这里为例,本质都是使得.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);
}
复制代码

image

参数支持默认值,类似于es6中函数形参定义时给一个默认值一样:

// @color参数给一个默认值为red
.head(@fs, @color: red) {
  font-size: @fs;
  color: @color;
}
// 调用的时候,给mixins传递参数
.test {
  .head(20px);
}
复制代码

image

参数顺序可以不一一对应:

// 例如,定义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);
}
复制代码

image

@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);
}
复制代码

image

支持其他内置函数检测

// 只有@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>
复制代码

result

result

父选择器应该是很常用的了,没必要多说。

文章参考

less中文网

w3cschool的less教程

关于less的介绍就到这了,有兴趣的可以继续深入学习。如果你看到了这,可能前前后后也就几分钟的时间。但是花这几分钟可以将部分less已经忘记的特性重拾起来,相信也是一种收获吧。

最后,学而时习之,不亦说乎!祝小伙伴们在前端领域继续驰骋疆场、大杀四方吧!

百尺竿头、日进一步
我是愣锤,欢迎分享与交流。

关注下面的标签,发现更多相似文章
评论