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

Я хотел бы сохранить один центральный файл.scss, в котором хранятся все определения переменных SASS для проекта.

// _master.scss 

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

Проект будет иметь большое количество CSS-файлов, что связано с его природой. Важно, чтобы я объявлял все переменные стиля проекта в одном месте.

Есть ли способ сделать это в SCSS?

Источник

8 ответов

Решение

Вы можете сделать это так:

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

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

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

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

// Utilities
@import "utilities/variables";

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

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

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

Источник

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

Теперь вам следует избегать использования@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;
}
Источник

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

Я сделал основной файл 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 во всех файлах, в которые вы импортируете мастер.

Источник

В angular v10 я сделал что-то вроде этого, сначала создал master.scss файл и включил следующие переменные:

master.scss файл:


$theme: blue;

$button_color: red;

$label_color: gray;

Затем я импортировал master.scss файл в моем style.scss на вершине:

файл style.scss:

@use './master' as m;

Убедитесь, что вы импортировали master.scss на вершине.

m это псевдоним для пространства имен;

Использовать @use вместо того @import согласно официальным документам ниже:

https://sass-lang.com/documentation/at-rules/import

Тогда в вашем styles.scss файл вы можете использовать любую переменную, которая определена в master.scss как показано ниже:

someClass {

   backgroud-color: m.$theme;

   color: m.$button_color;

}

Надеюсь, это поможет...

Удачного кодирования:)

Источник

Создайте 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 Task

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']);
Источник

Как упоминалось ранее, использование @importне рекомендуется в более новых версиях SASS. Использовать @use "path to SASS partial file"вместо этого в верхней части файла.*

Вам нужно импортировать (используя ) частичный файл SASS в каждый файл SASS, который его использует, а не только в ваш основной.

Допустим, у нас есть файл SASS с именем в папке с именем partialsкоторые мы хотим использовать в . Итак, в header.scssты пишешь:

      @use "partials/variables" as *

Теперь вы можете использовать все переменные, определенные в with $variable(без префикса). В качестве альтернативы вы можете использовать пространство имен (например, уже упомянутый Кристиан)

      @use "partials/variables" as v

ссылаться на переменные внутри _variables.scss*с v.$variable.

* Обратите внимание, что компилятор SASS игнорирует символы подчеркивания, поэтому для каждого частичного файла SASS не создается отдельный файл CSS. Вместо этого вы можете просто импортировать их все в свой основной файл SASS с помощью @use.

Источник

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

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

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

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

Источник

Я нашел решение для vue3, используя vite. Если вы используете dart-sass, вы можете обойти глобальное ограничение модулей sass с помощью@forwardи@use.

_master.scss

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

_global.scss

      @forward '_master.scss';
// etc...

Затем в vite.config.js настройте параметры css как

      export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "./<path-to-file>/_globals.scss" as *;
        `,
      },
    },
  },
// etc...
});

Как упоминалось в документах sass при импорте модулей без пространства имен.

Однако мы рекомендуем вам делать это только для таблиц стилей, написанных вами; в противном случае они могут ввести новых членов, которые вызовут конфликты имен!

Затем вы можете использовать другие модули @use в любых других таблицах стилей или компонентах, как показано ниже.

      // component file needing a function module

@use 'functions.scss';
Источник
Другие вопросы по тегам