All notes
Scss

Command line

scss


sass input.scss output.css

# watch folders
sass --watch app/sass:public/stylesheets

Syntax

sass-lang.com: guide.

ampersand

css-tricks.com: the SASS ampersand.



.btn {
  &-primary {}
  &-secondary {}
}
// Compiled CSS:
.btn-primary {}
.btn-secondary {}

.button {
  &:visited { }
  &:hover { }
  &:active { }
}
// This compiles to:
.button:visited { }
.button:hover { }
.button:active { }

//---------- The default &
.some-class {
  &.another-class {}
}
// Compiles to:
// Match an element that has *both* of two classes.
.some-class.another-class { }

.parent {
  .child {}
}
// This compiles to:
.parent .child {}
// It is the same as
.parent {
  // Note the space behind '&'.
  & .child {}
}

//---------- Change the position of &
.button {
  body.page-about & { }
}
// Compiles to
body.page-about .button {}