Created
July 24, 2012 14:34
-
-
Save wate/3170267 to your computer and use it in GitHub Desktop.
LessではできなくてSass(SCSS)でできること!
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
//----------------------- | |
// Minin | |
//----------------------- | |
@mixin spacing($min, $max, $step:5, $unit:px) { | |
$i : $min; | |
@while $i <= $max { | |
//margin left | |
.ml#{$i} { | |
margin-left: #{$i}#{$unit}!important; | |
} | |
//margin right | |
.mr#{$i} { | |
margin-right: #{$i}#{$unit}!important; | |
} | |
//margin top | |
.mt#{$i} { | |
margin-top: #{$i}#{$unit}!important; | |
} | |
//margin bottom | |
.mb#{$i} { | |
margin-bottom: #{$i}#{$unit}!important; | |
} | |
//margin horizontal | |
.mh#{$i} { | |
@extend .ml#{$i}; | |
@extend .mr#{$i}; | |
} | |
//margin virtivcal | |
.mv#{$i} { | |
@extend .mt#{$i}; | |
@extend .mb#{$i}; | |
} | |
//margin all | |
.m_#{$i} { | |
@extend .ml#{$i}; | |
@extend .mr#{$i}; | |
@extend .mt#{$i}; | |
@extend .mb#{$i}; | |
} | |
//padding left | |
.pl#{$i} { | |
padding-left: #{$i}#{$unit}!important; | |
} | |
//padding right | |
.pr#{$i} { | |
padding-right: #{$i}#{$unit}!important; | |
} | |
//padding top | |
.pt#{$i} { | |
padding-top: #{$i}#{$unit}!important; | |
} | |
//padding bottom | |
.pb#{$i} { | |
padding-bottom: #{$i}#{$unit}!important; | |
} | |
//padding horizontal | |
.ph#{$i} { | |
@extend .pl#{$i}; | |
@extend .pr#{$i}; | |
} | |
///padding virtivcal | |
.pv#{$i} { | |
@extend .pt#{$i}; | |
@extend .pb#{$i}; | |
} | |
//padding all | |
.p_#{$i} { | |
@extend .pl#{$i}; | |
@extend .pr#{$i}; | |
@extend .pt#{$i}; | |
@extend .pb#{$i}; | |
} | |
$i : $i + $step; | |
} | |
} | |
//----------------------- | |
// Functions | |
//----------------------- | |
@function px2em($fontSize, $baseSize : 16){ | |
@return ($fontSize / $baseSize) + 0em | |
} | |
@function em2px($fontSize, $baseSize : 16){ | |
@return ($fontSize * $baseSize) + 0px; | |
} |
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
/** | |
* @outputStyle expanded | |
* outputStyle => nested OR expanded OR compact OR compressed | |
* @debugInfo false | |
* @lineComments false | |
* @outputFile compiled.css | |
*/ | |
body { | |
font-size: 0.813em; | |
} | |
.ml0, .mh0, .m_0 { | |
margin-left: 0px!important; | |
} | |
.mr0, .mh0, .m_0 { | |
margin-right: 0px!important; | |
} | |
.mt0, .mv0, .m_0 { | |
margin-top: 0px!important; | |
} | |
.mb0, .mv0, .m_0 { | |
margin-bottom: 0px!important; | |
} | |
.pl0, .ph0, .p_0 { | |
padding-left: 0px!important; | |
} | |
.pr0, .ph0, .p_0 { | |
padding-right: 0px!important; | |
} | |
.pt0, .pv0, .p_0 { | |
padding-top: 0px!important; | |
} | |
.pb0, .pv0, .p_0 { | |
padding-bottom: 0px!important; | |
} | |
.ml5, .mh5, .m_5 { | |
margin-left: 5px!important; | |
} | |
.mr5, .mh5, .m_5 { | |
margin-right: 5px!important; | |
} | |
.mt5, .mv5, .m_5 { | |
margin-top: 5px!important; | |
} | |
.mb5, .mv5, .m_5 { | |
margin-bottom: 5px!important; | |
} | |
.pl5, .ph5, .p_5 { | |
padding-left: 5px!important; | |
} | |
.pr5, .ph5, .p_5 { | |
padding-right: 5px!important; | |
} | |
.pt5, .pv5, .p_5 { | |
padding-top: 5px!important; | |
} | |
.pb5, .pv5, .p_5 { | |
padding-bottom: 5px!important; | |
} | |
.ml10, .mh10, .m_10 { | |
margin-left: 10px!important; | |
} | |
.mr10, .mh10, .m_10 { | |
margin-right: 10px!important; | |
} | |
.mt10, .mv10, .m_10 { | |
margin-top: 10px!important; | |
} | |
.mb10, .mv10, .m_10 { | |
margin-bottom: 10px!important; | |
} | |
.pl10, .ph10, .p_10 { | |
padding-left: 10px!important; | |
} | |
.pr10, .ph10, .p_10 { | |
padding-right: 10px!important; | |
} | |
.pt10, .pv10, .p_10 { | |
padding-top: 10px!important; | |
} | |
.pb10, .pv10, .p_10 { | |
padding-bottom: 10px!important; | |
} | |
.ml15, .mh15, .m_15 { | |
margin-left: 15px!important; | |
} | |
.mr15, .mh15, .m_15 { | |
margin-right: 15px!important; | |
} | |
.mt15, .mv15, .m_15 { | |
margin-top: 15px!important; | |
} | |
.mb15, .mv15, .m_15 { | |
margin-bottom: 15px!important; | |
} | |
.pl15, .ph15, .p_15 { | |
padding-left: 15px!important; | |
} | |
.pr15, .ph15, .p_15 { | |
padding-right: 15px!important; | |
} | |
.pt15, .pv15, .p_15 { | |
padding-top: 15px!important; | |
} | |
.pb15, .pv15, .p_15 { | |
padding-bottom: 15px!important; | |
} | |
.ml20, .mh20, .m_20 { | |
margin-left: 20px!important; | |
} | |
.mr20, .mh20, .m_20 { | |
margin-right: 20px!important; | |
} | |
.mt20, .mv20, .m_20 { | |
margin-top: 20px!important; | |
} | |
.mb20, .mv20, .m_20 { | |
margin-bottom: 20px!important; | |
} | |
.pl20, .ph20, .p_20 { | |
padding-left: 20px!important; | |
} | |
.pr20, .ph20, .p_20 { | |
padding-right: 20px!important; | |
} | |
.pt20, .pv20, .p_20 { | |
padding-top: 20px!important; | |
} | |
.pb20, .pv20, .p_20 { | |
padding-bottom: 20px!important; | |
} | |
.ml25, .mh25, .m_25 { | |
margin-left: 25px!important; | |
} | |
.mr25, .mh25, .m_25 { | |
margin-right: 25px!important; | |
} | |
.mt25, .mv25, .m_25 { | |
margin-top: 25px!important; | |
} | |
.mb25, .mv25, .m_25 { | |
margin-bottom: 25px!important; | |
} | |
.pl25, .ph25, .p_25 { | |
padding-left: 25px!important; | |
} | |
.pr25, .ph25, .p_25 { | |
padding-right: 25px!important; | |
} | |
.pt25, .pv25, .p_25 { | |
padding-top: 25px!important; | |
} | |
.pb25, .pv25, .p_25 { | |
padding-bottom: 25px!important; | |
} | |
.ml30, .mh30, .m_30 { | |
margin-left: 30px!important; | |
} | |
.mr30, .mh30, .m_30 { | |
margin-right: 30px!important; | |
} | |
.mt30, .mv30, .m_30 { | |
margin-top: 30px!important; | |
} | |
.mb30, .mv30, .m_30 { | |
margin-bottom: 30px!important; | |
} | |
.pl30, .ph30, .p_30 { | |
padding-left: 30px!important; | |
} | |
.pr30, .ph30, .p_30 { | |
padding-right: 30px!important; | |
} | |
.pt30, .pv30, .p_30 { | |
padding-top: 30px!important; | |
} | |
.pb30, .pv30, .p_30 { | |
padding-bottom: 30px!important; | |
} | |
.ml35, .mh35, .m_35 { | |
margin-left: 35px!important; | |
} | |
.mr35, .mh35, .m_35 { | |
margin-right: 35px!important; | |
} | |
.mt35, .mv35, .m_35 { | |
margin-top: 35px!important; | |
} | |
.mb35, .mv35, .m_35 { | |
margin-bottom: 35px!important; | |
} | |
.pl35, .ph35, .p_35 { | |
padding-left: 35px!important; | |
} | |
.pr35, .ph35, .p_35 { | |
padding-right: 35px!important; | |
} | |
.pt35, .pv35, .p_35 { | |
padding-top: 35px!important; | |
} | |
.pb35, .pv35, .p_35 { | |
padding-bottom: 35px!important; | |
} | |
.ml40, .mh40, .m_40 { | |
margin-left: 40px!important; | |
} | |
.mr40, .mh40, .m_40 { | |
margin-right: 40px!important; | |
} | |
.mt40, .mv40, .m_40 { | |
margin-top: 40px!important; | |
} | |
.mb40, .mv40, .m_40 { | |
margin-bottom: 40px!important; | |
} | |
.pl40, .ph40, .p_40 { | |
padding-left: 40px!important; | |
} | |
.pr40, .ph40, .p_40 { | |
padding-right: 40px!important; | |
} | |
.pt40, .pv40, .p_40 { | |
padding-top: 40px!important; | |
} | |
.pb40, .pv40, .p_40 { | |
padding-bottom: 40px!important; | |
} |
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
/** | |
* @outputStyle expanded | |
* outputStyle => nested OR expanded OR compact OR compressed | |
* @debugInfo false | |
* @lineComments false | |
* @outputFile compiled.css | |
*/ | |
@import "util"; | |
body{ | |
font-size: px2em(13); | |
} | |
@include spacing(0, 40); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment