こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。
前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。
そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！
たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。
目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ
もくじ
- テクニック1 アンパサンド（&）
- テクニック2 演算
- テクニック3 round()
- テクニック4 rgba()
- テクニック5 コメントアウト
- テクニック6 変数
- テクニック7 変数とインターポレーション
- テクニック8 引数を使った@mixinと@include
- テクニック9 Compassで「引数を使った@mixin」を駆使する
- テクニック10 @extend
- テクニック11 プレースホルダーセレクタ
- テクニック12 @for
- 最後に + 応用編！
テクニック1 アンパサンド（&）
Sass
.sample{
background: #FFF;
&:hover{
background: #000;
}
&.brother{
background: #333;
}
.parent &{
background: #999;
}
}css
.sample {
background: #FFF;
}
.sample:hover {
background: #000;
}
.sample.brother {
background: #333;
}
.parent .sample {
background: #999;
}アンパサンド（&）を使うことで、疑似クラスや親要素を参照することができます。この他に、「&:last-child」「&::after」などの疑似クラス、疑似要素ももちろん使えます。
アンパンサンドじゃないよ！食べられないよ！
テクニック2 演算
Sass
.sample{
padding: 0 20px;
width: 100px - 20 * 2;
height: (100px/2);
}css
.sample {
padding: 0 20px;
width: 60px;
height: 50px;
}Sassでは、プログラミング言語のように演算が使えます。これにより、paddingやボーダー分を引いてwidthの値を求める、といった手間が省けます！（※割り算を使用する際だけは、括弧()が必要です。）
テクニック3 round()
Sass
.sample{
width: (105px/2);
height:round(105px/2);
}css
.sample {
width: 52.5px;
height: 53px;
}round()は値の小数点以下を四捨五入して吐き出してくれる関数です。上の例のように、round()を使うと数値が四捨五入されています。
テクニック4 rgba()
Sass
.sample{
background: rgba(#000,0.7);
}css
.sample {
background: rgba(0, 0, 0, 0.7);
}rgba()は16進数で入力したカラーコードをRGBA形式に変換して吐き出してくれる関数です。透明度を調整したい時には重宝します。
テクニック5 コメントアウト
Sass
//cssにはコメントが入りません
.sampleA{
background: #000;
}
/*cssにもコメントが入ります*/
.sampleB{
background: #000;
}css
.sampleA {
background: #000;
}
/*cssにもコメントが入ります*/
.sampleB {
background: #000;
}Sassではコメントアウトが2パターンあります。状況に応じて使い分けると良いです。
// → Sassファイルにのみ残るコメント。cssファイルには反映されない。
/*~~*/ → Sass,cssファイル共に残るコメント。
テクニック6 変数
Sass
$dark_grey:#333;
$lv_max:10;
$size_half:50%;
$margin_center:0 auto;
.sample{
background: $dark_grey;
z-index: $lv_max;
width: $size_half;
margin: $margin_center;
}css
.sample {
background: #333333;
z-index: 10;
width: 50%;
margin: 0 auto;
}「$」で始まる任意の変数を作っておき、呼び出すことができます。覚えにくい値や何度も使いそうな値は、分かり易い名前で設定しておくといいです。後で一括変更などできるので、管理しやすいです。
テクニック7 インターポレーション(#{})
Sass
$img_path:'../common/images/';
.sample{
background: url(#{$img_path}bg_img.png) 0 0 no-repeat;
}css
.sample {
background: url(../common/images/bg_img.png) 0 0 no-repeat;
}変数がいつでもどこでも使えたらいいのですが、そうもいきません。しかし！変数を「#{}」で囲うことで、通常では使えないところでも参照することができます。これを利用して背景画像のパスを設定しておけば、画像のディレクトリが変わってしまったときでも、一か所の修正ですべてのパスを変更できます。
テクニック8 引数を使った@mixin
Sass
@mixin po_ab($top,$left){
position: absolute;
top: $top;
left: $left;
}
.sample{
@include po_ab(0,0);
}css
.sample {
position: absolute;
top: 0;
left: 0;
}変数と組み合わせることで、上の例のように柔軟な@mixinを設定することができます。けっこう色々設定できるので、よく使いそうなプロパティの組み合わせは用意しておくといいです。
テクニック9 Compassで「引数を使った@mixin」を駆使する
Sass
.sample{
@include border-radius(3px 3px 0 0);
@include box-shadow(#000 1px 1px 1px 1px inset);
@include text-shadow(#000 1px 1px 1px);
@include inline-block;
@include opacity(0.7);
@include background-size(100px 50px);
@include box-sizing(boreder-box);
@include transform(rotate(45deg));
}css
.sample {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
-o-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-webkit-box-shadow: black 1px 1px 1px 1px inset;
-moz-box-shadow: black 1px 1px 1px 1px inset;
box-shadow: black 1px 1px 1px 1px inset;
text-shadow: black 1px 1px 1px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-background-size: 100px 50px;
-moz-background-size: 100px 50px;
-o-background-size: 100px 50px;
background-size: 100px 50px;
-webkit-box-sizing: boreder-box;
-moz-box-sizing: boreder-box;
box-sizing: boreder-box;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}Sassのフレームワーク「Compass」を利用すれば、自分で設定せずとも「引数を使った@mixin」が豊富に用意されています。上の例では、特によく使いそうな@mixinを書いてみました。もう面倒なベンダープレフィックスを書かずともいいのです。ちなみにComapassをまだ使ったことがない方は、
CSSの常識が変わる！「Compass」、基礎から応用まで！
をご覧頂ければ、よくわかるかと思います。
テクニック10 @extend
Sass
.sample_style{
background: #FFF;
color: #000;
}
.sampleA{
@extend .sample_style;
width: 500px;
}
.sampleB{
@extend .sample_style;
width: 600px;
}css
.sample_style, .sampleA, .sampleB {
background: #FFF;
color: #000;
}
.sampleA {
width: 500px;
}
.sampleB {
width: 600px;
}@extendは@includeに少し似ています。大きな違いとしては、上の例のように“任意のクラスのプロパティを丸ごと適用させられる”という点と、“cssに吐き出す際、@extendした要素をまとめて記述する”という点です。”ほとんど同じプロパティなんだけど、一カ所だけ違う・・・これらを別々に書くのはめんどい”という場合などに有効です。
まとめて吐き出してくれるため、コードの省略にもなります。
テクニック11 プレースホルダーセレクタ
Sass
%sample_style{
background: #FFF;
color: #000;
}
.sampleA{
@extend %sample_style;
width: 500px;
}
.sampleB{
@extend %sample_style;
width: 600px;
}css
.sampleA, .sampleB {
background: #FFF;
color: #000;
}
.sampleA {
width: 500px;
}
.sampleB {
width: 600px;
}プレースホルダーセレクタとは、@extend専用の、クラスみたいなもので、「%」で始まります。プレースホルダーセレクタと@extendの関係は、@includeと@mixinの関係に似ています。こいつの特徴は、“CSSに記述されない”ことです。これがあれば、@extendを使いたいがために、わざわざ使いもしないクラスを用意しなくてもよくなります。
テクニック12 @for
Sass
@for $value from 1 through 3{
.sample#{$value}{
z-index:$value;
}
}css
.sample1 {
z-index: 1;
}
.sample2 {
z-index: 2;
}
.sample3 {
z-index: 3;
}@forは繰り返しの命令文を書きたい場合に使えます。上の例では、変数と組み合わせることで、
・自働で「.sample1」「.sample2」「.sample3」という名前のクラスを生成。
・それぞれのクラスに対応する形で、z-indexの値を振り分ける。
ということをやってのけています。
最後に + 応用編！
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
今回の記事を書くにあたって、またもや『Sassの教科書』を参考にさせて頂きました。ありがとうございます。ありがとうございます。今回ここで取り上げたこと以外にも、さまざまなノウハウがたくさん詰まっているので、もっとSassを極めたい人は要チェックです。
さて、最後に、今回紹介したテクニックを組み合わせまくってみようと思います。これが解読できれば、あなたはSassマスターです（・ω・）m9！？
Sass
@mixin nav_common($width,$height){
width: $width;
height: $height;
float: left;
}
%nav_style{
@include nav_common(round(640px/3),40px);
background: #000;
color: #FFF;
&:hover{
background: rgba (#000,0.8);
}
}
@for $value from 1 through 3{
.nav#{$value}{
background-position: 0 (0 - 50 * $value);
@extend %nav_style;
}
}css
.nav1, .nav2, .nav3 {
width: 213px;
height: 40px;
float: left;
background: #000;
color: #FFF;
}
.nav1:hover, .nav2:hover, .nav3:hover {
background: rgba black, 0.8;
}
.nav1 {
background-position: 0 -50;
}
.nav2 {
background-position: 0 -100;
}
.nav3 {
background-position: 0 -150;
}LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
