Question

让我举个例子说明我的问题。这些是我的三个部分 _colors.scss

 */////////_colors.scss/////////*
   $c-base: #063579;
   $c-secondary: #FDB813;
   $c-tertiary: #f2f5f8;

_buttons.scss

    @import 'colors';
   .btn {
       color: $c-base;
         }

_base.scss

    @import 'colors';
   body {
      color: $c-base;
        }

主要的sass文件 styles.scss

   */////////styles.scss/////////*
   @import 'colors';
   @import 'buttons';
   @import 'base';
   div{
      background-color:$c-secondary;
      }

现在问题是style.css导入_color.scss 3次，导致css中出现大量冗余代码。

我使用以下gulp任务将sass转换为css

 gulp.task('sass', function() {
 return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss 
 in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
  stream: true
}))
});

Answer 1

您无需将'_colors'导入'_buttons'和'_base'。您首先在'styles.scss'中导入它的事实将使它们的内容都可用。

从'_buttons'和'_base'中删除@import 'colors'。您的代码仍然可以正常工作，您将避免冗余。

_colors.scss

$c-base: #063579;
$c-secondary: #FDB813;
$c-tertiary: #f2f5f8;

_buttons.scss

.btn {
   color: $c-base;
}

_base.scss

body {
    color: $c-base;
}

styles.scss

@import 'colors';
@import '_buttons';
@import 'base';
div{
    background-color:$c-secondary;
}

运行compass compile后，我获得了：

styles.css的

/* line 1, ../../sass/_buttons.scss */
.btn {
    color: #063579;
}

/* line 1, ../../sass/_base.scss */
body {
    color: #063579;
}

/* line 4, ../../sass/styles.scss */
div {
    background-color: #FDB813;
}

Answer 2

此coding问题和text editor or IDE建议问题。您可以为text editor or IDE写作选择一个好的SCSS or SASS，并阅读有关SASS file structure, Variables, @maxin, function etc的更多信息。

检查此IDE和编辑器

Visual Studio Code // It's free and available for all platform. You need to choose approprite plugin for SCSS or SASS.

Webstrome // It's not free but available for all platform. Webstrome is good for write HTML, CSS, SCSS, SASS, LESS, TypeScript, Javascript and more.

NetBeans // It's free for use and available for all platform.

文件结构示例

_color.scss

$c-base: #063579;
$c-secondary: #FDB813;
$c-tertiary: #f2f5f8;

_buttons.scss

.btn {
    color: $c-base;
}

_base.scss

body{
    color: $c-base;
}

style.scss

@import "color.scss;"
@import "button.scss;"
@import "base.scss;"

如何避免sass partials生成冗余css代码？

2 个答案: