Sass Language

Table of Contents

Calculate units like percent, viewport things? howto

Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit.

Use calc() from CSS standards or use interpolation(#{$var}) as following:

$a: 25%;
$b: 5px;

.foo {
  width: -webkit-calc(#{$a} - #{$b});
  width:    -moz-calc(#{$a} - #{$b});
  width:         calc(#{$a} - #{$b});

Use the values of Sass varibles to CSS selectors or property names howto

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;

.sass vs .scss discussion

Sass Ampersand(&) discussion

.parent {
  .child {}

is equivalent to

.parent {
  & .child {}

Nesting without the & is shorthand for nesting with & and a space. So, if you need to use selectors combined without a space, like Pseudo classes, you must use &. Otherwise, you can omit & as the default behavior.

Also, you can use & multiple times:

.parent {
  .child {
    & div & & > a {}

is equivalent to:

.parent .child div .parent .child .parent .child > a {}