Sass | Ruby on Rails
Sassとは
CSSは、Webページの見た目を整える言語ですが、SassはCSSをより効率的に書くことが出来ます。
ファイルの拡張子は、".scss"と".sass"に分かれますが一般的に使われているのは、".scss"です。
この記事では、".scss"のSassファイルについて説明していきます。
読み込ませる方法
Rails3.1以降からは、デフォルトでSassを使うための機能が整っているので、sassファイルを作成すればRailsが自動的に読み込んでくれます。
特徴をいくつか紹介します
@importで他のSassファイルを読み込める
app > assets > stylesheets > application.scss
@import "sasses";
これにより、「sasses.scss」が読み込まれます。
親子構造を持つ
app > assets > stylesheets > sasses.scss
main {
height: 100px;
width: 100px;
background-color: gray;
margin: 250px 650px;
h1 {
color: blue;
text-align: center;
padding: 35px 0;
}
}
mainの子供がh1というように、親子関係を表現することが出来ます。
HTMLの構造が分かるので、便利です。
変数が使える
$main-color: gray;
変数を定義して
background-color: $main-color;
定義した変数を使うことができます。
例えば、画面幅に応じて適応させるcssを変えたいという場合
$media: 1024px;
このようにブレイクポイントを変数として定義しておけば、
margin: 100px 400px;
@media screen and (max-width:$media) {
margin: 100px 200px;
}
「1024pxまでは、左右の外枠を200pxにする」というように、レスポンシブデザインをすることができます。
ちなみに、1024pxはiPad Proの画面幅です。(Chromeの要素の検証を参照)
アンパサンド(&)が使える
.main-box {
height: 100px;
width: 100px;
background-color: whitesmoke;
margin: 150px auto;
border: 1px solid black;
text-align: center;
&__title {
font-size: 20px;
margin: 10px 0;
}
}
「 .main-box__title」というクラス名は、アンパサンドを用いて、「&__title」と表現できます。
以上。
簡単ですが、Sassについて書きました。
また気が向いたら加筆していくつもりです。
