掌握 CSS 预处理器：Sass、Less 和 Stylus 指南

CSS 学习者们好！欢迎来到我们的小角落！？

介绍

诸如 Sass、Less 和 Stylus 之类的预处理器可以改变您编写样式的方式，引入变量、嵌套、混合等功能。它们本身不是 CSS，而是编译为 CSS 的工具，提供更强大且可维护的样式设置方法。让我们更深入地研究这些神奇的工具。

您将在本文中学到什么？

• 了解预处理器：它们的本质以及它们如何增强 CSS。

• 高级功能：超越循环、条件和更复杂嵌套的基础知识。

• 选择您的预处理器：更详细的比较，包括社区支持和工具。

• 实际示例：演示高级用例并提供详细说明。

• 最佳实践：有效使用预处理器的技巧。

• 资源：下一步去哪里继续学习。

什么是 CSS 预处理器？

CSS 预处理器扩展了 CSS 语言，添加了允许更加模块化、可读和可维护的样式表的功能。它们编译成标准 CSS，然后由浏览器使用。

CSS 预处理器的主要功能

变量：变量允许您存储想要轻松重用和更改的信息。

Sass 示例 (SCSS)：

$primary-color: #3498db;

body {
    background-color: $primary-color;
}

这里， $primary-color 定义一次并在整个样式表中使用。如果颜色需要改变，只需在一处更新即可。

？顺便说一句，这是一篇关于 Sass 和 SCSS 之间差异的精彩文章。

嵌套：嵌套可让您对相关样式进行分组，使 CSS 更具可读性。

Less 示例：

.nav {
    background-color: #f2f2f2;
    ul {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            a {
                color: #333;
                text-decoration: none;
            }
        }
    }
}

这嵌套了 .nav、其 ul、li 和 a 元素的样式，将相关样式保持在一起。

Mixins： Mixins 是可重用的类或属性集，可以包含在其他选择器中。

手写笔示例：

（注意：是的，这是 Stylus，不是 SCSS，但由于我们没有这个选项，所以我爱上了 SCSS）

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

.button
    border-radius(5px)

border-radius mixin 使用参数 n 定义。 .button 类使用此 mixin，为不同的浏览器前缀应用相同的边框半径。

函数：函数可以动态生成CSS。

Sass 示例 (SCSS)

@function pxToEm($px, $base: 16px) {
    @return ($px / $base) * 1em;
}

body {
    font-size: pxToEm(14);
}

此函数将像素转换为em，从而更容易在不同的基本字体大小之间保持一致的排版。

导入：导入允许您将 CSS 拆分为多个文件以便更好地组织。

Less 示例：

$primary-color: #3498db;

body {
    background-color: $primary-color;
}

变量文件被导入到主文件中，允许在需要时使用@link-color。

？注意：您可以使用 codepen.io 检查上述示例的结果并用代码进行更多实验！

实际用例

响应式设计 - Sass (SCSS*) 示例：*

.nav {
    background-color: #f2f2f2;
    ul {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            a {
                color: #333;
                text-decoration: none;
            }
        }
    }
}

使用变量作为断点使响应式设计更加易于管理和一致。

结果 :

主题 - 更少示例：

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

.button
    border-radius(5px)

可以通过更改@theme变量轻松切换主题，然后应用相应的主题样式。

结果 :

CSS 预处理器的高级功能

重复循环：循环允许您迭代列表或映射，通过动态生成 CSS 来减少重复。

Sass (SCSS) 示例：

@function pxToEm($px, $base: 16px) {
    @return ($px / $base) * 1em;
}

body {
    font-size: pxToEm(14);
}

这里，循环创建不同字体大小的类，而无需手动编写每个规则。此循环生成三个具有不同字体大小的类，展示循环如何减少 CSS 中的重复性。

动态样式的条件：条件使您能够根据特定条件应用样式，使您的 CSS 更加动态。

Less 示例：

// _variables.less
@link-color: blue;

// main.less
@import "_variables.less";

a {
    color: @link-color;
}

使用条件，您可以根据变量值应用不同的样式，非常适合创建动态组件。在此示例中，警报的外观根据 @type 是否为警报而变化。

父选择器引用：父选择器引用可让您在嵌套规则中优雅地修改或扩展父选择器。

手写笔示例：

（注意：是的，这是 Stylus，不是 SCSS，但由于我们没有这个选项，所以我爱上了 SCSS）

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Container Example</title>
    <link rel="stylesheet" href="styles.css">


    <div>





<pre class="brush:php;toolbar:false">$breakpoint-sm: 576px;
$breakpoint-md: 768px;

