Sassのよく使いそうな関数まとめ

_function.scss

// ------  YUIのフォントサイズ指定変数
// ex) font-size: $fs10;
// Output→  font-size: 77%;
$fs8: 63%;
$fs9: 70%;
$fs10: 77%;
$fs11: 85%;
$fs12: 93%;
$fs13: 100%;
$fs14: 108%;
$fs15: 116%;
$fs16: 123.1%;
$fs17: 131%;
$fs18: 138.5%;
$fs19: 146.5%;
$fs20: 153.9%;
$fs21: 161.6%;
$fs22: 167%;
$fs23: 174%;
$fs24: 182%;
$fs25: 189%;
$fs26: 197%;
$fs27: 207.7%;
$fs28: 215.4%;
$fs29: 223.1%;
$fs30: 230.8%;
$fs48: 369.2%;


// ------  背景指定
// ex) bg(path/to/hoge.jpg, lt, no);
// Output→ 
//   background-image: url(path/to/hoge.jpg);
//   background-position: left top;
//   background-repeat: no-repeat;

@mixin bg($path, $pos : "lt", $repeat : "no", $size: 'n'){

    // ------ パス
    @if $path == "n" {
    } @else if $path == "no" {
    } @else {
        background-image: url(#{$path});
    }

    // ------ ポジション
    @if $pos == "lt" {
        $pos : 'left top';
    } @else if $pos == "rt" {
        $pos : 'right top';
    } @else if $pos == "lb" {
        $pos : 'left bottom';
    } @else if $pos == "rb" {
        $pos : 'right bottom';
    }
    background-position:#{$pos};

    // ------ リピート
    @if $repeat == "no" {
        $repeat : 'no-repeat';
    } @else if $repeat == "n" {
        $repeat : 'no-repeat';

    } @else if $repeat == "np" {
        $repeat : 'no-repeat';

    } @else if $repeat == "x" {
        $repeat : 'repeat-x';
    } @else if $repeat == "rx" {
        $repeat : 'repeat-x';
    } @else if $repeat == "y" {
        $repeat : 'repeat-x';
    } @else if $repeat == "ry" {
        $repeat : 'repeat-x';
    }
    background-repeat:#{$repeat};

    // ------ サイズ
    @if $size == "no" {
    } @else if $size == "n" {
    } @else {
        -webkit-background-size: $size;
             -o-background-size: $size;
                background-size: $size;
    }
}

// ------ clearfix
@mixin clearfix{
     *zoom: 1;
     &:after {
          content: ".";
          display: block;
          clear: both;
          height: 0;
          visibility: hidden;
     }
}

// ------  aタグに高さが出るときに使う
@mixin listNoHeight (){
    line-height: 0;
    font-size:0;
}

// ------  透明度IE対応
@mixin opacity ($aOpacityNum) {
    opacity: #{$aOpacityNum};
    filter: alpha(opacity=($aOpacityNum * 100));
}

// ------  ポジション省略
@mixin pos ($left:0,$top:0){
    position: absolute;
    left: #{$left}px;
    top: #{$top}px;
}

おまけ（textExpander）

@include記述を省略する。

最近「@include 関数();」を打つのが辛くなってきたのでショートカット

textExpander

// 呼び出し ;safunc
@include %filltext:name=関数名%();

フォントサイズ指定するの辛い

Hayaku + ショートカット + Sass変数使ってても辛いので、
もっとショートカット。

textExpander

// 呼び出し ;safs
font-size: $fs%filltext:name=フォントサイズ%;