拥抱简洁：探索Stylus的简洁语法与CSS预处理器之美

在这里插入图片描述

文章目录

- 1. 简洁的语法
- 2. 强大的功能
- 3. 嵌套规则
- 4. 变量支持
- 5. Mixin 混合
- 6. 扩展支持
- 7. 条件语句
- 8. 内置函数
- 9. 可扩展性
- 10. 轻量高效
- 附录：前后端实战项目（简历必备）推荐：★★★★★

Stylus 是一种 CSS 预处理器，具有以下十大特点：

1. 简洁的语法

Stylus 使用类似于 Python 的缩进风格的语法，可以省略大括号和分号，使代码更加简洁易读。

当涉及到Stylus的简洁语法时，以下是一个实际的代码案例来展示其特点：

// 定义变量
primary-color = #ff0000
secondary-color = #00ff00

// 嵌套规则和属性定义
body
  font-size 14px
  color primary-color
  
  // 子选择器
  p
    margin 10px
    padding 5px

    // 伪类选择器
    &:hover
      background-color secondary-color

// Mixin 混合
rounded-border()
  border-radius 5px

.button
  background-color primary-color
  color #fff
  padding 10px
  rounded-border()

// 使用条件语句
if browser-prefixes
  -webkit-border-radius 5px
  -moz-border-radius 5px
  -ms-border-radius 5px
  -o-border-radius 5px
  border-radius 5px

在这个例子中，我们可以看到 Stylus 的简洁语法。它省略了大括号和分号，并且使用缩进进行嵌套规则的表示。

在代码中，我们首先定义了两个变量 primary-color 和 secondary-color，分别表示主要颜色和次要颜色。

然后，使用嵌套规则来定义整个页面的样式。body 元素具有 14px 的字体大小，颜色为 primary-color。其中的 p 元素有一些 margin、padding，而且在悬停时会改变背景颜色。

接下来，我们定义了一个 Mixin（混合），名为 rounded-border，用于设置圆角边框样式。然后，我们将其应用到 .button 类选择器上，并设置一些其他样式属性。

最后，我们使用条件语句来判断是否需要添加浏览器前缀，以便在不同浏览器中都能正常显示圆角边框。

通过这个简洁的示例，可以清晰地看到 Stylus 的语法简洁性，以及如何使用变量、嵌套规则、Mixin 和条件语句来提高开发效率和代码的可读性。

2. 强大的功能

Stylus 提供了丰富的功能，如变量、嵌套规则、混合（Mixin）、继承、运算符等，可以提高代码的可维护性和重用性。

当涉及到 Stylus 的功能时，以下是一个实际的代码案例来展示如何使用变量、嵌套规则、Mixin、继承和运算符来提高代码的可维护性和重用性：

// 定义变量
primary-color = #ff0000
secondary-color = #00ff00

// 嵌套规则和属性定义
body
  font-size 14px
  color primary-color

  // 子选择器
  p
    margin 10px
    padding 5px

    // 伪类选择器
    &:hover
      background-color secondary-color

// Mixin 混合
rounded-border()
  border-radius 5px

button
  .primary
    background-color primary-color
    color #fff
    padding 10px
    rounded-border()

  .secondary
    background-color secondary-color
    color #000
    padding 8px
    rounded-border()

// 继承
.sidebar
  width 200px
  height 100%
  background-color #f2f2f2
  padding 10px

.content
  height 100%
  padding 20px
  font-family Arial
  background-color #fff

// 运算符
container-width = 800px

.container
  width container-width
  margin 0 auto

在这个例子中，我们使用了多个 Stylus 的功能来提高代码的可维护性和重用性。

首先，我们定义了两个变量 primary-color 和 secondary-color 来表示主要颜色和次要颜色。

然后，使用嵌套规则和选择器来定义页面的样式。body 元素具有 14px 的字体大小，并且文字颜色为 primary-color。p 元素有一些 margin 和 padding，悬停时会改变背景颜色为 secondary-color。

接下来，我们定义了一个 Mixin（混合） named rounded-border，用于设置圆角边框样式。然后，我们在 .button 类选择器中应用了这个 Mixin，并设置了不同的背景颜色、文字颜色、padding 等属性，分别表示主要样式和次要样式。

然后，我们使用继承来创建 .sidebar 和 .content 的样式。.sidebar 继承了宽度、高度、背景颜色和内边距等属性，.content 继承了高度、内边距、字体和背景颜色等属性。这样可以避免重复编写相似的样式。

最后，我们使用了运算符，将容器的宽度通过变量 container-width 进行计算，并将其应用到 .container 类选择器上。

通过这个示例，展示了如何使用变量、嵌套规则、Mixin、继承和运算符等 Stylus 的功能来提高代码的可维护性和重用性，同时保持代码的简洁性和可读性。

