0017

自分用SCSSスニペット

自分用SCSSスニペット

2012.6.16

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

//透明度
@mixin opacity($val: 70){
    filter: alpha(opacity=$val);
    -moz-opacity: $val/100;
    opacity: $val/100;
}

//記述例
.hoge{
    @include opacity(45);   //透明度45%
}

透明度2

//透明度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が付くようなコードに修正しました。

//角丸
@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で角丸に
}

グラデーション

//グラデーション縦
@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{
    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で半分にして指定する

//透明度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
}

最後に

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