SASS - использование переменных в нескольких файлах

Ответ 1

Вы можете сделать это следующим образом:

У меня есть папка с именем utilities и внутри, у меня есть файл с именем _variables.scss

в этом файле я объявляю такие переменные:

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

то у меня есть файл style.scss, в который я импортирую все мои другие scss файлы, например:

// Utilities
@import "utilities/variables";

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

то в любом из файлов, которые я импортировал, я должен иметь доступ к объявленным переменным.

Просто убедитесь, что вы импортируете файл переменной перед любым из других, которые вы хотели бы использовать.

Ответ 2

Этот ответ показывает, как я закончил использовать это и дополнительные ловушки, которые я ударил.

Я создал главный 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; }

ВАЖНО

Не включайте ничего, кроме переменных, деклараций функций и других функций SASS в ваш файл _master.scss. Если вы включите фактический CSS, он будет дублировать этот CSS для каждого файла, в который вы импортируете мастер.

Ответ 3

Создайте 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']);

Ответ 4

Как насчет записи какого-либо цветового класса в глобальный файл sass, поэтому нам не нужно заботиться о том, где находятся переменные. Так же, как следующее:

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

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

и затем мы можем использовать класс background-color в любом файле. Суть в том, что мне не нужно импортировать variable.scss в любой файл, просто используйте его.