UX Design and Development course

Core types

Sass, like many languages, consist of a series of core types. Consider the following:

Numbers

With Sass numbers will consist of floating point values, integers, and values with units.

block {
  width: (9.9 / 3) * 1em;
}

Strings

CSS specifies two kinds of strings: those with quotes, such as "Lucida Grande" or 'http://sass-lang.com', and those without quotes, such as sans-serif or bold. SassScript recognizes both kinds, and in general if one kind of string is used in the Sass document, that kind of string will be used in the resulting CSS.

String operations

SCSS

block {
  content: 'foo' + bar;
}

CSS

block {
  content: "foobar";
}

Interpolation

SCSS

@mixin firefox-message($selector, $value) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
    content: "I ate #{5 + $value} pies!";
  }
}

@include firefox-message(".header", 10);

CSS

body.firefox .header:before {
  content: "Hi, Firefox users!";
  content: "I ate 15 pies!";
}

Colors

If it can be written in CSS, it will work in Sass. In addition, Sass supports a wide range of Color Operators. All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn. For example:

SCSS

p {
  color: #010203 + #040506;
  background: #010203 * 2;
  border: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

CSS

p {
  color: #050709;
  background: #020406;
  border: rgba(255, 255, 0, 0.75);
}

Boolean

SassScript supports and, or, and not operators for boolean values.

SCSS

$alpha: red;
$beta: green;

block {
  @if $alpha != $beta {
    content: 'winner!';
  }
}

Lists

Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.

SCSS

$var: red, blue, green, orange, yellow;

Maps

Maps represent an association between keys and values, where keys are used to look up values. They make it easy to collect values into named groups and access those groups dynamically. They have no direct parallel in CSS, although they’re syntactically similar to media query expressions:

SCSS

$map: (key1: value1, key2: value2, key3: value3);

Number Operations

SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %). Sass math functions preserve units during arithmetic operations.

SCSS

p {
  $width: 1000px;

  font: 10px/8px;             // Plain CSS, no division
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

CSS

p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}