SASS 中的占位符 % placeholder 与 @mixin 的区别-JavaScript中文网-JavaScript教程资源分享门户

SASS 中的占位符 % placeholder 与 @mixin 的区别

SASS 是一种 CSS 预处理器，它可以让 CSS 更加的灵活和可维护。在 SASS 中，有两种常用的语法：占位符 %placeholder 和 @mixin。

占位符 %placeholder

占位符类似于 CSS 中的 class ，但是它们在编译后不会生成样式。在 SASS 中，占位符使用 % 符号开头，在选择器中使用。

占位符的特点是可以被多个选择器继承和引用，这极大的增加了代码的可读性和可维护性。另外，占位符还可以通过 @extend 继承。

%alert { border: 1px solid #ccc; padding: 10px; background-color: #f1f1f1; }

.error { @extend %alert; color: red; }

.warning { @extend %alert; color: yellow; }

通过上述示例可以看到，占位符 %alert 可以被 error 和 warning 选择器继承，这么做可以实现代码的复用。

占位符在编译期不会产生任何 CSS 样式，这与 mixin 不同， mixin 会在编译期产生样式。

@mixin

@mixin 是在 SASS 中用来定义可复用样式的一种机制。它可以定义任意长度、任意复杂度的样式集合，包括选择器、属性和值等。在 SASS 中，可以通过 @include 引入这些样式。

@mixin alert { border: 1px solid #ccc; padding: 10px; background-color: #f1f1f1; }

.error { @include alert; color: red; }

.warning { @include alert; color: yellow; }

通过上述示例可以看到，@mixin alert 定义了一些样式，这些样式可以被 error 和 warning 选择器引入。这样做也可以实现代码的复用。

与占位符不同的是，mixin 会在编译期生成样式，会增加 CSS 文件的大小。另外，mixin 可以带参数，使代码更加灵活。

比较

从定义中可以看出，占位符 %placeholder 和 mixin @mixin 的最大区别在于，在编译期的样式生成方式不同。

使用占位符可以避免代码的重复，使代码更加简单易懂，适用于需要多个选择器继承相同样式的情况；使用 mixin 可以简化 CSS 代码，适用于需要多处使用不同样式的情况。

总结

在 SASS 中，占位符 %placeholder 和 mixin @mixin 是相对独立的两种机制。每种机制都有其适用场景和优缺点。建议根据实际需要灵活选择使用。

参考代码