Sass @mixins真的很轻吗？什么是百分比占位符？-DEV365 开发者社区

Mixins 是SASS中的一个强大功能，可让您重复使用多个选择器的一组CSS声明。

使用Mixins的主要优点之一是，它们可以帮助保持您的CSS代码组织和可维护，从而更容易在大型代码库中更新和维护样式。
但是，某些开发人员对Mixin的担忧是使用轻量级，并且是否在CSS代码中增加了不必要的膨胀。

在本文中，我们将仔细研究一下Sass中的Mixins，并探索它们是否是重复使用CSS样式的轻量级解决方案。

让我们深入研究！

我假设您已经对Mixins是什么以及它们的工作方式有基本知识。如果没有，我鼓励您看看the official documentation。

Mixins，如前所述，允许您创建一个代码块并在稍后在应用程序中重复使用。
有时，我看到人们很想将它们用作其风格的主要提供商。

...这不是一个好主意。让我告诉你为什么

让我们假设我们有一家带有大量按钮的庞大的电子商务商店，并且我们创建了一个Mixin，可以在其中共享一些基本样式。

这是我们简单的混音：

@mixin ButtonStyles {
    margin: 0 3px;
    color: white;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;

    svg {
        width: 15px;
    }
}

好吧，现在让我们用@include ButtonStyles！

.btn_primary {
    @include ButtonStyles;
    background: black;
    width: 45px;
}

.btn_secondary {
    @include ButtonStyles;
    background: blue;
    width: 60px;
}

.btn_contrast {
    @include ButtonStyles;
    background: yellow;
    width: 60px;
}

如果您将 sass 代码编译到 css 中，您现在会发生什么？尝试回答自己。

a）Mixin中的代码不会重复。
b）每次致电@include ButtonStyles时，Mixin的代码都会重复

好吧，我敢打赌你已经知道答案了！
在这种特殊情况下，使用混合蛋白基本上会将整个代码从该混合蛋白复制到您的代码中多次。

。

这是结果：

.btn_primary {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    background: #000;
    width: 45px
}

    .btn_primary svg {
        fill: #fff;
        width: 15px
    }

.btn_secondary {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    background: blue;
    width: 60px
}

    .btn_secondary svg {
        fill: #fff;
        width: 15px
    }

.btn_contrast {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    background: yellow;
    width: 60px
}

    .btn_contrast svg {
        fill: #fff;
        width: 15px
    }

如果要优化CSS重量，则不是很有效。

想象一下代码会变得多么肿，如果您在应用程序中多次进行。

好吧...然后如何解决？

答案很简单。如果您想保持一个可以在SASS代码中重复使用的单个块的想法，请使用占位符。

％占位符

不要被名称误导，它不是您投入投入的HTML占位符，它是 sass 占位符，带有%签名的占位符。

示例：

%buttonStyles {
    margin: 0 3px;
    color: white;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;

    svg {
        width: 15px;
    }
}

sass 占位符是创建样式模板的最有效方法，因为它不会被编译到您的 css 代码中，并且永远不会重复。
另外，您不能像Mixins一样使用@include，而是使用占位符，而是使用@extend关键字。

好奇地看到它在实践中如何工作？
我们走了！

让我们首先在我们的按钮中使用@extend所需的样式：

.btn_primary {
    @extend %buttonStyles;
    background: black;
    width: 45px;
}

.btn_secondary {
    @extend %buttonStyles;
    background: blue;
    width: 60px;
}

.btn_contrast {
    @extend %buttonStyles;
    background: yellow;
    width: 60px;
}

现在，让我们看一下将 sass 代码编译成 css 的结果。

.btn_secondary, .btn_primary, .btn_contrast {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex
}

    .btn_secondary svg, .btn_primary svg, .btn_contrast svg {
        width: 15px
    }

.btn_primary {
    background: #000;
    width: 45px
}

.btn_secondary {
    background: blue;
    width: 60px
}

.btn_contrast {
    background: yellow;
    width: 60px
}

和voilã！
您的 css 代码轻得多，因为没有重复。
这在每个kb很重要的大型应用中非常有用。

另外，您可以改用.class并通过@extend .buttonStyles进行类似的扩展，但这将导致将此类名称应用于CSS类名称列表。
在我们的情况下，它将改变此

.btn_secondary, .btn_primary, .btn_contrast {
  ...code 
}

进入这个

.buttonStyles, .btn_secondary, .btn_primary, .btn_contrast {
  ...code 
}

注意将.buttonStyles类应用于类列表。
这不是一个不好的解决方案，但是由于您已经扩展了样式，为什么不完美地做呢？
此外，如果您真的很关心每个kb，则可以通过在类列表中没有未使用的类名称来保存一堆。

结论
SASS中的Mixins是重复使用CSS样式的好方法，但是如果不仔细使用，它们可以在CSS代码中添加不必要的膨胀。
使用Mixins的另一种方法是使用占位符。占位符允许您在不生成任何实际CSS代码的情况下重复使用一组CSS声明。
相反，它们仅用作参考，仅在其他选择器引用时才会生成代码。这可以帮助您的CSS代码更加高效和轻巧。通过使用占位符代替Mixins，您可以确保您的CSS代码精简和高效，从而使您的Web应用程序更快，对用户更敏感。