孤独なSilhouette動き出せば それはまぎれもなくヤツさ
はい、といわけで突然ですがSCSS使いたくて以下ツール触ってみることにした。僕が普段いじりまくってるブログテンプレートだったりなんだったりのCSSファイルだとCIツール使って自動デプロイどーんっとかできないんですよね……*1。じゃあタスクランナーを使ってというのもあるのかもしれないですが、ちょっとそういうのに使うにもオーバースペックすぎるなってなっちゃう気がするわけです。
そこでコアラを使ってみることにしました。
koala-app.com
SassコンパイルのGUIソフトらしいのでいじってみる。SCSSにも対応しているとのことなので僕がちょっと試してみたいことにもできるかもしれないということで触りだけ試してみた。
GitHubの方はこちら
GitHub - oklai/koala: Koala is a GUI application for less, sass and coffeescript compilation, to help web developers to the development more efficient.
The project has been stopped!!
The development method has changed a lot be from the project start time to now, and there are many better alternatives in the open source community. So I think the projet is outdated, and decided to stop maintenance.
Sorry about for this.
If someone is still willing to continue maintenance, welcome to create a new project, it will be the best way.
なんかここ読んでて思ったんですけどもう更新はないっぽいね。僕が最近ちょくちょくみていたデザイン学習サイトで紹介されていたから使ってみたけども既に停止しているものだったら紹介しなくてもいいのではとか思ってしまったりする。でも、この手の拡張メタ言語たまに機能が更新されていたりするけどもどこが更新されているのかよくわかってないしまあいいんじゃねとも思ったりもする。まあうだうだ言っても仕方ないので触ってみることにします。
触ってみた
とりあえず触るにしてもネタがないといけないので、僕が今カスタマイズしたいブログテンプレートを引っ張ってくることにします。
ameblo.jp
実現したい内容は以下の通り
■ やりたいこと
[style.css(初期テンプレート) => style.scss(scss化して分割) => style.css(分割管理したものを再統合)]
ひと手間でてるけどCSSがグローバルに汚染するから分割でパーツごとに分割管理したいんだって思想でやってます。もっといい方法あるんだろうけども無料で手っ取り早くやる方法をこれ以外知らないのでとりまこれで進める。
んで件のツールですが起動するとこんな感じ
sass/scssファイルを投げ込むと右側にこんなんでてきます。
一番上の自動コンパイルのチェックしてVSCodeみたいな変更をリアルタイムに検知してくれるエディタでいじると自動化してくれて良い感じ。使用感としては「タスクランナーでよくね？」感はあるんですけど現状文章整形しながら良い感じに管理していくという方法しか思いつかないのでこれで……。コンパイルしてCSS吐き出すためだけに環境作るのメンドイ……。
そんでアメブロの方のカスタマイズしてるテンプレはこんな感じにまとめました。
GitHub - Andou666/ameblo_custom_css: アメブロ用カスタムCSS置場
FLOCSS設計思想にのっとっていじっているつもりですが、オブジェクト的なアレがどんな構造しているかよくわがんにゃいから大半の項目は放置してますｗ。
あとこっちの方もCSSいじれるSNSのこっちの方も同じように管理したいなって思ってるんだけど、こっちはアメーバよりも制限かかってて何ができて何がダメなのかよくわからない……。そしてそもそもフォロワー誰もいない……。あと中国語全然わかんない……。つらたにえん…………。
Twitterをはじめた - コミュ障だから明日が僕らをよんだって返事もろくにしなかった
おわり
*1:やり方がまだよくわからない
