Skip to content

Instantly share code, notes, and snippets.

@wilf312
Created December 20, 2013 02:16
Show Gist options
  • Save wilf312/8049526 to your computer and use it in GitHub Desktop.
Save wilf312/8049526 to your computer and use it in GitHub Desktop.
Sassのよく使いそうな関数まとめ ref: http://qiita.com/wilf312/items/4b898e31f2f571d3de66
// ------ 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;
}
// 呼び出し ;safs
font-size: $fs%filltext:name=フォントサイズ%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment