自分用SCSSスニペット

スポンサーリンク

SCSS、コーディングの時間を短縮できそうでちょっと気になっています。で、自分用にSCSSのスニペットを作ったのでメモ。

はじめに

SCSS自体多機能なためいろいろ複雑な事もできるらしいのですが、デザイナーという目線で見た時に、複雑過ぎたりやりすぎなコードは時に不便になる事もあるため、なるべく基本的な部分に留めるようにしました。
不足分は各自で作成する方が、結果的に幸せになれるかもw

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
}
“`

最後に

他にも便利そうなスニペットはあると思うので、追記または別記事で書くかもしれません。