Sass
【WebStormでSassを使おう】3：Grunt実行とSassの編集
前回まででGruntのプラグインを入れ設定まで行いました。 Gruntの実行 WebStorm画面下の「Grunt」を開いてください。 もし表示されていない場合はプロジェクトビューからGruntfile.jsを右クリック…【WebStormでSassを使おう】2：Gruntプラグインのインストールと設定
前回まででプロジェクトにGruntの基本パッケージをインストールしました。 下記コマンドでGrunt用プラグインをインストールします。 量が多いので多少時間がかかります。 npm install grunt-contri…【WebStormでSassを使おう】1：node.jsとGruntの準備
現状自分のマスト環境になっているWebStormでのSassの利用についてまとめます。 まずはnode.jsとGruntの準備から。 Sassはこれらを使って動くためです。 前提 WebStormインストール済み Web…Sass：ネストのやりすぎ注意
Sassのネスト構造は非常に便利ですが、慣れてくるとつい下記のように長くなることがあります。 .classname { p { } a { } ul { li { div { a { } } } } .class1 { …Sass：変数を別ファイルで管理しよう
下記のファイル構成を前提とします。 css └style.css sass ├_variables.scss └style.scss Sassは標準設定ではファイル名冒頭に「_」の付くファイルはコンパイルを行いません。 …Sass：ネスト構造のおさらい
標準ネスト .class1 { margin: 0; .class2 { margin: 0; } } ▼CSS出力 .class1 { margin: 0; } .class1 .class2 { margin: 0;…
SASSで「!default」を使う
cssは通常後ろに書いた記述がどんどん上書きされていくため、sassを使いまわす際には下手すると膨大な上書きや変更が必要となり、元々の記述がどんなものだったのか、また後々使うときにゴリゴリに上書きしないと打ち消せなかった…