SASS - використання змінних у кількох файлах

Я хотів би зберегти один центральний .scss файл, який зберігає всі визначення змінних SASS для проекту.

// _master.scss 

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

Проект матиме велику кількість файлів CSS, що обумовлено його характером. Важливо, щоб я оголосив всі змінні стилі загального проекту в одному місці.

Чи є спосіб це зробити в SCSS?

Ви можете це зробити так:

У мене папка з назвою утиліти, і всередині мене є файл з ім'ям _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жоден файл, просто використовувати його.