SASS-複数のファイルで変数を使用する

プロジェクトのすべてのSASS変数定義を格納する1つの中央.scssファイルを保持したいと思います。

// _master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc... 

その性質上、プロジェクトには多数のCSSファイルが含まれます。プロジェクト全体のすべてのスタイル変数を1つの場所で宣言することが重要です。

SCSSでこれを行う方法はありますか？

あなたはこのようにそれを行うことができます：

私はutilitiesという名前のフォルダーがあり、その中に_variables.scssという名前のファイルがあります

そのファイルでは、次のように変数を宣言します。

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

次に、style.scssファイルがあり、次のように他のすべてのscssファイルをインポートします。

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

次に、インポートしたすべてのファイル内で、宣言した変数にアクセスできるはずです。

変数ファイルを使用する前に、変数ファイルをインポートするようにしてください。

この回答は、私がこれをどのように使用したかと、追加の落とし穴を示しています。

マスターSCSSファイルを作りました。このファイルをインポートするには、最初にアンダースコアが必要です。

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

次に、他のすべての.SCSSファイルのヘッダーに、マスターをインポートします。

// 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を含めると、マスターをインポートするすべてのファイルでこのCSSが複製されます。

この質問はずっと前に尋ねられたので、私は更新された回答を投稿したいと思いました。

の使用は避けてください@import。ドキュメントから取得：

Sassは今後数年間で段階的に段階的に廃止し、最終的には言語から完全に削除します。代わりに@useルールを使用してください。

理由の完全なリストはここにあります

@use次のように使用する必要があります。

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

名前空間のエイリアスを作成することもできます：

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

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']);

グローバルsassファイルに色ベースのクラスを書き込むのはどうですか？したがって、変数がどこにあるかを気にする必要はありません。次のように：

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

そしてbackground-color、任意のファイルでクラスを使用できます。私のポイントは、variable.scssファイルにインポートする必要はなく、それを使用することです。