292

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

// _master.scss 

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

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

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

4

7 に答える 7

404

次のように実行できます。

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

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

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

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

// Utilities
@import "utilities/variables";

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

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

使用したい他のファイルよりも先に変数ファイルをインポートするようにしてください。

于 2013-07-11T17:01:51.980 に答える
4

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']);
于 2017-07-21T12:53:00.123 に答える
4

angular v10では、次のようなことを行い、最初にmaster.scssファイルを作成し、次の変数を含めました。

master.scssファイル：


$theme: blue;

$button_color: red;

$label_color: gray;

master.scss次に、ファイルを上部にインポートしstyle.scssました：

style.scss ファイル:

@use './master' as m;

master.scss必ず上部にインポートしてください。

m名前空間のエイリアスです。

以下の公式ドキュメントの@use代わりに使用します。@import

https://sass-lang.com/documentation/at-rules/import

次に、ファイルで、以下のようにstyles.scss定義されている任意の変数を使用できます。master.scss

someClass {

   backgroud-color: m.$theme;

   color: m.$button_color;

}

それが役立つことを願っています...

ハッピーコーディング:)

于 2020-07-17T17:45:02.723 に答える
1

前述のように、@import新しいバージョンの SASS では の使用はお勧めできません。代わりにファイルの先頭で使用@use "path to SASS partial file"してください。*

@use部分的な SASS ファイルを、メインの SASS ファイルだけでなく、それを使用する各SASS ファイルにインポート (を使用) する必要があります。

で使用したい_variables.scss*という名前のフォルダーに、という名前の SASS ファイルがあるとします。したがって、次のように記述します。partialsheader.scssheader.scss

@use "partials/variables" as *

_variables.scss*with $variable(プレフィックスなし)で定義されたすべての変数を使用できるようになりました。または、名前空間を使用することもできます (前述のクリスチャンのように)

@use "partials/variables" as v

で内部の変数を参照し_variables.scss*ますv.$variable。

* SASS コンパイラはアンダースコアを無視するため、部分的な SASS ファイルごとに個別の CSS ファイルが生成されないことに注意してください。代わりに、それらすべてをメインの SASS ファイルに@use.

于 2022-01-31T14:35:49.597 に答える