CSSの効率化になる「Sass」
「Sass」とは、CSSの拡張言語です。
CSSを普通に書くよりコードを効率よく書くことが出来る為、非常に便利です。
書き方はCSSの書き方がベースとなっているので、CSSの知識がある程度ある方なら直ぐに覚えられると思います。
Sassを使う為の準備
Sassを使うには、Sassで書いたコードをcssにコンパイル（変換）しなければなりません。コンパイルする方法は幾つかあるのですが、「Scout」というソフトを使用する方法が一番簡単そうです。
＜注意＞
※Scoutを使う際、変換元と変換先のディレクトリ階層に日本語のディレクトリ名が存在するとエラーが表示されますのでご注意ください。
※Scoutを使って変換時に「#3214」のエラーが表示されたら、javaファイルの読み込みパスが間違っていることが原因だと思いますので下記のサイトを参考にパスを修正してください。
Sassの書き方（基本）
ネスト
親セレクタを何度も書かずに入れ子で記述することが出来ます。
Sass
↓
#main {
ul{
width:800px;
}
li{
float:left;
}
}
コンパイル後のCSS
↓
#main ul {
width: 800px;
}
#main li {
float: left;
}
親セレクタの参照 「&」
:hoverのような擬似要素もネストして管理することができます。指定には&を使います。
Sass
↓
a {
color:#170EE4;
&:hover {
color:#D44D4F;
}
&:visited{
color:#04B51E;
}
}
コンパイル後のCSS
↓
a {
color: #170EE4;
}
a:hover {
color: #D44D4F;
}
a:visited {
color: #04B51E;
}
変数「$」
プログラムコードのように変数を使うことが出来ます。変数は定義されるとそのスタイルシート全体で利用できます。指定には$マークを付けて宣言します。
Sass
↓
$allWidth:1200;
#sidebar {
width:($allWidth / 2)+px;
}
#leftArea {
width:(200 / $allWidth) * 100%;
}
コンパイル後のCSS
↓
#sidebar {
width: 600px;
}
#leftArea {
width: 16.66667%;
}
ミックスイン「Mixins」
よく使うプロパティやセレクタをまとめて定義しておいて、必要箇所で呼び出すことが出来ます。
Sass
↓
@mixin radius8R {
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
}
#sampleBox {
@include radius8R;
}
@mixin radius10R($radius:10px) {
border-radius:$radius;
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
}
#sampleBox2 {
@include radius10R;
}
コンパイル後のCSS
↓
#sampleBox {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
#sampleBox2 {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
セレクタの継承「@extend」
一度利用したセレクタを継承して使うことができます。
Sass
↓
.selectBox {
width:120px;
height:80px;
background-color:#ff0000;
}
ul.sideMenu {
@extend .selectBox;
color:#333;
}
コンパイル後のCSS
↓
.selectBox, ul.sideMenu {
width: 120px;
height: 80px;
background-color: #ff0000;
}
ul.sideMenu {
color: #333;
}
コメントを残す