Created
December 20, 2013 02:16
-
-
Save wilf312/8049526 to your computer and use it in GitHub Desktop.
Sassのよく使いそうな関数まとめ ref: http://qiita.com/wilf312/items/4b898e31f2f571d3de66
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ------ 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 呼び出し ;safs | |
font-size: $fs%filltext:name=フォントサイズ%; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment