Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Created June 27, 2015 12:38
Show Gist options
  • Save KittyGiraudel/4c587d1d2812febe0048 to your computer and use it in GitHub Desktop.
Save KittyGiraudel/4c587d1d2812febe0048 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
/// Trim `$string`
/// @param {String} $string - String to trim
/// @return {String}
@function trim($string) {
@return str-slice(
$string,
first-index($string, 'left'),
first-index($string, 'right')
);
}
/// Find first char which is not a space
/// @param {String} $string - String
/// @param {String} $direction ['left'] - Either `left` or `right`
/// @return {Number}
@function first-index($string, $direction: 'left') {
@for $i from 1 through str-length($string) {
$index: if($direction == 'left', $i, -$i);
@if str-slice($string, $index, $index) != ' ' {
@return $index;
}
}
@return 0;
}
@function clean-property($property) {
$properties: ('skew', 'rotate', 'translate', 'scale');
$property: trim($property);
@each $prop in $properties {
@if str-slice($property, 1, str-length($prop)) == $prop {
@return unquote($prop);
}
}
@return unquote($property);
}
@function clean-value($value) {
$clean-value: '';
@for $i from 1 through str-length($value) {
$character: str-slice($value, $i, $i);
$clean-value: $clean-value + if($character == ',', ' ', $character);
}
@return unquote(trim($clean-value));
}
@function clean-transforms($transforms) {
$clean-transforms: ();
@each $transform, $value in $transforms {
$clean-transforms: map-merge($clean-transforms, (
clean-property($transform): clean-value($value)
));
}
@return $clean-transforms;
}
@mixin explode-transforms($transforms) {
$transforms: inspect($transforms);
$transform-map: ();
$current-mode: 'property';
$current: (
'property': '',
'value': ''
);
@for $i from 1 through str-length($transforms) {
$character: str-slice($transforms, $i, $i);
@if ($character == '(') {
$current-mode: 'value';
} @else if ($character == ')') {
$current-mode: 'property';
$transform-map: map-merge($transform-map, (
map-get($current, 'property'): map-get($current, 'value')
));
$current: ('property': '', 'value': '');
} @else {
$current: map-merge($current, (
$current-mode: map-get($current, $current-mode) + $character)
);
}
}
@each $transform, $value in clean-transforms($transform-map) {
#{$transform}: $value;
}
}
.foo {
@include explode-transforms(translate3d(0, 0, 0) rotateZ(90deg) scale(50%, 50%));
}
.foo {
translate: 0 0 0;
rotate: 90deg;
scale: 50% 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment