Created
September 19, 2016 14:00
-
-
Save onionmk2/842074e03c4bbeec21d9062a59d554f4 to your computer and use it in GitHub Desktop.
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
@function str-replace($string, $search, $replace: '') { | |
$index: str-index($string, $search); | |
@if $index { | |
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
} | |
@return $string; | |
} | |
@mixin spacing($size, $unit) { | |
$margin: (type: 'm', prop: 'margin'); | |
$padding: (type: 'p', prop: 'padding'); | |
@each $item in $margin, $padding { | |
$type: map-get($item, type); | |
$prop: map-get($item, prop); | |
$size_using_d_as_dot: str-replace("#{$size}", '.', 'd'); | |
.#{$type}r#{$size_using_d_as_dot}#{$unit} { #{$prop}-right: #{$size}#{$unit} ;} | |
.#{$type}b#{$size_using_d_as_dot}#{$unit} { #{$prop}-bottom: #{$size}#{$unit} ;} | |
.#{$type}t#{$size_using_d_as_dot}#{$unit} { #{$prop}-top: #{$size}#{$unit} ;} | |
.#{$type}l#{$size_using_d_as_dot}#{$unit} { #{$prop}-left: #{$size}#{$unit} ;} | |
} | |
} | |
@for $i from 1 through 100 { | |
$number: $i / 10; | |
@include spacing($number, 'rem') | |
} |
spacing部分は http://terkel.jp/archives/2011/03/oocss-spacing-classes-using-sass/
str-replacer部分はhttps://css-tricks.com/snippets/sass/str-replace-function/
をほぼそのまま使わせていただきました。ありがとうございました。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See the Pen oocss spacer by ononmktw (@ononmktw) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>