3. 嵌套规则

Stylus 支持嵌套规则，可以避免重复书写选择器，并且可以更好地表达HTML标签之间的层次关系。
当涉及到 Stylus 的嵌套规则时，以下是一个代码案例来展示如何使用嵌套规则来避免重复书写选择器，并更好地表达 HTML 标签之间的层次关系：

// 默认样式
body
  font-family Arial, sans-serif
  font-size 16px

.container
  max-width 1200px
  margin 0 auto
  padding 20px

.header
  background-color #f2f2f2
  padding 10px

.title
  font-size 24px
  color #333
  margin-bottom 10px

.nav
  ul
    list-style none
    padding 0
    margin 0

  li
    display inline-block
    margin-right 10px

    a
      text-decoration none
      color #666

.content
  padding 10px
  background-color #fff

.footer
  background-color #f2f2f2
  padding 10px
  text-align center

在这个例子中，我们使用了嵌套规则来避免重复书写选择器，并更好地表达 HTML 标签之间的层次关系。

首先，我们设置了默认样式，为整个页面的字体和字体大小。

然后，我们定义了一个 .container 类选择器，它包含了整个页面的最大宽度、居中对齐的边距等属性。

在 .header 类选择器内部，我们设置了背景颜色和内边距。

在 .title 类选择器内部，我们设置了标题的字体大小、颜色和底部边距。

在 .nav 类选择器内部，我们通过嵌套规则来定义了无序列表的样式，包括列表项的样式、链接的文本装饰和颜色。

在 .content 类选择器内部，我们设置了内容区域的内边距和背景颜色。

在 .footer 类选择器内部，我们设置了页脚的背景颜色、内边距和居中对齐的文本。

通过以上示例，我们可以看到 Stylus 的嵌套规则如何帮助我们避免重复书写选择器，并更好地表达 HTML 标签之间的层次关系，从而提高代码的可读性和维护性。

4. 变量支持

Stylus 允许定义和使用变量，可以方便地在样式表中管理颜色、尺寸等可复用的值。

当涉及到 Stylus 的变量时，以下是一个代码案例来展示如何定义和使用变量来方便地管理颜色、尺寸等可复用的值：

// 定义变量
primary-color = #ff0000
secondary-color = #00ff00
font-size-large = 24px
container-width = 1200px

// 使用变量
body
  font-family Arial, sans-serif
  font-size font-size-large

.container
  max-width container-width
  margin 0 auto

.header
  background-color primary-color
  padding 10px

.title
  font-size font-size-large
  color #333
  margin-bottom 10px

.nav
  ul
    list-style none
    padding 0
    margin 0

  li
    display inline-block
    margin-right 10px

    a
      text-decoration none
      color secondary-color

.content
  padding 10px
  background-color #fff

.footer
  background-color primary-color
  padding 10px
  text-align center

在这个例子中，我们使用了变量来方便地管理颜色、尺寸等可复用的值。

首先，我们定义了几个变量，如 primary-color 和 secondary-color 分别表示主要颜色和次要颜色。font-size-large 表示大号字体大小，container-width 表示容器的最大宽度。

然后，在样式表中使用这些变量。我们将字体设置为 Arial，字体大小设置为 font-size-large。

在 .container 类选择器中，我们将最大宽度设置为 container-width，并将边距设置为自动。

在 .header 类选择器中，我们将背景颜色设置为 primary-color，并设置内边距。

在 .title 类选择器中，我们将字体大小设置为 font-size-large，文字颜色设置为 #333，底部设置为 10px 的外边距。

在 .nav 类选择器内部，我们将无序列表的样式设置为无序列表项的样式，并将链接的文字颜色设置为 secondary-color。

在 .content 类选择器内部，我们设置了内容区域的内边距和背景颜色。

在 .footer 类选择器内部，我们将背景颜色设置为 primary-color，设置内边距，并居中对齐文本。

通过使用变量，我们可以将可复用的值定义为变量，并在样式表中使用这些变量，从而方便地管理颜色、尺寸等属性值。这样可以提高代码的可维护性和重用性。

5. Mixin 混合

Stylus 的 Mixin 是一种可以重复使用的代码块，可以在不同的选择器中引用，并且支持参数传递，提供了更好的代码复用性。

当涉及到 Stylus 的 Mixin 时，以下是一个代码案例来展示如何定义和使用 Mixin 来重复使用代码块，并支持参数传递，提供更好的代码复用性：

// 定义 Mixin
mixin centerElement()
  display flex
  justify-content center
  align-items center

// 使用 Mixin
.container
  width 100%
  height 300px
  background-color #f2f2f2
  mixin centerElement()

