Sass Snippets

color.md

p {         
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);        
}

is compiled to:

p {  
  color: rgba(255, 255, 0, 0.75);  
}

---

$translucent-red: rgba(255, 0, 0, 0.5);

p {        
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

is compiled to:

p {
  color: rgba(255, 0, 0, 0.9);
  background-color: rgba(255, 0, 0, 0.25); 
}

keywords.md

###Variable Defaults: !default

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

---

###The !optional Flag

Normally when you extend a selector, it’s an error if that @extend doesn’t work. For example, if you write a.important {@extend .notice}, it’s an error if there are no selectors that contain .notice. It’s also an error if the only selector containing .notice is h1.notice, since h1 conflicts with a and so no new selector would be generated.

Sometimes, though, you want to allow an @extend not to produce any new selectors. To do so, just add the !optional flag after the selector. For example:

a.important {
  @extend .notice !optional;
}

---

###@for

The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from through and @for $var from to . Note the difference in the keywords through and to. $var can be any variable name, like $i; and are SassScript expressions that should return integers.

The @for statement sets $var to each successive number in the specified range and each time outputs the nested styles using that value of $var. For the form from ... through, the range includes the values of and , but the form from ... to runs up to but not including the value of . Using the through syntax,

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

is compiled to:

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

---

###@each

The @each rule has the form @each $var in . $var can be any variable name, like $length or $name, and is a SassScript expression that returns a list.

The @each rule sets $var to each item in the list, then outputs the styles it contains using that value of $var. For example:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

is compiled to:

.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'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

---

###@while

The @while directive takes a SassScript expression and repeatedly outputs the nested styles until the statement evaluates to false. This can be used to achieve more complex looping than the @for statement is capable of, although this is rarely necessary. For example:

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

is compiled to:

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }