SASS - gunakan variabel di beberapa file

Saya ingin menyimpan satu file .scss pusat yang menyimpan semua definisi variabel SASS untuk sebuah proyek.

// _master.scss 

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

Proyek ini akan memiliki sejumlah besar file CSS, karena sifatnya. Adalah penting bahwa saya menyatakan semua variabel gaya proyek-lebar di satu lokasi.

Apakah ada cara untuk melakukan ini di SCSS?

Anda dapat melakukannya seperti ini:

Saya memiliki folder bernama utilitas dan di dalamnya saya memiliki file bernama _variables.scss

dalam file itu saya mendeklarasikan variabel seperti:

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

maka saya memiliki file style.scss di mana saya mengimpor semua file scss saya yang lain seperti ini:

// Utilities
@import "utilities/variables";

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

kemudian, dalam salah satu file yang telah saya impor, saya harus dapat mengakses variabel yang telah saya nyatakan.

Pastikan Anda mengimpor file variabel sebelum yang lain Anda ingin menggunakannya.

Jawaban ini menunjukkan bagaimana saya akhirnya menggunakan ini dan perangkap tambahan yang saya tekan.

Saya membuat file master SCSS. File ini harus memiliki garis bawah pada awalnya agar dapat diimpor:

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

Kemudian, di header semua file .SCSS saya yang lain, saya mengimpor master:

// 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; }

PENTING

Jangan menyertakan apa pun kecuali variabel, deklarasi fungsi dan fitur SASS lainnya dalam _master.scssfile Anda . Jika Anda menyertakan CSS yang sebenarnya, itu akan menduplikasi CSS ini di setiap file yang Anda impor ke master.

Pertanyaan ini sudah lama ditanyakan jadi saya pikir saya akan mengirim jawaban yang diperbarui.

Anda sekarang harus menghindari penggunaan @import. Diambil dari dokumen:

Sass akan secara bertahap menghapusnya selama beberapa tahun ke depan, dan akhirnya menghapusnya dari bahasa sepenuhnya. Lebih suka aturan @use saja.

Daftar alasan lengkap dapat ditemukan di sini

Anda sekarang harus menggunakan @useseperti yang ditunjukkan di bawah ini:

_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;
}

Anda juga dapat membuat alias untuk namespace:

_otherFile.scss

@use 'variables' as v;

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

Buat index.scss dan di sana Anda dapat mengimpor semua struktur file yang Anda miliki. Saya akan menempelkan Anda indeks saya dari proyek perusahaan, mungkin itu akan membantu cara struktur file lain di 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';

Dan Anda dapat menontonnya dengan tegukan / mendengus / webpack dll, seperti:

gulpfile.js

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

Bagaimana kalau menulis beberapa kelas berbasis warna dalam file sass global, jadi kita tidak perlu peduli di mana variabelnya. Seperti berikut ini:

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

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

dan kemudian, kita bisa menggunakan background-colorkelas dalam file apa pun. Maksud saya adalah saya tidak perlu mengimpor variable.scssfile apa pun, cukup gunakan saja.