.box
  width 200px
  height 200px
  background-color #ccc
  mixin centerElement()

.text
  font-size 18px
  color #333

在这个例子中，我们定义了一个名为 centerElement 的 Mixin，它是一个可以重复使用的代码块，并且它没有参数传递。

然后，在样式表中使用该 Mixin。在 .container 类选择器中，我们先设置宽度、高度和背景颜色，然后通过 mixin centerElement() 引用了 centerElement Mixin，在该选择器中使用了 display: flex 和居中对齐的属性。

在 .box 类选择器内部，我们设置了盒子的宽度、高度和背景颜色，然后再次通过 mixin centerElement() 引用了 centerElement Mixin，以实现居中对齐。

在 .text 类选择器内部，我们设置了文字的字体大小和颜色，该选择器没有使用 Mixin。

通过使用 Mixin，我们可以将一段代码块定义为 Mixin，并在不同的选择器中引用该 Mixin，从而实现代码的重复使用。如果需要，我们还可以通过参数传递来定制代码块的行为。这样可以提高代码的复用性和维护性。

6. 扩展支持

Stylus 提供了 extend 语法，可以将一个选择器继承到另一个选择器上，避免了冗余的代码。

当涉及到 Stylus 的 Extend 语法时，以下是一个代码案例来展示如何使用 Extend 将一个选择器继承到另一个选择器上，避免冗余的代码：

// 定义选择器
.base-button
  padding 10px
  border 1px solid #ccc
  border-radius 5px
  text-align center
  cursor pointer

.primary-button
  background-color #ff0000
  color #fff
  extend .base-button

.secondary-button
  background-color #00ff00
  color #fff
  extend .base-button

// 使用选择器
.button-container
  display flex

.submit-button
  extend .primary-button
  margin-right 10px

.cancel-button
  extend .secondary-button

在这个例子中，我们定义了两个选择器 .base-button、.primary-button 和 .secondary-button。

.base-button 定义了一些基本的按钮样式，如内边距、边框、圆角和居中对齐。这样的定义可以避免在每个按钮选择器中重复写这些公共样式。

.primary-button 和 .secondary-button 分别定义了主要按钮和次要按钮的样式。我们使用 extend .base-button 将 .base-button 选择器继承到这两个选择器上，这意味着它们会继承 .base-button 的所有样式。

在使用选择器时，我们创建了一个 .button-container 类选择器来包含按钮。然后，我们分别创建了一个 .submit-button 类选择器和一个 .cancel-button 类选择器，使用 extend 将 .primary-button 和 .secondary-button 继承到它们上面。这样，它们会继承 .base-button 和相应的特定按钮样式，避免了冗余的代码。

通过使用 Extend 语法，我们可以将一个选择器的样式继承到另一个选择器上，从而避免在多个选择器中重复写相同的样式，提高了代码的重用性和可维护性。

7. 条件语句

Stylus 支持条件语句，可以根据条件来动态生成样式，增强了样式表的灵活性。

当涉及到 Stylus 的条件语句时，以下是一个代码案例来展示如何使用条件语句来动态生成样式，增强样式表的灵活性：

// 定义变量
$theme = 'dark'

