css - 为什么这个 SCSS/SASS Mixin 会阻止不必要的导入？

Question

我们有多个 .scss 文件，我们通过 Grunt(使用 Compass 和 Ruby)编译这些文件，然后缩小到一个 styles.css 文件中。所有站点都在使用此文件。

<link rel="stylesheet" href="styles.css">

样式.scss

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/base/hse-init.scss";
@import "lib/swiper/swiper.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/foundation.scss";

// All other custom styles
@import "global/base/hse-alert.scss";
@import "global/base/hse-typography.scss";
// lots more imports here...

对于 1 个名为“catalog”的特殊站点，我们想添加一个名为 catalog.css 的专用样式表。

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="catalog.css">

目录.scss

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/_settings.scss";
@import "global/base/hse-iconfont-catalog.scss";

// custom css
@import "modules/content/catalog/hse-catalog-products.scss";
@import "modules/content/catalog/hse-filter.scss";
@import "modules/content/catalog/hse-large-filter.scss";
@import "modules/content/catalog/hse-sidebare.scss";
@import "modules/content/catalog/hse-atf-section.scss";
@import "modules/content/catalog/hse-brand-banner.scss";
@import "modules/content/catalog/hse-campaigns.scss";

如您所见，在 catalog.scss 中，我们需要与 styles.scss 中相同的设置和库。不幸的是，这会导致我们希望避免的 catalog.css 中所有库和设置的代码重复。因此，其中一位开发人员添加了一个 mixin:

_mixins.scss

@function grid-calc($colNumber, $totalColumns) {
    $result: percentage($colNumber / $totalColumns);

    @if $result == 0% {
        $result: 0;
    }

    @return $result;
}

@mixin centerer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true, $position: false) {
    // If positioned for default .column, include relative position
    // push and pull require position set
    @if $position or $push or $pull {
        position: relative;
    }

    // If collapsed, get rid of gutter padding
    @if $collapse {
        padding-left: 0;
        padding-right: 0;
    }
    @else if $collapse == false {
        padding-left: $column-gutter / 2;
        padding-right: $column-gutter / 2;
    }

    // If a column number is given, calculate width
    @if $columns {
        width: grid-calc($columns, $total-columns);

        // If last column, float naturally instead of to the right
        @if $last-column {
            float: $opposite-direction;
        }
    }

    // Source Ordering, adds left/right depending on which you use.
    @if $push {
        #{$default-float}: grid-calc($push, $total-columns);
        #{$opposite-direction}: auto;
    }

    @if $pull {
        #{$opposite-direction}: grid-calc($pull, $total-columns);
        #{$default-float}: auto;
    }

    @if $float and $last-column == false {
        @if $float == left or $float == true {
            float: $default-float;
        }
        @else if $float == right {
            float: $opposite-direction;
        }
        @else {
            float: none;
        }
    }

    // If centered, get rid of float and add appropriate margins
    @if $center {
        margin-#{$default-float}: auto;
        margin-#{$opposite-direction}: auto;
        float: none;
    }

    // If offset, calculate appropriate margins
    @if $offset {
        margin-#{$default-float}: grid-calc($offset, $total-columns) !important;
    }
}

这个 mixin 被导入到 styles.scss 以及 libs/settings 和我们的自定义代码之间的 catalog.scss:

在 styles.scss 中:

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/base/hse-init.scss";
@import "lib/swiper/swiper.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/foundation.scss";

@import "_mixins.scss"; // <-- HERE

// All other custom styles
@import "global/base/hse-alert.scss";
@import "global/base/hse-typography.scss";
// lots more imports here...

在catalog.scss中:

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/_settings.scss";
@import "global/base/hse-iconfont-catalog.scss";

@import "_mixins.scss"; // <-- HERE

// custom css
@import "modules/content/catalog/hse-catalog-products.scss";
@import "modules/content/catalog/hse-filter.scss";
@import "modules/content/catalog/hse-large-filter.scss";
@import "modules/content/catalog/hse-sidebare.scss";
@import "modules/content/catalog/hse-atf-section.scss";
@import "modules/content/catalog/hse-brand-banner.scss";
@import "modules/content/catalog/hse-campaigns.scss";

出于某种神奇的原因，这似乎解决了问题。当我查看生成的 catalog.css 文件时，所有 lib 和设置 css 都不存在。

他试图向我解释原因，但我不明白。有人能用简单的话告诉我为什么使用这个 mixin 会删除 catalog.scss 中的导入吗？

Answer 1

我不确定 mixin 文件是造成差异的原因，mixin 文件只是添加 mixin，就像网格类 mixin，因此，它对库输出没有任何意义。

现在我相信库文件是基础。

styles.scss 多了一行，而 catalogue.scss 没有；

@import "lib/foundation/foundation.scss";

这很可能是导入，或者更确切地说，是激活基础库，这是负责库输出的文件，因此是两个 css 文件的区别。