SCSS、コーディングの時間を短縮できそうでちょっと気になっています。で、自分用にSCSSのスニペットを作ったのでメモ。
はじめに
SCSS自体多機能なためいろいろ複雑な事もできるらしいのですが、デザイナーという目線で見た時に、複雑過ぎたりやりすぎなコードは時に不便になる事もあるため、なるべく基本的な部分に留めるようにしました。
不足分は各自で作成する方が、結果的に幸せになれるかもｗ
2012.12.09更新
一部コードにミスがありましたので更新したり、よりシンプルに書き直しています。
フォントサイズのスニペット
フォントサイズを記述するためのスニペット（変数）です。font-size: 62.5%;で10px相当に統一した上で、変数を記述すれば好きなpxサイズにすることができます。フォントサイズ1つとっても、人によって実装方法は様々ですので、こういったものを用意すると統一できて便利そうです。
body{ font-size: 62.5%; }
$fz10: 1em;
$fz11: 1.1em;
$fz12: 1.2em;
$fz13: 1.3em;
$fz14: 1.4em;
$fz15: 1.5em;
$fz16: 1.6em;
$fz17: 1.7em;
$fz18: 1.8em;
$fz19: 1.9em;
$fz20: 2em;
$fz21: 2.1em;
$fz22: 2.2em;
$fz23: 2.3em;
$fz24: 2.4em;
$fz25: 2.5em;
$fz26: 2.6em;
$fz27: 2.7em;
$fz28: 2.8em;
//記述例
.hoge{
font-size: $fz16;
}
基本画像パス
画像パスを一括変換できるスニペットです。パスはご自身の環境で調整してください。スラッシュなどが含まれる場合「#{$img_path}
//基本画像パス
$img_path: "../img/";
//記述例
.hoge{
background: url(#{$img_path}fuga.png);
}
マージン
マージンもデザインによってバラバラになりがちですので、一定の数値があると便利ですね。SCSSは計算もできますので、基準値を元に半分にしたり、倍にしたりして使用すると便利そうです。
//基本マージン
$base_margin: 20px;
//記述例
.hoge{
margin: $base_margin; //20px
}
.fuga{
margin: $base_margin/2; //10px
}
.bar{
margin: $base_margin*2; //40px
}
透明度1
- 初期値は70％の透明度です。（$val: 70の値を変更することで初期値を変更できます）
- 数値は0〜100の整数で記述してください。
- IE系以外の透明度は小数点で記述する必要があるため、整数値から100で割ることで対応してあります。
//透明度
@mixin opacity($val: 70){
filter: alpha(opacity=$val);
-moz-opacity: $val/100;
opacity: $val/100;
}
//記述例
.hoge{
@include opacity(45); //透明度45％
}
透明度2
- rgbaを使ったタイプの透明度mixinです。
- r,g,bは0〜255の整数で記述してください。
- aは0〜1の0.1刻みの数値を入力します。
- デフォルトの場合、黒の50％半透明となっています。
//透明度2(RGBA)
@mixin rgba($r:0, $g:0, $b:0, $a:0.5){
background-color: rgba($r, $g, $b, $a);
color: rgba($r, $g, $b, $a);
}
//記述例
.hoge{
@include rgba(255,255,255,0.5); //白に透明度50％
}
角丸
2013.05.23：単位をいちいちpxと記述するのが面倒なので、数字だけでpxが付くようなコードに修正しました。
- 全ての角を角丸にするタイプです。（特定方向だけ角丸にするものではありません）
- 初期値は5pxです。（$val: 5）
//角丸
@mixin border-radius($val: 5) {
-webkit-border-radius: #{$val}px;
-moz-border-radius: #{$val}px;
border-radius: #{$val}px;
}
//記述例
.hoge{
@include border-radius(10); //10pxで角丸に
}
グラデーション
- 一般的なグラデーションを作成します。$startに開始色、$endに終了色をhex形式（#000000）で入力します。
- グラデーション縦は、$startが上、$endが下になっています。
- グラデーション横は、$startが左、$endが右になっています。
//グラデーション縦
@mixin gradient-v($start,$end){
background: $start; /* Old browsers */
background: -moz-linear-gradient(top, $start 0%, $end 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $start 0%,$end 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $start 0%,$end 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, $start 0%,$end 100%); /* IE10+ */
background: linear-gradient(top, $start 0%,$end 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}',GradientType=0 ); /* IE6-9 */
}
//グラデーション横
@mixin gradient-h($start,$end){
background: $start; / Old browsers /
background: -moz-linear-gradient(left, $start 0%, $end 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start), color-stop(100%,$end)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(left, $start 0%,$end 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(left, $start 0%,$end 100%); / Opera 11.10+ /
background: -ms-linear-gradient(left, $start 0%,$end 100%); / IE10+ /
background: linear-gradient(left, $start 0%,$end 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}',GradientType=1 ); / IE6-9 /
}
//記述例
.hoge{
@include gradient-v(#999,#333);
}
.fuga{
@include gradient-h(#999,#333);
}
clearfix
- clearfixもSCSS形式に書き直してあります。
- @extendはその値を継承します。html側に毎回clearfixをたくさん記述するのが嫌な場合、各要素に@extendを使って記述します。出力結果を見ると分かりますが、clearfixに値がまとめる事ができ、html側がすっきりします。
.clearfix{
zoom:1; //For IE 6/7 (trigger hasLayout)
&:before,&:after{
content:"";
display:table;
}
&:after{
clear:both;
}
}
//記述例
.hoge{
@extend .clearfix;
}
.fuga{
@extend .clearfix;
}
//出力結果
.clearfix, .hoge, .fuga {
zoom: 1;
}
.clearfix:before, .hoge:before, .fuga:before {
content: "";
display: table;
}
.clearfix:after, .hoge:after, .fuga:after {
content: "";
clear: both;
}
Retinaサイズ画像をCSSで半分にして指定する
- Retinaサイズの画像を、CSSを使って半分サイズを指定して記述するmixinです。
- $width, $heightは2で割れる整数で記述してください。画像サイズを記述すると、自動で半分サイズにします。
//透明度2(RGBA)
@mixin retina_img($width, $height){
background-size:#{$width/2}px #{$height/2}px;
-webkit-background-size:#{$width/2}px #{$height/2}px;
-moz-background-size:#{$width/2}px #{$height/2}px;
}
//記述例
.hoge{
@include retina_img(400,200); //400,200pxの画像を半分サイズに指定する。
}
//結果
.hoge{
background-size:200px 100px;
-webkit-background-size:200px 100px;
-moz-background-size:200px 100px
}
最後に
他にも便利そうなスニペットはあると思うので、追記または別記事で書くかもしれません。