CSS预处理器、移动端适配

最新推荐文章于 2025-06-12 00:02:45 发布

悠然予夏

最新推荐文章于 2025-06-12 00:02:45 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_52851967/article/details/128784340

1、预处理器概念

1.1、CSS编写的痛点

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

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

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

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

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

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

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

1.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少很多

2、Less

2.1、认识Less

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

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

2.2、less代码的编译

less代码如何被编译成CSS代码运行呢？

方式一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译；

方法二：通过VSCode插件来编译成CSS或者在线编译，Less Preview (online playground)

方式三：引入CDN的less编译代码，对less进行实时的处理；

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

方式四：将less编译的js代码下载到本地，执行js代码对less进行编译；

2.3、Less兼容CSS

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

2.4、变量（Variables）

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

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

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

@变量名: 变量值;

2.5、嵌套（Nesting）

在之前的项目中，当我们需要找到一个内层的元素时，往往需要嵌套很多层的选择器

Less提供了选择器的嵌套

特殊符号：& 表示当前选择器的父级

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>

    <link href="./less/02_less的语法-兼容CSS-变量-嵌套.less" rel="stylesheet/less">
    <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

</head>
<body>

    <!-- 1.兼容css -->
    <!-- <div class="box">
      我是box
    </div> -->

    <!-- 2.定义变量 -->
    <div class="box">
        <p class="pel">我是p元素</p>
        <h1>我是h1元素 <span class="keyword">关键字</span></h1>
        <p>
            我是一个大的段落
            <a class="link" href="#">百度一下</a>
        </p>
    </div>

    <!-- &符号的练习 -->
    <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>

</body>
</html>

less代码

// 1.兼容CSS代码
// .box {
//   width: 100px;
//   height: 100px;
//   background-color: orange;
//   font-size: 20px;
//   color: #fff;
// }

// 2.定义变量
@mainColor: #a40011;

@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;

// .box .pel {
//   color: @mainColor;
//   font-size: @normalFontSize;
// }

// .box h1 .keyword .section .list .item a .desc {
//   color: @mainColor;
//   font-size: @bigFontSize;
// }

// .box p .link {
//   color: @mainColor;
//   font-size: @smallFontSize;
// }

// 3.选择器的嵌套
.box {
  .pel {
    color: @mainColor;
    font-size: @normalFontSize;
  }

  h1 {
    .keyword {
      color: @mainColor;
      font-size: @bigFontSize;
    }
  }

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

      background-color: #0f0;

      &:hover {
        color: #00f;
      }
    }
  }
}

// &符号的练习
.list {
  .item {
    font-size: 20px;

    &:hover {
      color: @mainColor;
    }

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

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