[RUBY] Verwenden Sie sassc direkt

Die meisten Leute, die CSS in Frameworks wie Rails und Sinatra bearbeiten, schreiben in der Sass-Sprache. Es ist mir eigentlich egal, weil das Framework alles macht, aber in vielen Fällen werden Sie von dem Edelstein sassc [^ sassc] betreut. ..

[^ sassc]: Früher wurde ein Edelstein namens sass verwendet, der jedoch durch einen schnellen sassc ersetzt wurde, der die Verarbeitung in C implementiert.

In diesem Artikel geht es um den direkten Umgang mit sassc.

Es gibt zwei Sass-Sprachsyntaxen, die von Anfang an existierende "Sass-Syntax" und die später hinzugefügte "SCSS-Syntax". In diesem Artikel wird ein Beispiel mit der Sass-Syntax [^ Notation] gezeigt. Die SCSS-Syntax ist im Wesentlichen dieselbe.

[^ Notation]: Ich denke, der einzige Vorteil der SCSS-Syntax gegenüber der Sass-Syntax besteht darin, dass sie "aufwärtskompatibel mit CSS" ist, aber warum wird SCSS überwiegend verwendet?

Versuchen Sie es mit

require

In Gemfile

gem "sassc"

Mit einem Skript

require "bundler"
Bundler.require

Sie können es verwenden, wenn Sie dies tun.

Verwenden Sie in der Umgebung, in der sassc installiert ist, ein Skript

requrie "sassc"

Sie können es verwenden, wenn Sie dies tun. In diesem Artikel wird die letztere Methode verwendet.

Konvertieren

Geben Sie einfach die Quelle Sass-Quelle an, erstellen Sie ein SassC :: Engine-Objekt und rufen Sie die Render-Methode auf.

Schreiben Sie wie folgt.

require "sassc"

source = <<SASS
body
  margin: 0
SASS

p SassC::Engine.new(source, syntax: :sass, style: :compact).render
# => "body { margin: 0; }\n"

Möglichkeit

Wichtige Optionen für SassC :: Engine.new sind:

:syntax

Geben Sie die Syntax als Symbol an.

Verwenden Sie syntax :: sass für die Sass-Syntax und syntax :: scss für die SCSS-Syntax.

:style

Wählen Sie das Ausgabeformat aus ": verschachtelt", ": kompakt", ": komprimiert", ": erweitert".

Das kleinste ist ": komprimiert".

Das gebräuchlichste (?) Format von CSS ist ": erweitert".

Umgang mit Nicht-ASCII-Zeichen

Ich habe die Spezifikationen nicht überprüft, aber es scheint, dass das Format des Konvertierungsergebnisses geringfügig unterschiedlich ist, je nachdem, ob es Nicht-ASCII-Zeichen enthält.

In der Tat ist dies die Motivation, einen Artikel zu schreiben. Besonders hervorzuheben ist der komprimierte Stil. Vergleichen Sie diesen mit dem erweiterten.

Schauen wir uns zunächst ein Beispiel für nur ASCII-Zeichen an.

Sass

Sass

a
  font-family: "hoge"

Annehmen. Die Ausgabe von erweitert und komprimiert ist wie folgt.

erweiterter Stil

a {
  font-family: "hoge";
}

komprimierter Stil

a{font-family:"hoge"}

Daran ist nichts Besonderes.

Als nächstes der folgende Fall, in dem Sass Nicht-ASCII-Zeichen enthält.

Sass

a
  font-family: "Hoge"

Wenn Sie dies als erweitert ausgeben, sieht es folgendermaßen aus:

erweiterter Stil

@charset "UTF-8";
a {
  font-family: "Hoge";
}

Hmm, mit @charset" UTF-8 ";. Ich verstehe, das macht Sinn.

Was ist also mit komprimiert?

komprimierter Stil

a{font-family:"Hoge"}

Oh? Es gibt kein "@ charset". Ist das okay?

Ein Rätsel lösen

Tatsächlich scheint im vorherigen Experiment die CSS-Ausgabe im "komprimierten" Stil, wenn sie Nicht-ASCII-Zeichen enthält, mit "a" zu beginnen, aber das ist nicht der Fall. Am Anfang befindet sich eine Stückliste (Byte Order Mark).

Um das zu bestätigen

a
  font-family: "Hoge"

Lassen Sie uns die ersten 5 Zeichencodepunkte des Ergebnisses der Konvertierung in CSS mit "komprimiert" anzeigen:

require "sassc"

source = <<SASS
a
  font-family: "Hoge"
SASS

css_text = SassC::Engine.new(source, syntax: :sass, style: :compressed).render

puts css_text.codepoints.take(5).map{ |c| "U+%04X" % c }.join(" ")
# => U+FEFF U+0061 U+007B U+0066 U+006F

Immerhin war der erste Buchstabe U + FEFF, also Stückliste.

Als ich alle vier Stile ausprobierte, hatte nur "komprimiert" eine Stückliste. Außerdem wurde die Stückliste nicht nur für ASCII-Zeichen hinzugefügt.

Ich habe es nicht gut untersucht, aber es scheint, dass das obige Verhalten kein Merkmal der Bibliothek namens sassc ist, sondern eine Spezifikation der Sass-Sprache. Daher denke ich, dass das gleiche Ergebnis mit anderen Sass-Verarbeitungssystemen wie Dart Sass erzielt werden kann (ich habe es nicht bestätigt).

U + FEFF ist übrigens unsichtbar [^ unsichtbar], daher ist es schwer zu bemerken, dass es enthalten ist. Dies verursacht manchmal ein großes Problem, das ich in einem anderen Artikel unten erwähnt habe.

Pass auf Sass 'spuckende Stückliste auf! --Qiita

[^ unsichtbar]: Es ist ein Raum mit einer Breite von Null, daher ist es natürlich, dass Sie ihn nicht sehen können. Abhängig von der Anzeigeumgebung (Texteditor, Code-Editor, Terminal usw.) kann jedoch eine Anzeige angezeigt werden.