La plupart des personnes qui éditent des CSS dans des frameworks tels que Rails et Sinatra écrivent en langage Sass. Je m'en fiche car le framework fait tout, mais dans de nombreux cas, vous serez pris en charge par un gem appelé sassc [^ sassc] ..
[^ sassc]: Auparavant, une gemme appelée sass était utilisée, mais elle a été remplacée par une sassc rapide qui implémente le traitement en C.
Cet article traite directement avec sassc.
Il existe deux syntaxes de langage Sass, la «syntaxe Sass» qui existait depuis le début et la «syntaxe SCSS» qui a été ajoutée ultérieurement. Dans cet article, un exemple est illustré à l'aide de la syntaxe Sass [^ notation]. La syntaxe SCSS est essentiellement la même.
[^ notation]: Je pense que le seul avantage de la syntaxe SCSS par rapport à la syntaxe Sass est qu'elle est "compatible vers le haut avec CSS", mais pourquoi le SCSS est-il massivement utilisé?
require
Dans Gemfile
gem "sassc"
Avec un script
require "bundler"
Bundler.require
Vous pouvez l'utiliser si vous le faites.
De plus, dans l'environnement où sassc est installé, utilisez un script
requrie "sassc"
Vous pouvez l'utiliser si vous le faites. Dans cet article, la dernière méthode est utilisée.
Donnez simplement la source Sass source, créez un objet SassC :: Engine et appelez la méthode render.
Écrivez comme suit.
require "sassc"
source = <<SASS
body
margin: 0
SASS
p SassC::Engine.new(source, syntax: :sass, style: :compact).render
# => "body { margin: 0; }\n"
Les options importantes pour SassC :: Engine.new incluent:
:syntax
Donnez quelle syntaxe comme symbole.
Pour la syntaxe Sass, utilisez syntax :: sass, et pour la syntaxe SCSS, utilisez syntax :: scss.
:style
Sélectionnez le format de sortie parmi : imbriqué,: compact, : compressé,: développé
Le plus petit est «: compressé».
La forme la plus courante (?) De CSS est «: extended».
Je n'ai pas vérifié les spécifications, mais il semble que le format du résultat de la conversion soit légèrement différent selon qu'il contient des caractères non ASCII.
En fait, c'est la motivation pour écrire un article. Le style compressé est particulièrement intéressant, comparez-le à celui développé.
Tout d'abord, regardons un exemple de caractères ASCII uniquement.
Toupet
Sass
a
font-family: "hoge"
Supposer. La sortie de développé et compressé est la suivante.
style étendu
a {
font-family: "hoge";
}
style compressé
a{font-family:"hoge"}
Il n'y a rien de spécial à ce sujet.
Ensuite, le cas suivant où Sass contient des caractères non ASCII.
Sass
a
font-family: "Hoge"
Si vous affichez ceci comme développé, cela ressemblera à ceci:
style étendu
@charset "UTF-8";
a {
font-family: "Hoge";
}
Hmm, avec @charset" UTF-8 ";. Je vois, cela a du sens.
Alors qu'en est-il compressé?
style compressé
a{font-family:"Hoge"}
Oh? Il n'y a pas de «@ charset». Est-ce correct?
En fait, dans l'expérience précédente, la sortie CSS dans le style «compressé» lorsqu'elle contient des caractères non ASCII semble commencer par «a», mais ce n'est pas le cas. Il y a une nomenclature (Byte Order Mark) au début.
Pour confirmer que
a
font-family: "Hoge"
Affiche les 5 premiers points de code de caractère du résultat de la conversion en CSS avec compressé:
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
Après tout, la première lettre était U + FEFF, c'est-à-dire BOM.
Quand j'ai essayé les quatre styles, seul «compressé» avait une nomenclature. De plus, la nomenclature n'a pas été ajoutée pour les caractères ASCII uniquement.
Je ne l'ai pas bien étudié, mais il semble que le comportement ci-dessus ne soit pas une caractéristique de la bibliothèque appelée sassc, mais une spécification du langage Sass. Par conséquent, je pense que le même résultat sera obtenu même si cela est fait avec d'autres systèmes de traitement Sass tels que Dart Sass (je n'ai pas confirmé).
Au fait, U + FEFF est invisible [^ invisible], il est donc difficile de remarquer qu'il est inclus. Cela pose parfois un gros problème, que j'ai mentionné dans un autre article ci-dessous.
Attention à la BOM crachante de Sass! --Qiita
[^ invisible]: C'est un espace de largeur nulle, il est donc naturel que vous ne puissiez pas le voir. Cependant, certains affichages peuvent être affichés en fonction de l'environnement de visualisation (éditeur de texte, éditeur de code, terminal, etc.).