SASS - używaj zmiennych w wielu plikach


217

Chciałbym zachować jeden centralny plik .scss, który przechowuje wszystkie definicje zmiennych SASS dla projektu.

// _master.scss 

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

Projekt będzie miał dużą liczbę plików CSS ze względu na swój charakter. Ważne jest, aby zadeklarować wszystkie zmienne stylu dla całego projektu w jednym miejscu.

Czy jest na to sposób w SCSS?


Jestem pewien, że nie jest to możliwe. Próbowałem tego samego jakiś czas temu i nie udało mi się go uruchomić.
DrCord,

8
@DrCord przeciwnie jest główną cechą SASS: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
nuda

Słodkie! Myślę, że mogłem źle odczytać to stwierdzenie: „Dyrektywy, które są dozwolone tylko na poziomie podstawowym dokumentu, takie jak mixin lub charset, nie są dozwolone w plikach importowanych w zagnieżdżonym kontekście”. i nieprawidłowo czytać część „zagnieżdżonego kontekstu”
DrCord,

Odpowiedzi:


325

Możesz to zrobić w następujący sposób:

Mam folder o nazwie utilities i wewnątrz niego mam plik o nazwie _variables.scss

w tym pliku deklaruję zmienne w następujący sposób:

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

następnie mam plik style.scss, w którym importuję wszystkie inne moje pliki scss, takie jak to:

// Utilities
@import "utilities/variables";

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

następnie w dowolnym pliku, który zaimportowałem, powinienem mieć dostęp do zmiennych, które zadeklarowałem.

Upewnij się tylko, że importujesz plik zmiennej przed innymi, w których chcesz go użyć.


4
Idealny. Właśnie to miałem na myśli i potrzebowałem. Ostatnie pytanie: czy wszystkie importowane pliki powinny zaczynać się znakiem podkreślenia? Podkreślono nazwę pliku, ale nie udało się to w deklaracjach @import.
dthree

46
pliki te są uważane za pliki częściowe, a nazwy muszą zaczynać się od podkreślników, pomijając je podczas importowania. jest naprawdę dobry artykuł, który szczegółowo wyjaśnia, dlaczego tutaj: alistapart.com/article/getting-started-with-sass
Joel

7
Należy pamiętać, że można zadeklarować domyślne wewnątrz swoich modułów: $black: #000 !default;. Rzecz !defaultzapobiega resetowaniu zmiennej, jeśli już istnieje.
Andrey Mikhaylov - lolmaus

2
Dlaczego musimy zrzucić wszystkie zmienne w jednym pliku? Czy nie możemy ich podzielić i upuścić w odpowiednim pliku, który ich potrzebuje? Na przykład zmienne potrzebne do modalnego okna dialogowego nie możemy umieścić ich w _modal.scss?
VJAI

3
Ta odpowiedź nie jest już zalecanym sposobem ponownego wykorzystywania zmiennych w wielu plikach. Zobacz stackoverflow.com/a/61500282/7513192
whiscode

82

Ta odpowiedź pokazuje, jak skończyłem z tym i dodatkowe pułapki, które trafiłem.

Zrobiłem główny plik SCSS. Ten plik musi mieć podkreślenie na początku, aby mógł zostać zaimportowany:

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

Następnie w nagłówku wszystkich innych moich plików .SCSS importuję wzorzec:

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

WAŻNY

Nie dołączaj do _master.scsspliku niczego oprócz zmiennych, deklaracji funkcji i innych funkcji SASS . Jeśli podasz rzeczywisty CSS, skopiuje ten CSS do każdego pliku, do którego zaimportujesz wzorzec.


5
Bardzo dziękuję za komentarz na temat pliku, który musi zaczynać się znakiem podkreślenia! Właśnie spędziłem około 3 godzin, próbując dowiedzieć się, dlaczego brakuje mi wielu stylów Foundation. Zmieniłem nazwę pliku ustawień Fundacji, aby zaczynał się od podkreślenia i hej presto! Ale teraz, kiedy ponownie zmienię nazwę pliku, nadal działa? Co....? No cóż ... Wzdycha i akceptuje, że teraz działa
poshaughnessy

4
Nie zmieniaj go ponownie - prawdopodobnie działa on na jakiś wygenerowany CSS z pliku SCSS, gdy działał. Wystarczy użyć podkreślenia. Ale poza tym świetnie działa!
dthree

@poshaughnessy może to działać, ponieważ sass używa pamięci podręcznej, więc może być buforowane. Nie w 100% pewny.
PeterM

to samo dla sassa ??
Martian2049

1
Prawidłowo jesteś @ rinogo.
3

19

To pytanie zostało zadane dawno temu, więc pomyślałem, że opublikuję zaktualizowaną odpowiedź.

Teraz powinieneś unikać używania @import. Zaczerpnięte z dokumentów:

Sass będzie stopniowo go wycofywać w ciągu najbliższych kilku lat, a ostatecznie całkowicie usunie go z języka. Zamiast tego wolisz regułę @use.

Pełna lista powodów znajduje się tutaj

Powinieneś teraz używać, @usejak pokazano poniżej:

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

Możesz także utworzyć alias dla przestrzeni nazw:

_otherFile.scss

@use 'variables' as v;

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

1
To powinna być teraz wybrana odpowiedź, ponieważ „import” jest oznaczony jako przestarzały i zostanie usunięty w przyszłości.
TyrionGraphiste

To jeden potrzebuje więcej upvotes
Ludovico

3

Utwórz plik index.scss i tam możesz zaimportować całą posiadaną strukturę plików. Wkleję ci mój indeks z projektu korporacyjnego, może pomoże to innym, jak ustrukturyzować pliki w 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';

Możesz je oglądać za pomocą gulp / grunt / webpack itp., Takich jak:

gulpfile.js

// Zadanie 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
Czy nie należy pominąć podkreślenia w instrukcjach @import?
Quantum7

1
Sass „@import” działa w obie strony. możesz napisać URI z podkreśleniem lub bez. również z zakończeniem „.scss” lub bez niego.
Pony

1

Co powiesz na zapisanie klasy opartej na kolorach w globalnym pliku sass, więc nie musimy się przejmować, gdzie są zmienne. Podobnie jak poniżej:

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

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

a następnie możemy użyć background-colorklasy w dowolnym pliku. Chodzi mi o to, że nie muszę importować variable.scssdo żadnego pliku, wystarczy go użyć.


Oczywisty jest zły pomysł, możesz mieć wiele zmiennych i łatwiej jest utrzymywać indeks za pomocą samych importów, a każdy plik, który masz, ma własną propozycję.
Carnaru Valentin
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.