《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）

文章目录

[7.1 Sass：更高效的 CSS 编写](#7.1 Sass：更高效的 CSS 编写)
- [7.1.1 基础知识](#7.1.1 基础知识)
- [7.1.2 重点案例：主题颜色和字体管理](#7.1.2 重点案例：主题颜色和字体管理)
- [7.1.3 拓展案例 1：响应式辅助类](#7.1.3 拓展案例 1：响应式辅助类)
- [7.1.4 拓展案例 2：深色模式支持](#7.1.4 拓展案例 2：深色模式支持)
[7.2 Bootstrap：快速原型设计和开发](#7.2 Bootstrap：快速原型设计和开发)
- [7.2.1 基础知识](#7.2.1 基础知识)
- [7.2.2 重点案例：构建响应式导航栏](#7.2.2 重点案例：构建响应式导航栏)
- [7.2.3 拓展案例 1：使用卡片组件展示内容](#7.2.3 拓展案例 1：使用卡片组件展示内容)
- [7.2.4 拓展案例 2：定制 Bootstrap 主题](#7.2.4 拓展案例 2：定制 Bootstrap 主题)
[7.3 Tailwind CSS：实用主义的 CSS 框架](#7.3 Tailwind CSS：实用主义的 CSS 框架)
- [7.3.1 基础知识](#7.3.1 基础知识)
- [7.3.2 重点案例：构建一个响应式导航菜单](#7.3.2 重点案例：构建一个响应式导航菜单)
- [7.3.3 拓展案例 1：创建一个带有卡片布局的网格](#7.3.3 拓展案例 1：创建一个带有卡片布局的网格)
- [7.3.4 拓展案例 2：自定义按钮样式](#7.3.4 拓展案例 2：自定义按钮样式)

7.1 Sass：更高效的 CSS 编写

Sass（Syntactically Awesome Stylesheets）是一个强大的CSS扩展语言，它引入了许多有用的特性，如变量、嵌套、混入（Mixins）、继承（Inheritance）、和模块（Modules），从而使得CSS的编写变得更加高效和可维护。

7.1.1 基础知识

变量：允许你存储信息，比如颜色、字体堆或任何CSS值，使得你能够在整个样式表中重用它们。
嵌套：让你能够在一个选择器内嵌套另一个选择器的样式，这样可以减少代码的重复并保持样式表的清晰。
混入（Mixins）：是可以重用的代码块，可以接受参数，使得你可以定义一组可复用的样式。
继承（Inheritance）：让你可以基于一个选择器集继承另一个的样式，有助于保持你的样式表的DRY（Don't Repeat Yourself）。
模块（Modules）：Sass 1.23.0引入的新特性，允许你将Sass代码分割成更小的、可维护的片段。

7.1.2 重点案例：主题颜色和字体管理

假设你正在开发一个需要支持多种主题颜色和字体的网站，Sass的变量和混入可以使这项工作变得简单。

Sass 样式：

scss 复制代码

// 定义变量
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-stack: Helvetica, sans-serif;

// 使用变量
body {
  font-family: $font-stack;
  color: $primary-color;
}

.button {
  @mixin button-variant($color) {
    background-color: $color;
    border: 1px solid darken($color, 5%);
    &:hover {
      background-color: lighten($color, 5%);
    }
  }
  @include button-variant($primary-color);
}

通过定义颜色和字体变量以及按钮的混入，我们可以轻松地调整和应用主题样式。

7.1.3 拓展案例 1：响应式辅助类

利用Sass的混入和循环，我们可以创建一系列响应式辅助类，用于快速调整元素的间距、大小等。

Sass 样式：

scss 复制代码

@mixin responsive-margin($property, $values) {
  @each $size, $value in $values {
    .m-#{$property}-#{$size} {
      margin-#{$property}: $value;
    }
  }
}

@include responsive-margin(left, ('sm': 5px, 'md': 10px, 'lg': 15px));

这段代码通过混入和循环生成了一系列关于左边距的响应式辅助类。

7.1.4 拓展案例 2：深色模式支持

使用Sass的变量和条件语句，我们可以为网站添加深色模式支持，让用户在不同的视觉模式之间切换。

Sass 样式：

scss 复制代码

$light-theme: (
  background: #fff,
  text: #000,
);

$dark-theme: (
  background: #333,
  text: #fff,
);

body {
  @if $theme == dark {
    background-color: map-get($dark-theme, background);
    color: map-get($dark-theme, text);
  } @else {
    background-color: map-get($light-theme, background);
    color: map-get($light-theme, text);
  }
}

这段代码通过条件语句切换深色和浅色主题的样式设置。

通过掌握Sass，你的CSS编写将变得更加高效、组织化和强大。无论是管理复杂的样式系统、创建可复用的UI组件，还是实现主题切换功能，Sass都能让这些任务变得轻而易举。让我们开始利用Sass的高级特性，为我们的网站设计注入更多的活力和灵活性吧！

7.2 Bootstrap：快速原型设计和开发

Bootstrap是一个广受欢迎的前端框架，专为快速开发响应式和移动优先的网页而设计。它提供了一套丰富的HTML、CSS和JavaScript组件，帮助设计师和开发者快速构建整洁、功能丰富的网站。

7.2.1 基础知识

网格系统：Bootstrap的网格系统允许你通过行（rows）和列（columns）快速创建布局，确保布局在不同设备上的兼容性和响应性。
组件库：Bootstrap提供了一系列预制的组件，如按钮、导航栏、模态窗口、卡片等，可以直接在项目中使用。
实用工具类：提供了大量的实用工具类，用于调整边距、填充、字体大小、对齐方式等，提高开发效率。
定制性：Bootstrap允许通过Sass变量和混入来定制框架，使得开发的网站符合品牌的视觉标准。

7.2.2 重点案例：构建响应式导航栏

假设你需要为网站创建一个响应式导航栏，Bootstrap的导航组件能够让这个任务变得轻而易举。

HTML 结构：

html 复制代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <!-- 更多导航项 -->
    </ul>
  </div>
</nav>

通过使用Bootstrap的导航栏组件，你可以快速实现一个在移动设备上友好的、可折叠的导航栏。

7.2.3 拓展案例 1：使用卡片组件展示内容

卡片组件是展示内容的理想选择，无论是产品、文章还是个人资料。

HTML 结构：

html 复制代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

通过简单的HTML标记，Bootstrap使创建具有吸引力的卡片变得非常简单。

7.2.4 拓展案例 2：定制 Bootstrap 主题

定制Bootstrap以符合你的品牌标准是提升网站专业度的关键。

Sass 定制：

scss 复制代码

// 自定义变量
$theme-colors: (
  "primary": #007bff,
  "success": #28a745,
  "info": #17a2b8
);

// 引入Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

通过覆盖Bootstrap的默认变量，你可以创建一个独特且与品牌一致的主题，使网站在众多网站中脱颖而出。

Bootstrap为网站的快速原型设计和开发提供了强大的工具和资源。无论是通过使用预制的组件来加速开发，还是利用其灵活的网格系统和实用工具类来实现复杂的布局，Bootstrap都能帮助你有效地实现设计目标。掌握Bootstrap，让你的网页设计和开发工作更加高效和愉悦。

7.3 Tailwind CSS：实用主义的 CSS 框架

Tailwind CSS以其实用主义的设计哲学在前端开发者中获得了巨大的流行。它是一个功能类优先的CSS框架，提供了大量的实用工具类，使开发者能够通过组合这些类来构建复杂的设计，而无需离开HTML文档。这种方法旨在加快开发速度，同时保持样式的一致性和可维护性。

7.3.1 基础知识

实用工具类：Tailwind 提供了成千上万的实用工具类，用于设置边距、颜色、字体大小、布局等，几乎可以控制元素的每一个样式方面。
响应式设计 ：通过简单的类前缀，如 sm:, md:, lg:, xl:, 2xl:，可以轻松实现响应式设计。
定制性 ：虽然Tailwind 提供了大量预设的样式，但它也支持高度定制。通过修改tailwind.config.js文件，开发者可以根据项目需求定制主题颜色、字体大小、断点等。
无用CSS的清除：Tailwind 与PurgeCSS集成，可以自动移除未使用的CSS，确保最终构建的文件尽可能小。

7.3.2 重点案例：构建一个响应式导航菜单

使用Tailwind CSS构建一个响应式导航菜单，该菜单在小屏幕上隐藏，大屏幕上显示。

HTML 结构：

html 复制代码

<div class="flex flex-wrap justify-between items-center">
  <a href="#" class="text-xl text-gray-800">Logo</a>
  <nav class="hidden md:flex space-x-4">
    <a href="#" class="text-gray-600 hover:text-gray-800">Home</a>
    <a href="#" class="text-gray-600 hover:text-gray-800">About</a>
    <!-- 更多链接 -->
  </nav>
</div>

通过使用Tailwind的实用工具类，我们可以快速实现一个响应式的导航菜单，md:flex 确保在中等大小的屏幕及以上导航是可见的，而在更小的屏幕上则隐藏。

7.3.3 拓展案例 1：创建一个带有卡片布局的网格

使用Tailwind CSS的网格工具类来创建一个响应式的卡片布局网格。

HTML 结构：

html 复制代码

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white shadow rounded-lg p-4">Card 1</div>
  <div class="bg-white shadow rounded-lg p-4">Card 2</div>
  <!-- 更多卡片 -->
</div>

通过调整grid-cols-1, sm:grid-cols-2, lg:grid-cols-3类，我们可以定义不同屏幕大小下的列数，gap-4则为卡片之间提供了间隔。

7.3.4 拓展案例 2：自定义按钮样式

定制一个按钮样式，并在不同状态下改变其外观。

HTML 结构：

html 复制代码

<button class="btn-primary">Click me</button>

Tailwind 配置 （在 tailwind.config.js 中）：

js 复制代码

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#007bff',
      }
    }
  }
}

CSS （使用@apply指令）：

css 复制代码

.btn-primary {
  @apply bg-brand-blue text-white py-2 px-4 rounded hover:bg-blue-700;
}

通过在Tailwind配置文件中添加自定义颜色，并使用@apply指令应用实用工具类，我们可以快速创建一个具有品牌特色的按钮，并在悬停时改变背景色。

Tailwind CSS 通过其实用主义的设计哲学，为网页设计和开发带来了前所未有的灵活性和效率。无论是构建响应式布局、实现定制化设计，还是优化最终产物的文件大小，Tailwind都能提供强大的支持。掌握了Tailwind，你就拥有了在现代网页设计领域快速迭代和实现创意的能力。