SASS - 在多个文件中使用变量

3 回答

• 255

  你可以这样做：

  我有一个名为utilities的文件夹，里面有一个名为_variables.scss的文件

  在该文件中我声明变量如下：

  $black: #000;
  $white: #fff;
  

  然后我有style.scss文件，我在其中导入我的所有其他scss文件，如下所示：

  // Utilities
  @import "utilities/variables";
  
  // Base Rules
  @import "base/normalize";
  @import "base/global";
  

  然后，在我导入的任何文件中，我应该能够访问我声明的变量 .

  只需确保在您想要使用它的任何其他文件之前导入变量文件 .

  回复于 2024-05-03T20:10:34+08:00
• 62

  这个答案显示了我最终如何使用这个以及我遇到的额外陷阱 .

  我制作了一个主SCSS文件 . 此文件必须在开头有一个下划线才能导入：

  // assets/_master.scss 
  $accent: #6D87A7;           
  $error: #811702;
  

  然后，在我所有其他.SCSS文件的 Headers 中，我导入主文件：

  // When importing the master, you leave out the underscore, and it
  // will look for a file with the underscore. This prevents the SCSS
  // compiler from generating a CSS file from it.
  @import "assets/master";
  
  // Then do the rest of my CSS afterwards:
  .text { color: $accent; }
  

  重要

  在 _master.scss 文件中不要包含任何变量，函数声明和其他SASS功能 . 如果您包含实际的CSS，它将在您导入master的每个文件中复制此CSS .

  回复于 2024-05-03T20:10:34+08:00
• -1

  创建一个index.scss，然后您可以导入所有文件结构 . 我将从企业项目中粘贴您的索引，也许它将帮助其他如何在css中构建文件：

  @import 'base/_reset';
  
  @import 'helpers/_variables';
  @import 'helpers/_mixins';
  @import 'helpers/_functions';
  @import 'helpers/_helpers';
  @import 'helpers/_placeholders';
  
  @import 'base/_typography';
  
  @import 'pages/_versions';
  @import 'pages/_recording';
  @import 'pages/_lists';
  @import 'pages/_global';
  
  @import 'forms/_buttons';
  @import 'forms/_inputs';
  @import 'forms/_validators';
  @import 'forms/_fieldsets';
  
  @import 'sections/_header';
  @import 'sections/_navigation';
  @import 'sections/_sidebar-a';
  @import 'sections/_sidebar-b';
  @import 'sections/_footer';
  
  @import 'vendors/_ui-grid';
  
  @import 'components/_modals';
  @import 'components/_tooltip';
  @import 'components/_tables';
  @import 'components/_datepickers';
  

  您可以使用gulp / grunt / webpack等观看它们，例如：

  gulpfile.js

  // SASS任务

  var gulp = require('gulp');
  var sass = require('gulp-sass');
  //var concat = require('gulp-concat');
  var uglifycss = require('gulp-uglifycss');
  var sourcemaps = require('gulp-sourcemaps');
  
  gulp.task('styles', function(){
      return gulp
              .src('sass/**/*.scss')
              .pipe(sourcemaps.init())
              .pipe(sass().on('error', sass.logError))
              .pipe(concat('styles.css'))
              .pipe(uglifycss({
                  "maxLineLen": 80,
                  "uglyComments": true
              }))
              .pipe(sourcemaps.write('.'))
              .pipe(gulp.dest('./build/css/'));
  });
  
  gulp.task('watch', function () {
      gulp.watch('sass/**/*.scss', ['styles']);
  });
  
  gulp.task('default', ['watch']);
  

  回复于 2024-05-03T20:10:34+08:00