less学习之路

zoeLin
181 阅读6分钟

概念

什么是预编译？

Less的预编译是指在项目实际运行前，先将Less代码编译成CSS代码。这样做的好处是可以充分利用Less的各种特性，如变量、嵌套、混合等，以及提高网站性能。

Less预编译的流程通常是这样的：

  1. 编写Less源代码。
  2. 使用Less编译器将Less文件编译成CSS文件，生成的CSS文件会包含所有的样式信息。
  3. 在HTML中引入生成的CSS文件。

通过预编译，可以避免浏览器在解析Less代码时需要额外的计算和处理，从而提高页面加载速度和响应速度。同时，预编译也方便了开发人员对网站样式的管理和维护。

谁负责less的编译

Less的编译可以由多种工具完成，包括：

  1. 官方提供的Less.js：可以在浏览器端将Less代码实时编译成CSS。
  2. 命令行工具Lessc：可以将Less代码编译成CSS文件，支持命令行参数和配置文件。
  3. 集成开发环境（IDE）或编辑器插件：例如WebStorm、VSCode等，可以自动监听Less文件的变化并实时编译成CSS。
  4. webpack编译less。所需模块: style-loader css-loader less-loader less

总之，Less的编译方式非常灵活，可以根据项目需求选择不同的编译工具。

tips

在线less转css：www.imooc.com/wiki/run/81…

语法

样式导入

@import '../less/mixins.less';

@import 规则必须位于所有其他类型的规则之前。但是 Less 可以将 @import 语句放在任意位置。 但是规范起见，还是建议放在头部。 导入后，就可通过继承或方法调用，使用里面的样式

父选择器

// 在嵌套结构中 `&` 表示父选择器
a {
  color: blue;
  &:hover {
    color: green;
  }
}
// 输出css如下
a {
  color: blue;
}
a:hover {
  color: green;
}

// & 代表所有父选择器，而不仅仅是最接近的父选择器
.grand {
  .parent {
    & > & {
      color: red;
    }
  }
}
// 输出css如下：
.grand .parent > .grand .parent {
  color: red;
}

还有其他功能，比如：更改选择器顺序、排列组合

变量

重复出现的颜色，尺寸，选择器，字体名称和 URL等可以用变量，方便统一维护和修改。写法：@变量名

@link-color: #428bca;
link {
  color: @link-color;
}

使用场景：值变量、选择器变量、属性名变量、URL 变量、声明变量、变量运算

// 值变量
@link-size : 24px;
.link {
  color: @link-color;
  font-size: @link-size;
}

// 选择器变量
@sleName: container;
.@{sleName} {
  color: #fff;
}

// 属性名变量
@bg: background-color;
.container {
  @{bg}: red;
}

// url变量
@util: "../util"
.container {
  background-image: src("@{util}/a.png");
}

// 声明一段样式，使用时需要加括号 TODO:和mixins区别？
@bg: {background-color:red};
.container {
  @bg();
}

// 变量运算：加减运算以第一个单位为准，乘除运算要保持单位一致
@width: 20px;
.container {
  width: @width/2;
}

变量是延迟加载的，可以在使用后声明。但最好还是声明前置；变量采用就近原则。

@size: 20px;
.container {
  font-size: @size; // 就近原则，使用的是30px
  @size: 30px;
}

继承

是一个伪类，继承所匹配的全部样式。主要用于解决样式重复问题。两种使用方式：样式集上和选择器上。（注意：结尾一定要加分号）

.line {
  color: red;
}
// 在样式集上使用，&表示父级
.nav {
  &:extend(.line);
  background: blue;
}
// 在选择器上
.nav:extend(.line) {
  background: blue;
}

// 都是如下输出
.line，
.nav {
  color: red;
}
.nav {
  background: blue;
}

可以同时继承多个样式，也可以继承嵌套结构内的样式

// 同时继承
.back-image {
    background: red
}
.common-image {
    background: blue
}
.action {
    &:extend(.back-image, .common-image);
}
// 输出如下
.action,
.back-image {
  color: red;
}
.action,
.commom-image {
  background-color: blue;
}

// 继承嵌套结构
.b {
  color: red;
  .c {
    background: #8a2be2;
  }
}
.a {
  &:extend(.b all);
}
// 输出
.a,.b { 
  color: red;
}
.a .c, 
.b .c {
  background: #8a2be2;
}

mixins 混合

先定义一个样式类（.a），然后在引用的样式类（.mixin-class）中写入之前定义的样式类名称，并在名称后加上 “()” 来表示一个 Minxins。（注意：引用后要加 ; 结尾，避免语法错误）

  • 在 Mixins 后面标记 !important 关键字，则 Mixins 内的所有属性均会添加 !important 关键字
  • 在定义 Mixins 时在类的名称后加上 “()” ，这样 Mixins 所定义的样式就不会编译到输出的代码中
.color() { // 定义
  color: red;
  background: blue;
}
.background {
  .color() !important;
}
// 输出（当定义时不带括号 .color）
.background {
  color: red !important;
  background: blue !important;
}
// 输出（当定义时带括号.color() ）
.color{
    color: red;
    background: blue;
}
.background {
  color: red !important;
  background: blue !important;
}

如果复用的代码不用出现在编译后的代码中，推荐使用 Mixins 进行代码的复用，反之使用 :extend() 比较好。二者通过import引入后，可以直接使用其中的样式

scoped

目的：防止全局同名样式污染

原理：在标签加上v-data-hash（如果是组件，只会给根节点添加），再在选择器时加上对应 [data-v-hash] ，从而达到样式私有化，不污染全局。

image.png

  • 加了scoped，所有输出的css都会在最后加 [data-v-hash]

1682588105441.png

  • 为什么在外层无法修改子组件中的样式？
    • 因为v-data-hash生成的hash值只会作用于组件的根元素，并不会渗透到子组件的内部。如果想要修改的话，可以使用/deep/ 或者 >>> 或者 ::v-deep
  • 加了deep会怎么样
    • scoped 用于限制样式的作用范围在当前组件内部，deep 用于穿透到当前组件的子组件中去选择样式。而为了避免多个组件之间的样式冲突，scoped 会为组件的根元素添加一个唯一的属性。而当使用 deep 选择器时，会为匹配到的子元素也添加该属性，以确保样式选择器的正确性
<style scoped>
   .a /deep/ .b { /* ... */
   }
</style>

// 编译成：
.a[data-v-f3f3eg9] .b { /* ... */
}

预编译语言的对比

Less、Sass和Stylus都是流行的CSS预处理器，它们的主要优缺点如下：

Less的优点：

  • 语法较为简洁，易于学习和使用。
  • 集成度高，支持大量第三方工具和框架。
  • 变量作用域简单，适合小型项目。

Less的缺点：

  • 功能相对较少，扩展性不足。
  • 编译速度较慢。
  • 没有原生的迭代器和条件判断等功能。

Sass的优点：

  • 功能强大，支持复杂的逻辑操作、函数等。
  • 语法灵活，支持多种写法，可以根据自己的喜好选择。
  • 社区庞大，资源丰富。

Sass的缺点：

  • 学习曲线比较陡峭，需要一定时间的学习和适应。
  • 语法相对复杂，可读性较差。

Stylus的优点：

  • 语法极其简洁，可读性好。
  • 支持嵌套式语法，代码更加清晰易懂。
  • 工具链丰富，支持大量插件和框架。

Stylus的缺点：

  • 生态相对较小，不如Sass和Less成熟。
  • 学习资料相对较少，不太适合初学者。
avatar
文章
阅读
粉丝