浅谈缩减SCSS 50%样式代码的14条实战经验

下面是详细的攻略：

概述

当我们在编写 SCSS 样式代码时，我们可能会遇到很多重复冗长的代码，其实通过一些技巧和优化，可以让我们的代码更加简洁和易于维护。以下是缩减 SCSS 50% 样式代码的 14 条实战经验：

1. DRY 原则

DRY原则是指“不要重复自己（Don't Repeat Yourself）”，在 SCSS 中也同样适用。遵循这一原则可以有效减少样式代码的冗余。我们可以使用变量、混合宏、继承等方式来避免重复编写类似的代码。

例如，在页面中可能会遇到多个地方需要使用主题色，我们可以将主题色定义为变量，并在需要使用的地方进行调用。

$primary-color: #0088ff;

2. 明确的命名规则

使用规范的命名规则可以帮助我们更加清晰地了解每个样式的作用和用途，从而更加容易维护和修改。比如，我们可以将页面中所有按钮的样式都定义为 .btn，而将特殊按钮的样式定义为 .btn-[type] 的形式，例如 .btn-primary、.btn-danger等。

3. 嵌套样式

在 SCSS 中，我们可以通过嵌套样式来避免编写冗长的代码。例如，一个按钮组件可能包含多个元素，我们可以将样式嵌套在一起来简化代码。

.btn {
  background: #0088ff;
  color: #fff;

  &:hover {
    background: darken($primary-color, 10%);
  }

  &-large {
    font-size: 16px;
  }

  &-small {
    font-size: 12px;
  }
}

4. 继承

通过继承我们可以复用已有样式，避免编写重复的代码。例如，我们可以定义一个基础的 .form-control 样式，然后在需要使用的地方使用 @extend 来继承该样式。

.form-control {
  border: 1px solid #ccc;
  padding: 4px;
  font-size: 14px;
}

.text-field {
  @extend .form-control;
}

.password-field {
  @extend .form-control;
  type: password;
}

5. @mixin 声明混合宏

使用 @mixin 声明混合宏可以让我们更加方便地对样式进行拆分、复用和组合。一个典型的例子是在不同的媒体查询下定义不同的样式。以下是一个示例：

@mixin media($screen) {
  @media screen and (max-width: $size) {
    @content;
  }
}

.example {
  @include media(767px) {
    font-size: 16px;
  }

  @include media(767px) {
    font-size: 14px;
  }
}

6. 字符串插值

在 SCSS 中，我们可以使用字符串插值将变量或表达式嵌入到字符串中。这样可以避免重复多次的拼接字符串，增强代码的可读性和可维护性。

例如，我们可以使用 #{} 将变量引入到字符串中：

$selector: '.example';
#{$selector} {
  color: #0088ff;
}

7. 绝对变量

定义绝对变量可以使我们在编写样式时更加方便快捷。我们可以通过定义全局变量的方式来实现。以下是一个示例：

$color: (
  red: #f00,
  green: #0f0,
  blue: #00f
) !default;

.text-red {
  color: map-get($color, red)
}

.text-green {
  color: map-get($color, green)
}

.text-blue {
  color: map-get($color, blue)
}

8. 避免使用 !important

在编写样式时，尽量避免使用 !important。虽然在某些场合下 !important 可以使样式得到正确的应用，但过度使用会使我们的样式代码变得杂乱无章。

9. 操作符

在 SCSS 中支持大部分的数学和逻辑操作符，我们可以使用这些操作符来简化代码。以下是一些例子：

width: 100% / 2;
height: $default / 2;
padding: 2em * 1.5;

@if not is-arund($value) {
  // ...
}

10. 长度单位

在编写样式时，尽量使用相对单位，例如 % 或 em，这样可以使我们的样式更加灵活。如果需要使用绝对单位，例如 px，可以将其定义为变量，避免代码中出现硬编码的常量。

$default: 16px;
$small: $default / 1.5;
$large: $default * 2;

.example {
  font-size: $default;
}

.example-small {
  font-size: $small;
}

.example-large {
  font-size: $large;
}

11. 避免重复代码

在样式编写时，尽可能地减少重复的代码，通过使用混合宏，继承、变量、函数等来封装通用的数据和逻辑，减少代码量，更易于后期维护。

例如，我们可以定义一个用于生成盒子阴影的函数：

@mixin box-shadow($offset-x, $offset-y, $blur, $color) {
  box-shadow: $offset-x $offset-y $blur $color;
}

.example {
  @include box-shadow(0, 0, 5px, rgba(0, 0, 0, .5));
}

12. 属性列表

在编写样式时，我们可以将一些属性放在同一行，从而减少代码量。例如，以下代码中的字体相关属性可以作为一列属性一起定义，以减少代码量：

.example {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

可以使用属性列表的方式来将这些属性统一定义：

.example {
  font: 16px Arial, sans-serif bold;
  line-height: 1.5;
}

13. 函数库

在编写样式时，我们可以利用 SCSS 提供的函数库来简化代码。以下是一些常用的函数库：

• color: 提供颜色相关操作函数，如亮度、明度等
• list: 提供列表相关操作函数，如合并、插入等
• math: 提供数学计算相关函数，如三角函数、取整等
• map: 提供 map 相关操作函数，如取得键对应的值等
• selector: 提供选择器相关操作函数，如合并、取交集、取反等

以下是一个用于生成透明度的函数的示例：

@function alpha($color, $alpha) {
  @return rgba($color, $alpha);
}

.example {
  background-color: alpha(#0088ff, .5);
}

14. 预处理工具

在编写样式时，我们可以使用预处理工具进行代码压缩、自动补全等操作，从而减少样式代码量。常用的预处理工具包括：Sass、Less、Stylus 等。

例如，在使用 sass-loader 对 SCSS 文件进行压缩时，就可以使用以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed'
            }
          }
        ]
      }
    ]
  }
};

到这里，就是缩减 SCSS 50% 样式代码的 14 条实战经验的完整攻略。希望对您的编码工作有帮助！