如何避免生成冗余CSS代码的Sass部分

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'。您首先在"样式"中导入它的事实将使它们在两个方面都可以提供。

从'_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建议问题。您可以为SCSS or SASS编写选择一个良好的text editor or IDE并阅读有关SASS file structure, Variables, @maxin, function etc的更多信息。

检查此IDE和编辑

Visual Studio代码// 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;"