Użyj kodu SCSS w różnych plikach dla jednego projektu - css, sass, less

Niedawno odwiedziłem stronę internetową, która używa innegopliki dla jego plików LESS; używa pliku dla zmiennych, innego dla miksu itd. i na końcu używa tych plików razem. Na przykład używa zmiennych w pliku zmiennych w plikach mixin.

Jak mogę zrobić to samo, ale dla plików scss?

Odpowiedzi:

Możesz zbudować taką konstrukcję:

_variables.scss:

$color: blue;
$text: "woohooo";

_utils.scss

@mixin awesome-stuff
{
/*magic*/
}

app.scss

@import "variables";
@import "utils"

p
{
color: $color;
@include awesome-stuff;
}

Ale to tylko jeden sposób, aby to zrobić i zależy to od potrzeb twojego projektu.

Użyj @import dyrektywa dołączyć osobne pliki.

Sass rozszerza CSS @import reguła pozwalająca na importowanie plików SCSS i Sass. Wszystkie zaimportowane pliki SCSS i Sass zostaną połączone w jeden plik wyjściowy CSS. Ponadto dowolne zmienne lub miksy zdefiniowane w importowanych plikach mogą być używane w pliku głównym.