前言
在前端开发中，CSS 是不可或缺的一部分。而在 CSS 中，样式的复用性和维护性是很重要的。在这一方面，Stylus 是一个非常优秀的 CSS 预处理器，而其基于 Stylus 的 npm 包 base.stylus 则是一个非常好用的样式库。
本篇文章将介绍 base.stylus 包的一些基本用法，以及如何使用它来提高 CSS 的复用性和维护性。同时，我们也会深入探讨一些高级用法，希望能够帮助读者更深入地了解 base.stylus。
安装和使用
要使用 base.stylus，需要先安装它：
npm install base.stylus
安装完成后，就可以在自己的样式文件中引入它：
@import "base.stylus"
这样，base.stylus 中的样式就可以在你的文件中使用了。在大多数情况下，你不需要在引入后进行额外的配置，就可以开始使用它。不过，接下来我们还是会介绍一些常用的配置和用法。
基础用法
在使用 base.stylus 时，我们需要理解其中的一些概念。其中最基础的概念就是 mixins。Mixins 是一个可以被引用的样式块，它可以接受参数，并根据参数不同输出不同的样式。
以一个简单的样式为例：
.box {
background: #fff;
border: 1px solid #ddd;
padding: 15px;
border-radius: 3px;
box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}这是一个具有一定复杂度的样式，其中包含了一些颜色、边框、圆角和阴影等属性。如果我们需要在多个地方使用这个样式，那么就需要进行复制粘贴。
而如果我们将其转化为一个 mixin，则可以更方便地进行复用：
-- -------------------- ---- ------- ----- ----------- ---- ------- --- ----- ---- -------- ---- -------------- --- ----------- - --- --- ------- -- -- --- ---- -----
这样，我们就可以通过调用 box() 这个 mixin 来输出这一样式了。同时，由于 mixin 支持传入参数，我们也可以灵活地控制 mixin 的输出：
.box-blue box() background: blue .box-red box() background: red
在这个例子中，.box-blue 和 .box-red 继承了 box() 这个 mixin 的样式，并针对不同的参数输出了不同的 background。
基于 mixin，base.stylus 中还定义了一些常用的 mixins 和变量，这些都可以在样式中进行调用。下面我们会介绍一些常用的内容。
常用 mixins
clearfix
clearfix 是一个非常常用的清除浮动样式，而在 base.stylus 中，它也是一个可以调用的 mixin。
.clearfix
&::after
content: ""
display: table
clear: both当需要清除浮动时，我们只需要在对应的元素上加上 .clearfix 这个 class 即可。
vendor
vendor 是一个根据传入参数输出带有浏览器前缀的 CSS 样式的 mixin。它的参数可以是 CSS 属性名或属性值，例如：
border-radius: vendor(border-radius, 10px) box-shadow: vendor(box-shadow, 0 3px 5px rgba(0, 0, 0, .2))
这样，就可以生成带有浏览器前缀的 border-radius 和 box-shadow 样式了。
pointer
pointer 是一种常用的带有光标效果的样式，我们也可以通过调用 pointer() mixin 来使元素拥有这个样式。
.btn pointer()
这样，.btn 这个元素就拥有了一种带有光标效果的样式。
transition
transition 是一种 CSS3 的过渡动画，可以在多种场景下使用。而 base.stylus 中的 transition() mixin 可以方便地生成这样的动画。
.btn transition(color .3s ease)
这样，.btn 这个元素就会在颜色变化时带有过渡动效了。
除了这些常用的 mixins，base.stylus 中还有很多其他的 mixins，读者可以在官方文档中查看更多相关内容。
变量
除了 mixin 外，base.stylus 中还定义了一些常用的变量，这些变量可以方便地被引用。例如：
$primary-color = #4cd964 .btn background: $primary-color
这样，.btn 这个元素就会拥有 $primary-color 定义的颜色了。当我们需要修改这个颜色时，只需要修改变量即可。
当然，像变量这样的东西肯定不止一种。base.stylus 中还有很多非常有用的变量，包括：
- $screen-sm：表达小屏幕大小的屏幕宽度；
- $gray-lightest：用于定义一些文字或背景的最浅灰色等等。
读者可以查看官方文档中的“变量”一章来了解这些变量的用法和详细描述。
高级用法
在了解了 base.stylus 的基础用法后，我们可以进一步了解一些高级用法。
Composition
在 CSS 中，组合选择器的概念非常常见，而在 Stylus 中，可以通过 Composition 概念来实现类似的功能。
在 base.stylus 中，有一个很好的例子就是 .fl 和 .fr 这两个 class，它们定义了一个元素在其容器中向左浮动和向右浮动的样式。我们可以通过 Composing 来实现 .fl 和 .fr 的样式定义：
.fl float: left .fr float: right
这时，我们就可以组合两个 class 来定义元素的浮动样式了：
.box composes: fl .box2 composes: fr
这样，.box 这个元素就会向左浮动，而 .box2 则向右浮动。
Extend
在 CSS 中，继承是一种非常有用的 CSS 特性。在 Stylus 中，通过 Extend 我们也可以实现相似的效果。
例如，在 base.stylus 中，%placeholder 就是定义了一个占位符的 mixin：
%placeholder display: none .box composes: %placeholder
这样，.box 这个元素就会继承 %placeholder 定义的样式，并将自己的内容隐藏掉。
值得注意的是，在 Compose 和 Extend 中，规则的命名是很重要的。在 Stylus 中，我们可以使用 $ 符号来定义变量，在命名时也需要注意其使用。
例如，我们可以用 $bg-color 来定义背景色变量，但是我们不能用 .bg-color 来定义一个 class，否则在我们调用 .bg-color 时，Stylus 就会把它认为是一个变量而不是一段样式。
结语
在本篇文章中，我们介绍了 base.stylus 中的一些基础用法和高级用法，包括 mixins 和变量等。读者可以通过阅读这篇文章和官方文档来了解更多关于 base.stylus 的内容。
同时，我们也希望读者能够在实际开发中运用这些知识，提高自己的 CSS 编写效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055afa81e8991b448d8a38