Skip to content

Instantly share code, notes, and snippets.

@wate
Created July 24, 2012 14:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wate/3170267 to your computer and use it in GitHub Desktop.
Save wate/3170267 to your computer and use it in GitHub Desktop.
LessではできなくてSass(SCSS)でできること!
//-----------------------
// 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;
}
/**
* @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;
}
/**
* @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