CSS 预处理器 - 技术栈

介绍

CSS预处理器是一种脚本语言，它扩展了CSS的功能，不仅让编写CSS更加简洁、高效，还提供了许多原生CSS所不具备的功能，允许我们在编写样式时使用变量、嵌套、函数、继承等编程语言的特性。编写好的预处理器代码会被编译成标准的CSS，从而在浏览器中运行。

优势

代码复用：通过变量和混合宏（Mixins），可以大大减少重复代码。例如，可以定义一个颜色变量，在整个项目中复用，从而便于维护和修改。
结构清晰：嵌套规则使CSS结构更加清晰，反映HTML结构，提高代码可读性。
模块化：通过分割不同的功能模块，使得样式文件更易于管理和维护。
功能增强：预处理器提供的函数和运算能力，使得处理复杂的样式变得更加简单。
兼容性：可以编写跨浏览器兼容的代码，并利用预处理器的功能自动处理前缀问题。

常见的CSS预处理器

Sass（Syntactically Awesome Stylesheets） 支持两种语法：缩进语法（.sass）和SCSS（.scss）。提供了变量、嵌套、混合宏、继承等特性。

示例：

scss 复制代码

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  border: 1px solid darken($primary-color, 10%);
  &:hover {
    background-color: lighten($primary-color, 10%);
  }
}

Less（Leaner Style Sheets） 是另一个流行的预处理器，与Sass类似，但语法略有不同。

示例：

less 复制代码

@primary-color: #3498db;

.button {
  background-color: @primary-color;
  border: 1px solid darken(@primary-color, 10%);
  &:hover {
    background-color: lighten(@primary-color, 10%);
  }
}

Stylus 是一个非常灵活和强大的预处理器，语法简洁，可以选择完全省略大括号、分号等。灵活的语法和强大的内置函数。
- 示例：
  styl 复制代码
```
primary-color = #3498db

.button
  background-color primary-color
  border 1px solid darken(primary-color, 10%)
  &:hover
    background-color lighten(primary-color, 10%)
```

Sass 用法

1. 变量

SCSS:

scss 复制代码

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}

转译后的CSS:

css 复制代码

.button {
  background-color: #3498db;
}

2. 嵌套

SCSS:

scss 复制代码

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

转译后的CSS:

css 复制代码

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. 混合宏（Mixins）

SCSS:

scss 复制代码

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

转译后的CSS:

css 复制代码

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

4. 继承

SCSS:

scss 复制代码

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
  background-color: #f0f0f0;
}

转译后的CSS:

css 复制代码

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  background-color: #f0f0f0;
}

5. 函数

SCSS:

scss 复制代码

@function calculate-rem($px) {
  @return $px / 16px * 1rem;
}

body {
  font-size: calculate-rem(16px);
}

转译后的CSS:

css 复制代码

body {
  font-size: 1rem;
}

Less 用法

1. 变量

Less:

less 复制代码

@primary-color: #3498db;

.button {
  background-color: @primary-color;
}

转译后的CSS:

css 复制代码

.button {
  background-color: #3498db;
}

2. 嵌套

Less:

less 复制代码

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

转译后的CSS:

css 复制代码

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. 混合宏（Mixins）

Less:

less 复制代码

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
          border-radius: @radius;
}

.box { .border-radius(10px); }

转译后的CSS:

css 复制代码

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

4. 函数

Less:

less 复制代码

.calculate-rem(@px) {
  @rem: @px / 16px * 1rem;
  return @rem;
}

body {
  font-size: .calculate-rem(16px);
}

转译后的CSS:

css 复制代码

body {
  font-size: 1rem;
}

Stylus 用法

1. 变量

Stylus:

styl 复制代码

primary-color = #3498db

.button
  background-color primary-color

转译后的CSS:

css 复制代码

.button {
  background-color: #3498db;
}

2. 嵌套

Stylus:

styl 复制代码

.nav
  ul
    margin 0
    padding 0
    list-style none

  li
    display inline-block

  a
    display block
    padding 6px 12px
    text-decoration none

转译后的CSS:

css 复制代码

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. 混合宏（Mixins）

Stylus:

styl 复制代码

border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  -ms-border-radius radius
  border-radius radius

.box
  border-radius(10px)

转译后的CSS:

css 复制代码

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

4. 函数

Stylus:

styl 复制代码

calculate-rem(px)
  px / 16px * 1rem

body
  font-size calculate-rem(16px)

转译后的CSS:

css 复制代码

body {
  font-size: 1rem;
}

希望这篇文章对你了解CSS预处理器有所帮助。如果你有任何问题或想法，欢迎在评论区分享！