SASS - değişkenleri birden fazla dosyada kullanma

Bir proje için tüm SASS değişken tanımlarını depolayan bir merkezi .scss dosyasını tutmak istiyorum.

// _master.scss 

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

Projenin doğası gereği çok sayıda CSS dosyası olacaktır. Proje genelindeki tüm stil değişkenlerini tek bir yerde beyan etmem önemlidir.

Bunu SCSS'de yapmanın bir yolu var mı?

Bunu şu şekilde yapabilirsiniz:

Yardımcı programlar adlı bir klasör var ve içinde _variables.scss adlı bir dosya var

bu dosyada ben gibi değişkenler beyan:

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

sonra böyle tüm diğer scss dosyaları almak hangi style.scss dosyası var:

// Utilities
@import "utilities/variables";

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

sonra, içe aktardığım dosyaların herhangi birinde, bildirdiğim değişkenlere erişebilmeliyim.

Değişken dosyasını, kullanmak istediğiniz diğer dosyalardan önce içe aktardığınızdan emin olun.

Bu cevap, bunu nasıl kullandığımı ve vurduğum ek tuzakları gösteriyor.

Bir ana SCSS dosyası hazırladım. Bu dosyanın içe aktarılması için başında bir alt çizgi olmalıdır :

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

Sonra, diğer tüm .SCSS dosyalarımın başlığında, master'ı içe aktarıyorum:

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

ÖNEMLİ

_master.scssDosyanıza değişkenler, işlev bildirimleri ve diğer SASS özellikleri dışında hiçbir şey eklemeyin . Gerçek CSS eklerseniz, bu CSS'yi ana verileri aktardığınız her dosyada çoğaltır.

Bu soru uzun zaman önce soruldu, bu yüzden güncellenmiş bir cevap göndereceğimi düşündüm.

Şimdi kullanmaktan kaçınmalısınız@import . Dokümanlardan alınmıştır:

Sass önümüzdeki birkaç yıl içinde aşamalı olarak aşamalı olarak kaldıracak ve sonunda dilden tamamen kaldıracaktır. Bunun yerine @use kuralını tercih edin.

Nedenlerin tam listesi burada bulunabilir

Şimdi @useaşağıda gösterildiği gibi kullanmalısınız :

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

Ayrıca ad alanı için bir takma ad da oluşturabilirsiniz:

_otherFile.scss

@use 'variables' as v;

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

Bir index.scss oluşturun ve orada sahip olduğunuz tüm dosya yapısını alabilirsiniz. Ben dizinimi bir kurumsal projeden yapıştıracağım, belki diğer css dosyaları yapılandırmak için yardımcı olacaktır:

@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';

Ve bunları gulp / grunt / webpack vb.İle izleyebilirsiniz:

gulpfile.js

// SASS Görevi

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

Global bir sass dosyasına renk tabanlı bir sınıf yazmaya ne dersiniz, bu yüzden değişkenlerin nerede olduğu umurumda değil. Tıpkı aşağıdaki gibi:

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

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

ve sonra background-colorsınıfı herhangi bir dosyada kullanabiliriz. Demek istediğim variable.scss, herhangi bir dosyaya aktarmam gerekmiyor , sadece kullan.