Skip to content

Instantly share code, notes, and snippets.

@onionmk2
Created September 19, 2016 14:00
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 onionmk2/842074e03c4bbeec21d9062a59d554f4 to your computer and use it in GitHub Desktop.
Save onionmk2/842074e03c4bbeec21d9062a59d554f4 to your computer and use it in GitHub Desktop.
@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')
}
@onionmk2
Copy link
Author

See the Pen oocss spacer by ononmktw (@ononmktw) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

@onionmk2
Copy link
Author

onionmk2 commented Sep 19, 2016

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