All Except Last Child Selector

1
2
3

:not(:last-child) {
  /* styles */
}

Centering

See http://css-tricks.com/centering-css-complete-guide

Extend in Sass

Given the example from the sass documentation, given this sass:

1
2
3
4
5
6
7
8

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

its compiled css is:

1
2
3
4
5
6
7
8

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

Note that the styles are comma separated, decreasing the amount of duplicate code (rather than re-rendering each style inside the .seriousError selector). This can lead to some unintended behavior: – If you extend another selector, selectors nested under the original are also extended – You cannot extend a selector which is nested, eg – @extend div span will not work

As a rule of thumb, you can use @extend instead of including a @include a_mixin when there are no arguments to be passed. Use caution when the selector you’re extending from has nested selectors though.

Color Functions in Sass

This link has a list of all of them. Notably:

lighten($color, $amount) – Makes a color lighter

darken($color, $amount) – Makes a color darker

grayscale($color) – Converts a color to grayscale

complement($color) – Returns the complement of a color

invert($color) – Returns the inverse of a color

Each loops in Sass

From the sass documentation:

1
2
3
4
5

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

For loops in Sass

From the sass documentation:

1
2
3

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

Mixins in Sass

The sass documentation has a good example that demonstrates mixins:

1
2
3
4
5
6
7
8
9

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

is compiled to:

1
2
3
4
5
6
7
8
9
10
11

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

Mixins also support keyword arguments, so you can explicitly name the parameters in the @include statement and include them out of order. Here’s an example that works with the sexy-border mixin above:

1

h1 { @include sexy-border($width: 1in, $color: blue); }

Placeholder Selectors in Sass

Placeholder selectors can only be used with the @extend directive. If they’re not referenced at all, they render no output in the compiled css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

%error {
  border: 1px #f00;
  background-color: #fdd;
}
%not-used {
  // these styles aren't rendered anywhere
  // since %not-used is not extended anywhere in this file
  color: red;
  font-weight: bold;
}
.seriousError {
  @extend %error;
  border-width: 3px;
}

is compiled to:

1
2
3
4
5
6
7
8

.seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

While loop in Sass

From the sass documentation:

1
2
3
4
5

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

Watching a Sass File

Automatically recompiles scss into css:

1

sass --watch style.scss:style.css