// 使用条件语句生成样式
.container
  width 100%
  height 300px
  background-color if($theme == 'dark', #333, #f2f2f2)
  color if($theme == 'dark', #fff, #333)

.button
  padding 10px
  border-radius if($theme == 'dark', 5px, 10px)
  background-color if($theme == 'dark', #ff0000, #00ff00)
  color if($theme == 'dark', #fff, #000)

.text
  font-size if($theme == 'dark', 16px, 14px)
  color if($theme == 'dark', #ccc, #666)

在这个例子中，我们定义了一个名为 $theme 的变量，用于指定主题样式（可以是 ‘dark’ 或 ‘light’）。

然后，我们使用条件语句来根据 $theme 的值动态生成样式。在 .container 类选择器中，我们设置了宽度、高度和背景颜色，根据 $theme 的值选择不同的背景颜色和文字颜色。

在 .button 类选择器内部，我们设置了按钮的内边距、边框半径、背景颜色和文字颜色，同样根据 $theme 的值选择不同的样式。

在 .text 类选择器内部，我们设置了文字的字体大小和颜色，同样根据 $theme 的值选择不同的样式。

通过使用条件语句，我们可以根据不同的条件动态生成样式，使样式表更加灵活。这样，我们可以轻松地切换不同的主题样式或根据其他条件动态调整样式，从而实现更好的样式定制和灵活性。

8. 内置函数

Stylus 内置了一些常用函数，如颜色操作、字符串处理等，可以在样式表中方便地调用这些函数进行样式计算。

当涉及到 Stylus 的内置函数时，以下是一个代码案例来展示如何在样式表中使用内置函数进行样式计算：

// 使用颜色操作函数
$primary-color = #ff0000

.container
  background-color $primary-color
  color darken($primary-color, 20%)

.button
  background-color lighten($primary-color, 10%)
  border-color rgba($primary-color, 0.5)
  box-shadow 0 0 10px mix($primary-color, #000, 50%)

// 使用字符串处理函数
$text = 'Hello, World!'

.heading
  font-size 20px
  text-transform uppercase
  content "'" + $text + "'"
  padding-left str-length($text) * 10px

在这个例子中，我们首先定义了一个名为 $primary-color 的变量，并将其设置为红色 #ff0000。

然后，我们使用颜色操作函数来计算样式。在 .container 类选择器中，我们将背景颜色设置为 $primary-color，并将文字颜色设置为变暗了 20% 的颜色。

在 .button 类选择器中，我们将背景颜色设置为比 $primary-color 变亮了 10% 的颜色，将边框颜色设置为带有 50% 不透明度的 $primary-color。我们还使用 mix() 函数创建了一个混合的阴影效果，将 $primary-color 和黑色 #000 混合，透明度为 50%，然后应用了一个带有10像素模糊的阴影。

在样式表中，我们还使用字符串处理函数来操作文本。在 .heading 类选择器中，我们设置了字体大小为 20px，将文本转换为大写，并使用 str-length() 函数来计算文本长度，并在左边添加相应数量的 padding（每个字符对应 10 像素的 padding）。

通过使用内置函数，我们可以方便地进行颜色操作、字符串处理等样式计算，使样式表更加灵活和动态。这样，我们可以根据需要对颜色、文本等进行运算和处理，实现更精细的样式定制。

9. 可扩展性

Stylus 支持插件机制，可以通过插件扩展其功能，如自动添加浏览器前缀、使用 CSS3 新特性等。
当涉及到 Stylus 的插件机制时，以下是一个代码案例来展示如何使用插件扩展 Stylus 的功能：

首先，在项目的根目录下创建一个 package.json 文件，并添加对 Stylus 的依赖：

{
  "dependencies": {
    "stylus": "^0.54.8",
    "autoprefixer-stylus": "^1.0.0"
  }
}

然后，在根目录下运行 npm install 命令来安装依赖。

接下来，创建一个样式文件（例如 styles.styl），并写入以下代码：

@import 'autoprefixer-stylus'

.button
  display flex
  justify-content center
  align-items center

.prefixer()

在这个例子中，我们使用了 autoprefixer-stylus 插件来自动添加浏览器前缀。首先，我们使用 @import 导入了 autoprefixer-stylus 插件。然后，在 .button 类选择器内部，我们设置了一些基本的 flex 布局样式。

最后，我们调用了 prefixer() 函数，该函数会自动为样式中的属性添加浏览器前缀。根据插件的要求，我们在样式文件中调用该函数来触发插件的处理。

在根目录下运行 npx stylus styles.styl 命令来编译样式文件。编译完成后，将生成一个 styles.css 文件，其中包含经过插件处理的样式。

通过使用插件，我们可以方便地扩展 Stylus 的功能，如自动添加浏览器前缀、使用 CSS3 新特性等。这样，我们可以更高效地编写样式，并确保生成的样式在各种浏览器中具有一致的表现。请确保在使用插件时遵循相关的文档和要求。

10. 轻量高效

Stylus 的编译器非常轻量高效，生成的 CSS 代码也相对精简，减少了文件大小和加载时间。

当涉及到 Stylus 的编译器时，以下是一个代码案例来展示如何使用 Stylus 编译器将 Stylus 代码转换为 CSS 代码：

首先，安装全局的 Stylus 编译器：

npm install -g stylus

然后，创建一个名为 styles.styl 的文件，并写入以下内容：

$primary-color = #ff0000

.container
  background-color $primary-color
  color rgba($primary-color, 0.8)

.button
  background-color lighten($primary-color, 10%)
  border-color darken($primary-color, 20%)

在这个例子中，我们定义了一个名为 $primary-color 的变量，并将其设置为红色 #ff0000。

然后，我们使用该变量 $primary-color 设置了 .container 类选择器的背景颜色，并使用 rgba() 函数将其颜色值设置为透明度为 0.8 的颜色。

接下来，在 .button 类选择器中，我们使用内置的颜色操作函数 lighten() 和 darken() 来分别调整 $primary-color 的亮度。我们将背景颜色设置为比 $primary-color 变亮了 10% 的颜色，并将边框颜色设置为比 $primary-color 变暗了 20% 的颜色。

最后，在终端中运行以下命令来编译 Stylus 代码并生成 CSS 文件：