SASS - gunakan variabel di beberapa file


217

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?


Saya cukup yakin itu tidak mungkin, saya sudah mencoba hal yang sama beberapa waktu lalu dan tidak bisa membuatnya bekerja.
DrCord

8
@DrCord sebaliknya itu adalah ciri utama dari SASS: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
perasaan bosan

Manis! Saya pikir saya mungkin salah membaca pernyataan ini: "Arahan yang hanya diizinkan di tingkat dasar dokumen, seperti mixin atau charset, tidak diperbolehkan dalam file yang diimpor dalam konteks bersarang." dan tidak membaca dengan benar bagian "nested context".
DrCord

Jawaban:


325

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.


4
Sempurna. Apa yang saya maksud dan butuhkan. Pertanyaan terakhir: Apakah semua file yang diimpor diharapkan dimulai dengan garis bawah? Anda menggarisbawahi nama file Anda, tetapi gagal pada deklarasi impor.
dthree

46
file-file tersebut dianggap sebagai file parsial dan nama harus dimulai dengan garis bawah, Anda meninggalkannya saat mengimpornya. ada artikel yang sangat bagus yang menjelaskan mengapa di sini: alistapart.com/article/getting-started-with-sass
Joel

7
Perhatikan bahwa Anda dapat mendeklarasikan default dalam modul Anda: $black: #000 !default;. The !defaultthingie mencegah variabel-reset jika sudah ada.
Andrey Mikhaylov - lolmaus

2
Mengapa kita harus membuang semua variabel dalam satu file? Tidak bisakah kita memecah dan menjatuhkan mereka di file masing-masing yang membutuhkannya? Misalnya variabel yang diperlukan untuk dialog modal tidak bisakah kita menempatkannya di _modal.scss?
VJAI

3
Jawaban ini bukan lagi cara yang disarankan untuk menggunakan kembali variabel di beberapa file. Silakan lihat stackoverflow.com/a/61500282/7513192
whiscode

82

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.


5
Terima kasih banyak atas komentar Anda tentang file yang harus dimulai dengan garis bawah! Saya hanya menghabiskan sekitar 3 jam untuk mencari tahu mengapa saya kehilangan banyak gaya Foundation. Mengubah nama file file pengaturan Yayasan saya untuk memulai dengan garis bawah dan hei presto! Tetapi sekarang ketika saya mengganti nama file kembali, masih berfungsi? Apa yang ....? Oh well ... Mendesah dan menerimanya sekarang bekerja
poshaughnessy

4
Jangan mengubahnya kembali - itu mungkin 'bekerja' dari beberapa CSS yang dihasilkan dari file SCSS Anda ketika sedang bekerja. Cukup gunakan garis bawah. Tetapi sebaliknya, bagus untuk membuatnya bekerja!
dthree

@poshaughnessy mungkin berhasil karena sass menggunakan cache, jadi itu bisa di-cache. Tidak 100% yakin.
PeterM

sama untuk sass ??
Martian2049

1
Benar Anda @rinogo.
dthree

18

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

1
Ini seharusnya menjadi jawaban yang dipilih, karena "impor" ditandai sebagai usang dan akan dihapus di masa mendatang.
TyrionGraphiste

Yang ini membutuhkan lebih banyak suara positif
ludovico

3

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

1
Bukankah Anda seharusnya menghilangkan garis bawah dari @import statement?
Quantum7

1
Sass '@import' berfungsi dengan baik. Anda dapat menulis URI dengan atau tanpa garis bawah. juga dengan atau tanpa akhir '.scss'.
Pony

1

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.


Jelas itu adalah ide yang buruk, Anda dapat memiliki banyak variabel dan lebih bersih untuk menjaga indeks hanya dengan impor, dan setiap file yang akan dimiliki adalah yang diusulkan sendiri.
Carnaru Valentin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.