Sowohl SCSS- als auch CSS-Dateien im Plugin-Verzeichnis?

Question

Verzeihen Sie mir, wenn das naiv ist, aber ich bin es gewohnt, nur CSS zu verwenden. Sass scheint ziemlich cool zu sein und ich bin dabei, es zu lernen, aber aus irgendeinem Grund haben viele der Javascript- oder jQuery-Plugins, die ich herunterlade, sowohl eine CSS- als auch eine SCSS-Datei, die dem Stylesheet zugeordnet sind. Ich möchte nicht zwei Dateien bearbeiten müssen, um Ergebnisse auf der Seite zu erhalten. Warum sind beide da, wenn sie wie Kopien aussehen, abgesehen von einigen wenigen Schlüsselbereichen? Siehe Abbildung unten, es scheint, als ob es eine zusätzliche CSS-Datei pro SCSS gibt. Ist das, weil einige Browser das SCSS nicht kompilieren können?

CSS and SCSS in same directory

Answer 1

kein Browser (zumindest major) in der Lage, direkt SASS zu verwenden (oder weniger). Sie müssen scss-Dateien immer zu css kompilieren, bevor Sie sie verwenden können.

Sie können CSS kompilieren, indem Sie Tools wie grunt oder gulp erstellen. Sie können es sogar so konfigurieren, dass es Aktualisierungen in scss-Dateien überwacht und css neu kompiliert, wenn etwas geändert wurde.

Sie können folgende Arten von Dateien nach dem Build:

style.scss <- this is source file  
style.css <- this is css file created from SASS file 
style.min.css <- this is css file minified 
style.css.map <- this is source map of scss file 

Here Sie, warum minimierte sind CSS lesen können Dateien. Here können Sie lesen, wofür Quellkarten sind.

Answer 2

Ist das, weil einige Browser das SCSS nicht kompilieren können?

Ja. Es gibt ein Befehlszeilendienstprogramm, das die .scss in .css konvertiert. Wahrscheinlich ist die .map Datei eine Rückumwandlungshilfe für Browser-Inspektoren, die das verstehen.

Immer, wenn ich Dateien generiert (wie ein .min.js oder in Ihrem Fall .css, die von einem .scss kam), ich sicherstellen, dass die entsprechenden Befehlszeilenkonvertierungstool automatisch als Teil meines Build-Skript ausgeführt wird.

Ich bin mir nicht sicher, welche Art von Build-System Sie verwenden, aber es gibt einige Befehlszeile-Tool für die Konvertierung, die ausgeführt werden muss.

Es wird nicht erwartet, dass beide Formate manuell aktualisiert werden. SCSS zu CSS-Befehlszeilenkonvertern existierte lange bevor irgendein Browser (gibt es ihn schon?) Begann, SCSS zu unterstützen.