.container {
    width: 100%;

    @media (min-width: $breakpoint-sm) {
        width: 540px;
    }

    @media (min-width: $breakpoint-md) {
        width: 720px;
    }
}

这个 Stylus 示例展示了如何简洁地将样式应用于父级、其悬停状态和嵌套元素。它还演示了如何使用 & 引用父选择器或在嵌套规则的条件语句中使用它。

数学运算：预处理器允许在 CSS 中进行数学运算，使您能够动态计算网格宽度等值。

Sass (SCSS) 示例：

$primary-color: #3498db;

body {
    background-color: $primary-color;
}

此示例使用数学根据网格系统设置宽度。

高级 ~ 实际用例

复杂主题 - Sass (SCSS) 示例：

.nav {
    background-color: #f2f2f2;
    ul {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            a {
                color: #333;
                text-decoration: none;
            }
        }
    }
}

上面的代码演示了如何使用地图和循环动态创建和应用主题，从而轻松切换主题。

结果：

响应式实用程序 - 较少示例：

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

.button
    border-radius(5px)

这会为不同的标题大小创建实用程序类，展示如何轻松生成响应式实用程序。

结果 :

选择预处理器

• Sass（具有 SCSS 语法）被广泛使用，具有出色的工具，并且由于其功能通常被认为更强大。

• Sass 具有强大的功能，例如用于继承样式的 @extend 指令，并且受到 Compass 等工具的广泛支持。

• Less 以其简单性和与 CSS 的相似性而闻名，使其成为预处理的温和介绍。

• Less拥有基于JavaScript的编译器，有利于浏览器内编译进行开发。

• Stylus 提供了非常灵活的语法，您可以选择缩进而不是使用括号，这对于某些开发人员来说更具可读性。

使用预处理器的最佳实践

• 模块化 CSS ：将样式拆分为逻辑的、可重用的模块或部分。

• 避免深层嵌套：虽然嵌套很强大，但嵌套太多会导致复杂且难以覆盖的 CSS。

• 使用变量：对于颜色、尺寸或您可能需要在站点范围内更改的任何值。

• 适度混合：将它们用于常见模式，但要小心过度使用，如果不能有效编译，这可能会使你的 CSS 膨胀。

• Linting ：使用 stylelint 等工具确保您的预处理器代码遵循最佳实践。

进一步学习的资源

萨斯：

• 官方文档 :理解 Sass 语法和功能的最佳起点。

• 高级 Sass 培训 :在实际项目中使用 Sass 的技巧和最佳实践。

• Playground : 一个在线 Sass 游乐场，用于测试和共享 Sass 代码片段。

减：

• 官方文档 ： 了解所有功能 更少优惠。

• Less Hat : Less 的 mixin 和函数的集合，对于常见的 CSS 任务很有用。 请注意，该项目并未得到积极维护。

• Playground : 在浏览器中测试更少的代码。

手写笔：

• 官方文档 :深入了解 Stylus 的功能。

• Stylus 教程：学习 Stylus - 初学者到中级用户的分步指南。

• Stylus REPL : 用于尝试 Stylus 代码的交互式环境。

通用 CSS 预处理器：

• CSS 技巧 :有关预处理器的各种文章以及实际示例。

• Smashing Magazine : CSS 预处理技术的深入文章。

• Codeacademy :提供有关 CSS 预处理器的互动课程。

工具和集成：

• Prepros : 用于编译预处理器的 GUI 工具，具有实时浏览器刷新功能。

• Webpack 带有加载器： 用于将预处理器集成到您的构建管道中。

• Koala : 一个开源跨平台 GUI 应用程序，用于编译 less、sass。 Koal 是我的最爱之一，但请注意，Koala 的项目已存档且未积极维护。

结论

像 Sass、Less 和 Stylus 这样的 CSS 预处理器不仅仅用于编写 CSS；还用于编写 CSS。他们致力于编写更智能、更易于维护的 CSS。它们引入了一定程度的抽象，允许更清晰、更有组织的样式表，并且它们为开发人员提供了 CSS 本身无法提供的功能。通过使用变量、嵌套、mixin 和其他高级功能，您可以显着提高项目的工作效率和可扩展性。

请记住，Sass、Less 或 Stylus 之间的选择不仅与功能有关，还与工作流程偏好、社区支持和工具集成有关。随着您使用这些工具不断成长，您会发现它们不仅加快了您的开发过程，而且还为 CSS 设计和架构开辟了新的可能性。

所以深入研究并尝试这些预处理器。继续学习，继续编码，愿您的样式表永远模块化且高效！ ？

---

？大家好，我是 Eleftheria，社区经理、 开发人员、公共演讲者和内容创建者。

？如果您喜欢这篇文章，请考虑分享。

？ 所有链接 | X | 领英