Sass @Import Regeln und Benennung

Question

Ich habe viele Artikel über das Importieren von Sass-Dateien in Sass gelesen, aber ich kann nicht scheinen, meinen Kopf darum zu wickeln. Es scheint viele verschiedene Möglichkeiten zu geben, dies zu tun.

Ich habe versucht, eine fellas Setup kopieren, die wie folgt aussieht:

global 
- style.scss 

Components 
- buttons.scss 
- colors.scss 
- fonts.scss 
- etc. 

Utils 
- normalize.scss 

Also lassen Sie uns sagen, dass dies mein Setup ist. Einige Leute sagen, ich sollte jede scss-Datei mit einem Unterstrich benennen: _buttons.scss während andere sagen, es NICHT zu tun.

Wenn ich in meinem style.scss arbeite, muss ich immer noch ein import url("components.buttons.scss") verwenden, wie ich es immer getan habe oder fehle ich etwas? Wenn ich etwas nicht vermisse, was ist der Unterschied zwischen diesem Setup und einem typischen CSS-Setup?

Answer 1

Ihre sass Dateien Naming mit einem Unterstrich bedeutet im Allgemeinen, dass er die Datei verstanden wird wird @import ed und doesn deshalb Sie müssen (und werden es nicht sein!) als eigenständige Datei kompiliert werden - obwohl dies von Ihrem Build-System und davon abhängen kann, wie es Ihnen geht. c in erster Linie ompiled.

sass Verwendung von the command line, sagen Sie den folgenden Satz von Dateien:

stylesheets/ 
    _reset.scss 
    _fonts.scss 
    _header.scss 
    contact-page.scss 
    style.css 

Wo style.scss könnte enthalten:

@import 'reset.scss'; 
@import 'fonts.scss'; 
@import 'header.scss'; 

(Beachten Sie, dass, wenn sie mit sass Importieren Sie nicht brauchen Fügen Sie die Unterstriche hinzu)

Nach dem Kompilieren enthält Ihr neues Verzeichnis stylesheets/ nur style.css a nd contact-page.css und style.scss enthalten alle Inhalte von reset, fonts und header. Die unterstrichenen Dateien werden nicht von selbst kompiliert.

Wenn Sie _reset.scss als reset.scss umbenennen, wäre es zu reset.css kompilieren, aber ihr Inhalt wäre auch in style.css aufgenommen werden, da Sie es auch importieren.

Also: Verwenden Sie Unterstriche in Ihren Dateinamen, wenn Sie die Datei nicht selbst benötigen und @import es in ein anderes einfügen.

Answer 2

So strukturieren wir ein Sass-Projekt.

<pre>stylesheets/ 
 
| 
 
|-- modules/    # Common modules 
 
| |-- _all.scss   # Include to get all modules 
 
| |-- _utility.scss  # Module name 
 
| |-- _colors.scss  # Etc... 
 
| ... 
 
| 
 
|-- partials/    # Partials 
 
| |-- _base.sass  # imports for all mixins + global project variables 
 
| |-- _buttons.scss  # buttons 
 
| |-- _figures.scss  # figures 
 
| |-- _grids.scss  # grids 
 
| |-- _typography.scss # typography 
 
| |-- _reset.scss  # reset 
 
| ... 
 
| 
 
|-- vendor/    # CSS or Sass from other projects 
 
| |-- _colorpicker.scss 
 
| |-- _jquery.ui.core.scss 
 
| ... 
 
| 
 
`-- main.scss   # primary Sass file 
 
</pre>

Primary sass Datei wird wie folgt

// Modules and Variables 
@import "partials/base"; 

// Partials 
@import "partials/reset"; 
@import "partials/typography"; 
@import "partials/buttons"; 
@import "partials/figures"; 
@import "partials/grids"; 

// Third-party 
@import "vendor/colorpicker"; 
@import "vendor/jquery.ui.core"; 

more info

Answer 3

Wenn Sie einen Unterstrich zum Anfang des Dateinamens hinzufügen, wird Sass ihn nicht kompilieren. Wenn Sie also colors.scss nicht nach colors.css kompilieren möchten, benennen Sie stattdessen die Datei _colors.scss. Dateien, die auf diese Weise benannt werden, werden in der Sass-Terminologie als Teilzeichen bezeichnet.

Mehr darüber können Sie lesen here.