Question

在Sass中，我有一些组件（导航栏，页脚）和一些@mixins（字体），还有一个控制字体的功能。

我@import字体的位置，并在字体功能中执行@include，在此功能中，我只选择要使用的字体。

问题在于，当我将组件（导航栏和页脚）作为“部分”分开时，它们具有相同的来源，而我在每个 .scss 中的那些来源中都使用了@import。 / p>

并以此在我生成的 .scss 文件中生成重复代码。我想知道什么是好的做法，如果我做对了，如何避免在 .scss 中重复这些内容？

Answer 1

我不确定这是否能回答您的问题-但是为了防止在Sass中重复，我将创建一个mixin来检查是否已经制作了@include

SCSS

//  Global list to keep track of what mixins has been included 
$include-once: (); 

//  Mixin helper to be used inside other mixins we would like 
//  not to produce duplicate content
@mixin once($mixin-name) {
   //  check if mixin name exists in our list 
   @if not index($include-once, $mixin-name) {

       //  add mixin name to list (using the global flag)
       $include-once: append($include-once, $mixin-name) !global;

       //  print out the content of the mixin
       @content;
   } 
}



//  Use example
@mixin font {
    //  wrap content in the include once wrapper passing the name of the mixin 
    @include once(font){

        //  make sure font import is not nested 
        @at-root {
            @import url("https://fonts.googleapis.com/css?family=Open+Sans");
        }
    }
}


//  Test
.foo { @include font; color: red; }
.bar { @include font; color: green; }
.baz { @include font; color: blue; }

CSS输出

@import url("https://fonts.googleapis.com/css?family=Open+Sans")
.foo {
  color: red;
}
.bar {
  color: green;
}

.baz {
  color: blue;
}

Answer 2

由于看不到您的代码，因此不确定您如何准确导入资源。但是，如果仅生成一个.css文件，则好的做法是将所有内容导入将要编译的文件中，而不是导入每个部分。

假设您具有以下结构：

styles
├─ components
│   ├─ _footer.scss
│   └─ _navbar.scss
├─ settings
│   ├─ _functions.scss
│   └─ _mixins.scss
└─ styles.scss

在此示例中，styles.sccs是唯一将被编译的，它将仅用于导入所有部分（顺序很重要）：

// Settings

@import './settings/mixins';
@import './settings/functions';

// Components

@import './components/footer';
@import './components/navbar';

然后，您可以在组件中使用任何混合或函数，并且所有内容仅导入一次。

为什么我的代码复制文件的CSS？

2 个答案: