BootstrapのSassを部分的に拝借して自分のSassにインポートする

 Sassは複数のCSSを一つにまとめられる。Bootstrapに使いたいパーツがあるとして(たとえばgrid)、Sassの機能が役に立つ。Bootstrapはでかい。だから一部を拝借する。今回はgridをいただいてみる。

 まずBootstrapの公式からSassセットを落としてくる。解凍したらassets/stylesheets/bootstrap以下にSassが分割されておいてあるのを確認しておく。
 自分のSassを用意し、任意の場所に配置する。コンパイルできるように設定する。そしてそのファイルの先頭にimportを書く。Bootstrapのgridを使うには依存を含めて下記のようになるらしい。
Grid only?
// Core variables and mixins

@import "./etc/variables";
@import "./etc/mixins";

// Reset and dependencies
@import "./etc/normalize";
@import "./etc/print";

// Core CSS
@import "./etc/scaffolding";
@import "./etc/grid";

// Utility classes
@import "./etc/utilities";
@import "./etc/responsive-utilities";


 自分のSassファイルから見て./etc以下にBootstrapから拝借したSassを置くように記述した。だからそのとおりに配置する。まず./etcに、Bootstrapから落とした解凍物のassets/stylesheets/bootstrapをのぞいて、↑に記述したものと同名のファイル八つを配置する。次に./etcにmixinディレクトリをそのままコピーする。
 もろもろ整ったのでSassをコンパイルする。これで自分のスタイルシートに、Bootstrapのgridが入る。



comment: 0

SCSSがだいぶ気に入った

 CSSを読んで多少のデザイン把握をする必要があったりしたんだけど、あれがSCSSだったらなぁと思った。ノーマルのCSSだとあのクラスの中のaタグのスタイルをいじりたいってのを下記のように書いた。

.foo a {

}


これをaタグ以外にも適用していくと、クラスfooのなかでスタイル適用が行われているタグを把握するのが視覚的にめんどい。先頭に.fooが付いてるもの・・・と探していくことになる。
 SCSSだとネストできるので、クラスなど親要素のカッコにおおわれることになる。プログラミング言語チックで見やすい。
.foo {

a {
}
}


 ただSCSSにもめんどうがあって、それはCSSへのコンパイルが必要だということ。さいわいにしてVisualStudioを使ってASP.NET MVCをやっていると、SCSSの変更を検知してコンパイルを自動でIDEがやってくれる。
 そういうわけで、IDEを使っている場合は積極的にSCSSを使っていきたいと感じた最近。
comment: 0

ASP.NET Core MVCでSCSSを使う

 .NET CoreでSCSSを使う。Gulpを使ってSCSSのコンパイルを行う記事が多いがVisualStudioGalleryにあるWebCompilerを使う。

 まずWebCompilerのインストール。あとのちのち使うBundler & Minifierもインストールする。
 VisualStudioの「拡張機能と更新プログラム」を開いて、VisualStudioGalleryを検索ターゲットにして、それぞれの名前をキーワードとして入れれば出てくる。そのままそれらをインストール。




 インストールできたら適当なSCSSファイルをプロジェクトに追加して右クリックする。するとWebCompilerがあるのでそこからCompileFileを選択。これで以降はSCSSを書き換えればCSSへのコンパイルが自動で行われる。


 あとはコンパイルされたファイルをサーバに置く準備。SCSSがコンパイルされると、VisualStudioのソリューションのそのSCSSがツリーになっている。ツリーを開いてサーバに置きたい形式のファイルを右クリックしてBundler & Minifier。


comment: 0