/ Gists / SCSS

Gists - SCSS

On gists

Rainbow stripe mixin with SCSS + Compass

SCSS

pop-stripe.md #

Rainbow stripe mixin with SCSS + Compass

I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?

Goals:

  1. [check] Use variables for colors so they can be swapped out for different colors.
  2. [check] The widths are hard coded for 8 colors. Can it be done smarter where it adjusts to the number of colors you add? Or is that asking too much?
  3. [check] The colors are defined twice for the color starts and stops. Can this be done better?
  4. [see below] Right now I define the colors as variables at the top level, then pass them in the mixin. Should they instead be created inside the mixin and then colors are brought in as arguments? Or does that matter?

Variables:

// You could set individual variables for each color as well.
// You would still pass them all as a single argument,
// or join them into a single variable before passing, as you see fit.
$mycolors: red orange yellow green blue indigo violet;

Function:

// Returns a striped gradient for use anywhere gradients are accepted.
// - $position: the starting position or angle of the gradient.
// - $colors: a list of all the colors to be used.
@function rainbow($position, $colors) {
  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
  $gradient: compact();
  $width: 100% / length($colors);

  @for $i from 1 through length($colors) {
    $pop: nth($colors,$i);
    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
    $gradient: join($gradient, $new, comma);
  }

  @return linear-gradient($position, $gradient);
}

Application:



.rainbow { 
  @include background-image(rainbow(left, $colors));
}
On gists

Multi sass list

•
SCSS

multisasslistv2.scss #

$list: 

(
    theme1: (color: red, background: green, font: (family: Arial, size: 20px)),
    theme2: (color: black, background: white, font: (family: Verdana, size: 30px))

);


$oldList: 
(
    1: (red, blue),
    2: (brown, gold)
);


    @each $index, $row in $oldList
    {
        // $color: map-get($row, color) !global;
        // $background: map-get($row, background) !global;
        // $font: map-get($row, font);

        // $fontFamily: map-get($font, family);


        .theme-#{$index} 
        {
            $c1: nth($row, 1);
            $c2: nth($row, 2);
           // font-family: $fontFamily;
           color: $c1;
           background: $c2;
        }
    }
On gists

Generování cyklů z pole / lists

•
SCSS

SassMeister-output.css #

/*! 1 zpusob pres lists a funkci nth */
.success {
  background-image: url(../images/success.png);
}

.error {
  background-image: url(../images/error.png);
}

/* 2 zpusob pomoci tzv. multiple assignment */
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}
On gists

Placeholder mixin

•
SCSS

placeholder-mixin.scss #

$placeholders: '-webkit-input-placeholder',
               '-moz-placeholder',
               '-ms-input-placeholder';

@mixin placeholder {
  @each $placeholder in $placeholders {
    @if $placeholder == "-webkit-input-placeholder" {
      &::#{$placeholder} {
        @content;
      }
    }
    @else if $placeholder == "-moz-placeholder" {
      // FF 18-
      &:#{$placeholder} {
        @content;
      }

      // FF 19+
      &::#{$placeholder} {
        @content;
      }
    }
    @else {
      &:#{$placeholder} {
        @content;
      }
    }
  }
}
On gists

Module mixin - ukázka modulového přístupu

•
SCSS

sass-maps-module.scss #

// _mixins.scss
@mixin module($color: grey, $duration: 0s, $border: null) {
  color: $color;
  transition: $duration;
  border: $border;
}
 
// _component.scss
.element {
  @include module((
    duration: .15s,
    color: pink
  )...);
}


// _mixins.scss
@mixin module2($options: ()) {
  $configuration: map-merge((
    color: grey,
    duration: 0s,
    border: null
  ), $options);
 
  color: map-get($configuration, color);
  transition: map-get($configuration, duration);
  border: map-get($configuration, border);
}
 
// _component.scss
.element {
  @include module2((
    color: pink,
    duration: .15s
  ));
}


// http://www.sitepoint.com/using-sass-maps/
On gists

Maps v SCSS - náhrada za seznamy (lists)

•
SCSS

sass-maps.scss #

$colors: (
  blue: #008eff,
  white: #fff,
  gray: #808080,
  black: #464646,
  orange: #ff9100,
);


@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }
 
  @warn "Unknown `#{$key}` in $colors.";
  @return null;
}
On gists

Ukázka zanořeného map objectu - SCSS (2 rozměrný)

•
SCSS

SassMeister-rendered.html #

<div class="a">kuku</div>
On gists

Hračka - ukázka theme - vygenerování struktury

•
SCSS

SassMeister-rendered.html #

<section class="theme-green">
  <div class="a">A</div>
  <div class="b">B</div>
</section>

<section class="theme-red">
  <div class="a">A</div>
  <div class="b">B</div>
</section>
On gists

Transition mixin

•
SCSS

usage.css #

a {
  color: gray;
  @include transition(color .3s ease);
  &:hover {
    color: black;
  }
}
On gists

Keyframes mixin

•
SCSS

usage.css #

@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}