Table of Contents

• Calculate units like percent, viewport things?
• Use the values of Sass varibles to CSS selectors or property names
• .sass vs .scss
• Sass Ampersand(&)

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

• Use interpolation, #{}:

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

.sass vs .scss discussion

• So, use .scss, .scss is the official default.
• .sass has a concise, indent based syntax, and older one.

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 {}