CSS - 第十三章：前沿技术与工具 - 《程序员的必备修养》

CSS 预处理器
- Sass 的基本语法与使用
- Less 的基本语法与使用
CSS 框架
- Bootstrap 的基本概念与使用
  - 安装 Bootstrap
  - 使用 Bootstrap
- Tailwind CSS 的基本概念与使用
现代 CSS 功能
- CSS 变量（Custom Properties）
  - 定义 CSS 变量
  - 使用 CSS 变量
- CSS Houdini
  - 安装 CSS Houdini
  - 使用 CSS Houdini

在本章中，我们将探讨一些最新的 CSS 技术和工具，这些工具可以大大提升你在开发中的效率和能力。我们将主要关注 CSS 预处理器、CSS 框架以及一些现代 CSS 功能。

CSS 预处理器

CSS 预处理器是使 CSS 代码更高效和可维护的工具。它们提供了变量、嵌套规则、混入（mixins）等功能，可以使你的 CSS 代码更具结构性和可重用性。我们将主要介绍 Sass 和 Less 这两种常见的 CSS 预处理器。

Sass 的基本语法与使用

安装 Sass

要使用 Sass，首先需要安装它。你可以通过以下命令安装 Sass：

npm install -g sass

使用 Sass

创建一个 .scss 文件，使用 Sass 的一些基本语法：

// 变量
$primary-color: #333;
// 嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
// 混入
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.box {
  @include border-radius(10px);
}

编译 Sass

你可以使用以下命令将 Sass 文件编译为 CSS 文件：

sass input.scss output.css

Less 的基本语法与使用

安装 Less

Less 也可以通过 npm 安装：

npm install -g less

使用 Less

创建一个 .less 文件，使用 Less 的一些基本语法：

// 变量
@primary-color: #333;
// 混入
.border-radius (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box {
  .border-radius(10px);
}
// 嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
    }
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
}

编译 Less

你可以使用以下命令将 Less 文件编译为 CSS 文件：

lessc input.less output.css

CSS 框架

CSS 框架提供了一套预定义的 CSS 样式和组件，可以帮助你快速搭建网页。我们将重点介绍 Bootstrap 和 Tailwind CSS。

Bootstrap 的基本概念与使用

安装 Bootstrap

你可以通过 npm 安装 Bootstrap：

npm install bootstrap

使用 Bootstrap

在你的 HTML 文件中引入 Bootstrap 的 CSS 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h1>Hello, Bootstrap!</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Tailwind CSS 的基本概念与使用

安装 Tailwind CSS

你可以通过 npm 安装 Tailwind CSS：

npm install tailwindcss
npx tailwindcss init

配置 Tailwind CSS

在 tailwind.config.js 文件中进行基本配置：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

使用 Tailwind CSS

在你的 CSS 文件中引入 Tailwind 的基本样式：

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

然后，编译你的 Tailwind CSS 文件：

npx tailwindcss build input.css -o output.css

在 HTML 文件中引入编译后的 CSS 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="output.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <div class="container mx-auto">
      <h1 class="text-3xl font-bold underline">Hello, Tailwind CSS!</h1>
    </div>
  </body>
</html>

现代 CSS 功能

CSS 变量（Custom Properties）

CSS 变量是一种定义和复用 CSS 值的方式，它们使得 CSS 更加动态和灵活。

定义 CSS 变量

你可以在 CSS 中使用 -- 语法定义变量：

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

使用 CSS 变量

在 CSS 代码中使用 var() 函数引用变量：

body {
  font-size: var(--font-size);
  color: var(--primary-color);
}

a {
  color: var(--secondary-color);
}

CSS Houdini

CSS Houdini 是一个让开发者扩展 CSS 的 API 集合。它允许你用 JavaScript 去扩展 CSS 功能，包括自定义属性、值和布局。

安装 CSS Houdini

你可以通过安装 polyfill 来使用 CSS Houdini：

npm install houdini-samples

使用 CSS Houdini

以下是一个简单的例子，展示如何创建一个自定义属性：

// 注册一个新的属性
CSS.registerProperty({
  name: "--my-custom-prop",
  syntax: "<color>",
  initialValue: "black",
  inherits: true,
});

在 CSS 中使用这个自定义属性：

.my-element {
  --my-custom-prop: red;
  color: var(--my-custom-prop);
}