Skip to content

Instantly share code, notes, and snippets.

@low-ghost
Created February 17, 2015 17:13
Show Gist options
  • Save low-ghost/096890525e79a07e860c to your computer and use it in GitHub Desktop.
Save low-ghost/096890525e79a07e860c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@function to-string($value) {
@return inspect(#{$value});
}
// general string replace functionality! what's next, regex?
// also providing a fourth argument will prefix it to returned string
@function str-replace($string, $remove, $replace, $accumulator: "") {
$pos: str-index($string, $remove);
@if $remove == "" {
@warn "no argument provided for $remove";
} @else if $replace == $remove {
@return $string;
} @else if $pos {
$accumulator: $accumulator + str-slice($string, 1, $pos - 1) + $replace;
$part2: str-slice($string, $pos + str-length($remove));
@return str-replace($part2, $remove, $replace, $accumulator);
}
@return $accumulator + $string;
}
@function str-remove($string, $list...) {
@for $i from 1 through length($list) {
$string: str-replace($string, to-string(nth($list, $i)), "");
}
@return $string;
}
@function rm-sp($string, $replace: ""){
@return str-replace($string, " ", $replace);
}
// you could almost do this without the accumulator but the final append
// is important for a proper list
@function str-explode($string, $separator, $list: ()){
$index: str-index($string, $separator);
@if $index == null {
@return append($list, $string);
}
$l: length($separator);
$list: append($list, str-slice($string, 1, $index - $l));
$remaining: str-slice($string, $l + $index);
@return str-explode($remaining, $separator, $list);
}
@function rm-last($list){
@return set-nth($list, length($list), "");
}
@function get-last($list){
@return nth($list, length($list))
}
//creates a string by removing commas and spaces from a list
@function flaten-list($list, $separator: ","){
@return rm-sp(str-replace(to-string($list), $separator, ""));
};
//this one is borrowed from hugo giraudel
// START TRANSITIONER
// changes "#main .fa" to "main-subclass-fa-transition", for instance
// b/c sass can't extend nested selectors
@function to-placeholder-name($value){
@return str-replace(
str-replace(
rm-sp($value, '-'), '.', 'subclass-'), '#', 'subid-')
+ "-transition";
}
// drops a placeholder for given element and transition
@mixin placeholder-transition($name, $transition) {
%#{$name} { transition: #{$transition}; }
}
@mixin transitioner($selector, $transition, $root: false, $properties-root: false) {
$transition: to-string($transition);
$selector: to-string($selector);
@at-root {
$placeholder: to-placeholder-name($selector);
$s-for-transition: $selector;
$s-for-properties: $selector + &;
@if str-index($transition, extend) {
$placeholder: to-placeholder-name(str-slice($transition, 8));
} @else {
@include placeholder-transition($placeholder, $transition);
}
@if $root {
$s-for-transition: $root $selector;
}
@if $properties-root {
$s-for-properties: $properties-root $selector + &;
}
#{$s-for-transition} { @extend %#{$placeholder}; }
#{$s-for-properties} { @content; }
}
}
@mixin from($root: ""){
@at-root{
$x: str-replace(to-string(&), $properties-root, "");
$added-class: "." + get-last(str-explode($x, "."));
#{$root str-remove($x, $added-class)}{
@content;
}
}
}
@mixin to(){
@at-root{
$selector: to-string(&);
@if str-index($selector, ':'){
// removes additional space if pseudo-selector is used
$selector: str-replace($selector, " :", ":");
}
#{$selector}{ @content; }
}
}
$root: ".block.left > #main";
$properties-root: ".left";
.full-height{
@include transitioner("#inner .results", height 0.6s ease-in-out, $root, $properties-root){
@include from($root){
height:0px;
}
@include to(){
height:100%;
}
}
}
.block.left > #main #inner .results {
transition: height 0.6s ease-in-out;
}
.block.left > #main #inner .results {
height: 0px;
}
.left #inner .results.full-height {
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment