スキップしてメイン コンテンツに移動

投稿

6月, 2013の投稿を表示しています

Sass/SCSS/Compass

Sass/SCSS Sassって何? CSSのメタ言語 記法に従って記述し、コンパイルするとCSSファイルが生成される。 変数の使用や条件分岐、共通部分の部品化、共通部分の継承等が特徴。 公式サイト http://sass-lang.com/ ファイル インデントによる記法がSass 拡張子:.sass CSSベースの記法がSCSS(“Sassy CSS”)(こちらが主流) 拡張子:.scss インストール コンソールで $ ruby -v (ルビーがインストールされていることを確認) $ sudo gem update --system (gem(rubyのパッケージマネージャー)を最新版に更新) $ sudo gem install sass (sassのインストール) $ cd (index.htmlのフォルダ) 使用例 フォルダ構成 /index.html /css /scss main.scss $blue: #3bbfce; $margin: 16px; .content-navigation {     border-color: $blue;     color: darken($blue, 9%);     p {         font-size: 14px;     } } .border {     padding: $margin / 2;     margin: $margin / 2;     border-color: $blue; } $ sass scss/main.scss:css/main.css とやると main.css .content-navigation {     border-color: #3bbfce;     color: #2b9eab;  } .content-navigation p {     font-size: 14px;  } .border {     padding: 8px;     margin: 8px;     border-color: #3bbfce;  } が生成される。 実際は都度コマンド実行するのではなく、