W.T.的博客

Every day to be a little better

前端-CSS学习笔记17-CSS预处理器

发表于 更新于 分类于
本文字数： 4.4k 阅读时长 ≈ 4 分钟
Less

1. CSS编写的痛点

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

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

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

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

  • 所以有一种对CSS称呼是 “面向命名编程”

  • 社区为了解决CSS面临的大量问题, 出现了一系列的CSS预处理器(CSS preprocessor)

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

2. 常见的CSS预处理器

  • 目前使用较多的是三种预处理器

  • Sass/Scss

    • 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持，是属于Haml(一种模板系统)的一部分;  目前受LESS影响，已经进化到了全面兼容CSS的SCSS

  • Less

    • 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者更容易上手
    • 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用
    • 另外反过来也影响了SASS演变到了SCSS的时代
    • 著名的Twitter Bootstrap就是采用LESS做底层语言的，也包括React的UI框架AntDesign

  • Stylus

    • 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持
    • 语法偏向于Python, 使用率相对于Sass/Less少很多

3. 认识Less

  • 什么是Less

  • Less (Leaner Style Sheets 的缩写) 是一门CSS 扩展语言，并且兼容CSS

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

4. 编写Less代码

1
2
3
4
5
6
7
8
9
10
11
@mainColor: #fa0112;

.box {
  color: @mainColor;
  .desc {
    font-size: 12px;
  }
  &:hover {
    background-color: orange;
  }
}

5. less代码的编译

  • 代码如何被编译成CSS代码运行呢?
  • 方式一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译
    • 安装插件 npm install -g less
    • 检查是否安装 lessc -v
    • 编译文件 lessc xx.less xx.css
  • 方式二：通过VSCode插件来编译成CSS
    • VSCode安装插件 Easy LESS插件
    • vscode中新建xx.less，保存后文件夹下自动出现对应xx.css
  • 方式三：在线编译
  • 方式四：引入CDN的less编译代码，对less进行实时的处理
    • <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
  • 方式五：将less编译的js代码下载到本地，执行js代码对less进行编译

6. Less语法

6.1. Less兼容CSS

  • 可以在Less文件中编写所有的CSS代码
  • 只是将css的扩展名改成了.less结尾而已

6.2. 变量(Variables)

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

    • 比如使用到的主题颜色值，那么每次编写类似于#f3c258格式的语法
    • 一方面是记忆不太方便，需要重新编写或者拷贝样式
    • 另一方面如果主题颜色改变，需要修改大量的代码
    • 可以将常见的颜色或者字体等定义为变量来使用

  • 在Less中使用如下的格式来定义变量

    • @变量名: 变量值

  • 命名规范

    1. 必须有@为前缀
    2. 不能包含特殊字符
    3. 不能以数字开头
    4. 大小写敏感
1
2
3
4
5
6
7
@themeColor: orange;
@mainFontSize: 14px;

.box {
  color: @themeColor;
  font-size: @mainFontSize;
}

6.3. 嵌套(Nesting)

  • 当需要找到一个内层的元素时，往往需要嵌套很多层的选择器

  • Less提供了选择器的嵌套

  • 子元素直接写在父元素内

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* css写法 */
    #header .logo{
      width: 300px;
    }

    /* less写法 */
    #header{
      .logo{
        width: 300px;
      }
    }

  • 如果遇到 交集|伪类|伪元素选择器

    • 内层选择器的前面没有&符号，则它被解析为后代

    • 如果有&符号，它就被解析为父元素自身或父元素的伪类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* less */
    div{
        background-color: @color;
        &:hover{
            font-size: 12px;
        }
    }

    /* css */
    div {
      background-color: #333;
    }
    div:hover {
      font-size: 12px;
    }

6.4. 运算(Operations)

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

    • 运算符中间左右有个空格隔开
    • 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准
    • 如果单位换算无效或失去意义，则忽略单位
    1
    2
    3
    4
    @size 15px + 5
    div{
      font-size: @size;
    }

  • less除法运算失效

    • less4.0版本后，除法运算符如果在括号外面就不执行除法运算，只有在括号内才能看做是除法运算

    • 使用 ./ 也可进行强制除法运算

    • 解决

      1
      2
      3
      4
      5
      6
      7
      8
      9
      @size: (82rem / 5px);
      div{
          width: @size;
      }

      //======css========
      div {
        width: 16.4rem;
      }

6.5. 混合(Mixins)

  • 多个选择器中可能会有大量相同的代码

    • 可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用
    • 在less中提供了混入(Mixins)来帮助完成这样的操作

  • 混合(Mixin)是一种将一组属性从一个规则集(或混入)到另一个规则集的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .nowrap_ellipsis {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .box {
      height: 100px;
      .nowrap_ellipsis()
    }

  • 注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用

  • 混入也可以传入变量

    1
    2
    3
    .bordered(@borderWidth:2px) {
      border-top: @borderWidth solid red;
    }

6.6. 映射(Maps)

1
2
3
4
5
6
7
8
9
.colors() {
  primaryColor: #f00;
  secondColor: #0f0;
}

.box {
  color: .colors[primaryColor];
  background-color: .colors()[secondColor];
}

6.7. 混入和映射结合

  • 混入也可以当做一个自定义函数来使用
1
2
3
4
5
6
7
.pxToRem(@px) {
  result: (@px/@htmlFontSize)*1rem;
}
.box {
  width: .pxToRem(100)[result];
  font-size: .pxToRem(18)[result];
}

6.8. Less内置函数

1
2
3
4
5
6
7
8
.box {
  // red转为rgb值
  color: color(red);
  // 单位转换
  width: convert(100px,"in");
  //数学函数
  font-size: ceil(18.5px);
}

编译为

1
2
3
color: #ff0000;
width: 1.04166667in;
font-size: 19px;

6.9. 作用域(Scope)

  • 在查找一个变量时，首先在本地查找变量和混合(mixins)
  • 如果找不到，则从“父”级作用域继承
1
2
3
4
5
6
.box {
  .inner {
    font-size: @fontSize;
  }
  @fontSize: 15px;
}

6.10. 注释(Comments)

  • 在Less中，块注释和行注释都可以使用
1
2
3
4
5
6
7
.box {
  // width: 200px;
  /*
  color: red;
  font-size: 15px;
  */
}

6.11. 导入(Importing)

  • 导入的方式和CSS的用法是一致的
  • 导入一个 .less 文件，此文件中的所有变量就可以全部使用了
  • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉
1
@import url(style.less);

7. 认识Sass和Scss

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

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

    1
    2
    3
    4
    $primary-color: #333
    body {
    	color: $primary-color
    }

  • 它的语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的

  • SCSS的语法也包括变量、嵌套、混入、函数、操作符、作用域等

  • 通常也包括更为强大的控制语句、更灵活的函数、插值语法等

  • CS语法：https://sass-lang.com/guide

本文结束  感谢您的阅读