Sassにたどり着くまで

この業界に入ってから一貫して嫌いなのがHTMLCSSでした.HTMLは私が入った当時はバージョン4.01でブラウザ戦争より前で、IEすらまだ初期版が出たころだった覚えています.仕事上リーダーとしてHTMLに関わらざるを得なかったのですが、製品検査の女性からHTMLを知らないことをボコボコに批判され、以来トラウマになってしまい仕事で見るのもイヤになりました.

 

CSSは表記は軽易なのですが、その名の通りいくつも指定すると、非常に複雑な適用規則でブラウザが実行時にスタイルを選択する仕組みです.しかもそれは(ChromeやEdgeで)F12キーを押して、開発ウィンドウでデバッグせざるを得ないというのもいまいちでした.私がやっていたXSLFOPDFという世界では、こんな無法なことはありえなくて、せいぜい属性の継承だけ考えていれば済んだからです.

 

ところが昨年からこのブラウザでF12キーを押すのが日常的な仕事になってしまいました.そうHTMLを否が応でも担当しなければならなくなってしまったのです.

ただ、一般的なWebの仕事と違う点は、ページを機械的に生成することが必須要件であることです.いわゆる日本のWeb屋さんの仕事は対象が日本国内になっていることが多いのではないかと想像されるのですが、私の仕事ではターゲットは世界で

 

  • 言語によってインラインの進行方向を切り替える.アラビア語ヘブライ語は右から左(RTL)、その他のラテン系やCJKの言語は左から右(LTR
  • お客さんのターゲットとする製品系列やブランドにより、スタイルを切り替える.
  • 更に世界展開を考えると、拠点ごとにフォントのアサインを変える.

 

などが変動要素として現れます.これをフロントエンドの技術者の方が、作成してくれたCSSを横目でにらみながら、自動的に生成する仕組みを作るのが仕事です.

こういう変動要素に対応するためには、CSSをいちいち組み合わせ毎に手作業で作っていたのでは到底間に合いません.自動的に条件に合ったCSSを生成できなければ使い物にならないのです.

 

そんな時にSassという素晴らしい仕組みがあることを知りました.CSSでもその上位に位置するSass.scssファイルが一般的)を作っておいて、変数や関数、ミックスインというような仕組みを使って、動的にCSSを生成できることを知ったのです.

 

https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg

Sass

https://ja.wikipedia.org/wiki/Sass

 

ところが先人の例で、私が直面しているような課題を整理してくれるSassの作り方(?)というか、構築の仕方がいまいちよくわかりません.わからなければStackoverflowで聞いてみるのが一番という安直な考えで聞いてみたのが以下のリンクです.

 

Sassに複数の条件を適用する方法は?

https://ja.stackoverflow.com/questions/62623/sass%e3%81%ab%e8%a4%87%e6%95%b0%e3%81%ae%e6%9d%a1%e4%bb%b6%e3%82%92%e9%81%a9%e7%94%a8%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%e3%81%af

 

これは2020年1月29日に投稿してそれなりの(現在:60件)の閲覧数があるのですが、どなたも回答を書いてくれません.といいますか、なぜかStackoverflowにログインすると、レピュテーションが上がっていて、何かなとクリックしてみると、この質問に「いいね」をしてくれた方が増えているのです.

 

逆を返すとこのようなことにやはり直面して悩んでおられる方はいらっしゃるのでしょうけれども、解がないというか.定石みたいなことがないのかな?と読み取れました.

 

しかし納期は待ってくれません.この質問にあるように、一般的なSassの使い手方では、N個の条件があると個々の条件が取りえる値によって、例えばRTL/LTRは2種類、製品系列がったらその系列数という具合に生成するCSSが増えていってしまいたぶん収拾がとれなくなります.そして最終的には、そのなかから1個のCSSを選べばよい.話としては分かりますが、選ぶだけでも大変な気がします.

 

ならば、条件に合致した形で、入力のSass.scss)を動的に生成して、最適な一個のCSSを生成するのが最も自然に思えます.

 

そもそもWebは素人の私ですが、XSL-FOをやっていたおかげでCSS2レベルでは両者の共通性というのはそれなりによくわかります.

 

まだ現在進行形なのですが、CSS大嫌い人間の私が惚れ込んだSassという素晴らしい技術を生かすための方法について考えたことをこの次から紹介したいと思います.

 

すこしまとまりましたら、上記のStackoverflowにも自己RESが書けるかもしれません.