Tabler 阿狗工具

  1. 在线工具
  2. 好文
  3. 3. CSS预处理器Less、Scss
3. CSS预处理器Less、Scss
2024-04-09 18:50:15  阅读数 1842

1. CSS编写的痛点

  1. CSS作为一种样式语言, 本身用来给HTML元素添加样式是没有问题的.

  2. 但是目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作.

  3. 随着代码量的增加, 必然会造成很多的编写不便：

    • 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便；
    • 比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 那么需要修改大量代码, 可维护性很差; (比如主题颜色)
    • 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆;
    • 等等一系列的问题；

2.CSS预处理器(CSS_preprocessor)

  1. CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序;
  2. 市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
  3. 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS;

3. 常见的CSS预处理器

image.png

4. Less

Less （Leaner Style Sheets 的缩写） 是一门CSS 扩展语言, 并且兼容CSS。

  1. Less增加了很多相比于CSS更好用的特性;
  2. 比如定义变量、混入、嵌套、计算等等；
  3. Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）；

4.1 less代码的编译

image.png 
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

easy less 保存less文件以后，就自动在当前文件夹生成css文件。

4.1 语法一：Less兼容CSS

◼ Less语法一：Less是兼容CSS的

  1. 所以我们可以在Less文件中编写所有的CSS代码；

  2. 只是将css的扩展名改成了.less结尾而已；


    image.png

4.2 语法二 – 变量（Variables）

◼ 在一个大型的网页项目中，我们CSS使用到的某几种属性值往往是特定的

  1. 比如我们使用到的主题颜色值，那么每次编写类似于#f3c258格式的语法；
  2. 一方面是记忆不太方便，需要重新编写或者拷贝样式；
  3. 另一方面如果有一天主题颜色改变，我们需要修改大量的代码；

  4. 所以，我们可以将常见的颜色或者字体等定义为变量来使用；
    ◼ 在Less中使用如下的格式来定义变量；
    @变量名: 变量值;


    image.png

4.3 语法三 – 嵌套（Nesting）

image.png

可以理解为&就是外面这个选择器的名称

    a.link {
      color: @mainColor;
      font-size: @smallFontSize;

      background-color: #0f0;
      
      &:hover {
        color: #00f;
      }
    }
相当于a.link:hover

  <!-- &符号的练习 -->
  <ul class="list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
  </ul>
// &符号的练习
.list {
  .item {
    font-size: 20px;

    &:hover {
      color: @mainColor;
    }

    &:nth-child(1) {
      color: orange;
    }

    &:nth-child(2) {
      color: #00f;
    }
  }
}

4.4 语法四 – 运算（Operations）

◼ 在Less中，算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

  1. 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
    css中calc自带的加减乘除运算比较弱，不支持calc(10em+20px）之类的运算的。less中的加减乘除比较强大。加减乘除单位不一样的话，时会对单位进行换算的。10em+20px，计算的结果以最左侧操作数的单位类型为准；也就是em。

  2. 如果单位换算无效或失去意义，则忽略单位；


    image.png

4.5 语法五 – 混合（Mixins）

◼ 在原来的CSS编写过程中，多个选择器中可能会有大量相同的代码

  1. 我们希望可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；

  2. 在less中提供了混入（Mixins）来帮助我们完成这样的操作；
    ◼ 混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。


    image.png

    ◼ 注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用；
    一般会在less的文件夹里面创建一个mixins.less文件，里面放的都是混入的方法的定义。
    在日常开发中，推荐类选择器，因为id选择器不能重复，多人开发容易冲突。

带参数的情况：

// 2.2.混入是可以传递参数(定义变量)的
.box_border(@borderWidth: 5px, @borderColor: purple) {
  border: @borderWidth solid @borderColor;
}

.box1 {
  background-color: #f00;
  .box_border();
}

.box2 {
  width: 150px;
  background-color: #0f0;
  .box_border(10px, orange);
}

4.6 Less语法六：映射（Maps）

image.png 
// 2.3.混入和映射(Map)结合使用
// 作用: 弥补less中不能自定义函数的缺陷
.box_size {
  width: 100px;
  height: 100px;
}

.box1 {
  width: .box_size() [width];
  /* 只需要 .box_size里面的width
  如果全部需要，就直接混入
  .box_size()
  */
  background-color: #f00;
}

4.7 语法七：extend继承

https://lesscss.org/less-preview/

  1. 和mixins作用类似，用于复用代码；

  2. 和mixins相比，继承代码最终会转化成并集选择器；


    image.png

混合

.box_border {
  border: 5px solid #f00;
}

.box {
  width: 100px;
  background-color: orange;

   .box_border();
}
转成css后
.box_border {
  border: 5px solid #f00;
}
.box {
  width: 100px;
  background-color: orange;
  border: 5px solid #f00;
}

继承

.box_border {
  border: 5px solid #f00;
}

.box {
  width: 100px;
  background-color: orange;

 &:extend(.box_border);
}
转成css后
.box_border,
.box {
  border: 5px solid #f00;
}
.box {
  width: 100px;
  background-color: orange;
}

总结：
混合是把调用的名字插入替换成里面的内容
继承代码最终会转化成并集选择器。一般用混入多，混入可以传入参数。
混入的话，转成css后阅读性更多。

4.8 语法八：Less内置函数

  1. Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
  2. 内置函数手册：https://less.bootcss.com/functions/
    image.png

4.9 语法九：作用域（Scope）

  1. 在查找一个变量时，首先在本地查找变量和混合（mixins）；

  2. 如果找不到，则从“父”级作用域继承；
    如果一个变量在全局有定义，在父元素有定义，在爷爷元素有定义，儿子就是使用距离它最近的变量，也就是父亲里面的，父亲没有就是用爷爷的。自己里面有这个变量，就使用自己的。就近原则。


    image.png

    如果自己混入了一个
    .box_mixin {
    @mainColor: orange;
    }
    这个mainColor属性就插入到自己里面了，
    然后自己的颜色就是这个orange了。不去找父辈元素里面的这个变量了。

4.10 语法十：注释（Comments）

在Less中，块注释和行注释都可以使用
// 单行注释
/* 多行注释 */

4.11 语法十一：导入（Importing）

  1. 导入的方式和CSS的用法是一致的；
  2. 导入一个 .less 文件，此文件中的所有变量就可以全部使用了；
  3. 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉；

5.认识Sass和Scss

  1. 事实上，最初Sass 是Haml的一部分，Haml 是一种模板系统，由 Ruby 开发者设计和开发。

  2. 所以，Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进；


    image.png
  3. 我们会发现它的语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的。
  4. 目前在前端学习SCSS直接学习SCSS即可：
    • SCSS的语法也包括变量、嵌套、混入、函数、操作符、作用域等；
    • 通常也包括更为强大的控制语句、更灵活的函数、插值语法等；
    • 大家可以根据之前学习的less语法来学习一些SCS语法；
    • https://sass-lang.com/guide