主页 / 问题 / 862694
Accepted
Daniil Dubchenko
Asked:2020-08-01 01:38:03 +0000 UTC2020-08-01 01:38:03 +0000 UTC

SCSS。如何使用@extend '.class' 但最终文件中没有'.class'

  • 772

我使用 scss 并通过 @import 连接引导程序，但为了不将引导类与 html 乱扔垃圾并坚持使用 bam，例如，我使用 @extend

.header {
   @extend .container;
...

但是所有引导类最终都在最终编译的 main.css 文件中。一般来说，问题是是否可以扩展引导类，但这样这些类本身就不会进入最终文件

我通过wiredep自动连接了凉亭依赖项

// bower:scss

@import "../../libs/bootstrap/scss/bootstrap.scss";
css

2 个回答

  1. Best Answer

    花了不到一年的时间，达到了理想的解决方案。

    从库中提取所需的代码，并将其添加到带有 mixins 的单独文件中，用.class模板的创建替换类的创建%class。这里只有一个网格，因为 我不在引导程序中使用其余部分。现在最终的 css 文件中的代码干净了 1.5K 行

        %container {
        @include make-container();

        @include make-container-max-widths();
    }

    %container-fluid {
        @include make-container();
    }

    %row {
        @include make-row();
    }


    @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
        // Common properties for all breakpoints
        %grid-column {
            position: relative;
            width: 100%;
            padding-right: $gutter / 2;
            padding-left: $gutter / 2;
        }

        @each $breakpoint in map-keys($breakpoints) {
            $infix: breakpoint-infix($breakpoint, $breakpoints);

            // Allow columns to stretch full width below their breakpoints
            @for $i from 1 through $columns {
                %col#{$infix}-#{$i} {
                    @extend %grid-column;
                }
            }
            %col#{$infix},
            %col#{$infix}-auto {
                @extend %grid-column;
            }

            @include media-breakpoint-up($breakpoint, $breakpoints) {
                // Provide basic `.col-{bp}` classes for equal-width flexbox columns
                %col#{$infix} {
                    flex-basis: 0;
                    flex-grow: 1;
                    max-width: 100%;
                }
                %col#{$infix}-auto {
                    flex: 0 0 auto;
                    width: auto;
                    max-width: 100%; // Reset earlier grid tiers
                }

                @for $i from 1 through $columns {
                    %col#{$infix}-#{$i} {
                        @include make-col($i, $columns);
                    }
                }

                %order#{$infix}-first { order: -1; }

                %order#{$infix}-last { order: $columns + 1; }

                @for $i from 0 through $columns {
                    %order#{$infix}-#{$i} { order: $i; }
                }

                // `$columns - 1` because offsetting by the width of an entire row isn't possible
                @for $i from 0 through ($columns - 1) {
                    @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
                        %offset#{$infix}-#{$i} {
                            @include make-col-offset($i, $columns);
                        }
                    }
                }
            }
        }
    }

    @include make-grid-columns();

    @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            @each $value in $displays {
                %d#{$infix}-#{$value} { display: $value !important; }
            }
        }
    }

    PS Onlyidea发誓这样的模板不存在，因为它们是动态创建的。没什么大不了，但我想我会指出来

    • 3

  2. 为您的类使用 sass mixins 或使用模板选择器和 mixins 对其进行样式设置，并通过@extend.

    引导 sass 混合

    • 2

相关问题