Question

我们有多个.scss文件，我们通过Grunt（使用Compass和Ruby）编译，然后缩小为一个styles.css文件。该文件正在所有网站上使用。

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

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";

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

对于1个名为＆＃34;目录＆＃34;的特殊网站;我们想添加一个名为catalog.css的专用样式表。

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

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";

// 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和settings css都不存在。

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

Answer 1

我不确定mixin文件是否与差异有关，mixin文件只是添加了mixins，就像网格类mixin一样，因此，它对库输出没有意义。

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

styles.scss 还有一个catalogue.scss没有的行;

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

这很可能是导入或更实际的，激活基础库，这是负责库输出的文件，因此，两个css文件的差异。

为什么这个SCSS / SASS Mixin会阻止不必要的进口？

1 个答案: