UX Design and Development course

Operations with directives

All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for.

SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can.

Relational operators (<, >, <=, >=) are also supported for numbers, and equality operators (==, !=) are supported for all types.

In the following example you will see that operators are very handy with comparing values for control directives. SassScript supports basic control directives for including styles only under some conditions or including the same style several times with variations.

$width: 800px;
$padding: 20px;
$border-width: 1px;

.box {
  box-sizing: border-box;
  width: $width;
  @if $padding > 0 {
    padding: $padding;
  }
  @if $border-width != 0 {
    border: $border-width solid black;
  }
  $no-box-width: $width - ($padding * 2 + $border-width * 2);
  @if $no-box-width < $width {
    .no-boxsizing & {
      width: $no-box-width;
    }
  }
}

SassMeister Gist

Operations range of numbers

The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end>.

Note the difference in the keywords through and to. $var can be any variable name, like $i; <start> and <end> are SassScript expressions that should return integers.

The @for statement sets $var to each successive number in the specified range and each time outputs the nested styles using that value of $var. For the form from <start> through <end>, the range includes the values of <start> and <end>, but the form from <start> to <end> runs up to but not including the value of <end>.

from <start> through <end>

$cols: 2;

@for $i from 1 through $cols {
  .grid_#{$i}of#{$cols} {
    @include grid($i, $grid_context: $cols);
  }
}

from <start> to <end>

$cols: 2;

@for $i from 1 to $cols {
  .grid_#{$i}of#{$cols} {
    @include grid($i, $grid_context: $cols);
  }
}

Note: The grid mixin is being leveraged from the Stipe Compass extension for illustration of this exercise.

SassMeister Gist

Operations - list of values

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.

By themselves, lists don't do much. This example illustrates using a list with the [@each rule][each-rule] to create a series of CSS rules based on a list of vendor prefixes.

[Read more on lists][read-more]

$prefix-defaults: -moz- -webkit- -o- -ms- "" !default;

@mixin border-radius($border-radius, $prefixes: $prefix-defaults) {
  @each $prefix in $prefixes {
    #{$prefix}border-radius: $border-radius;
  }
}

.box {
  @include border-radius(10px);
}

SassMeister Gist

Operations Advanced - list of values

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.

On their own, lists don’t do much, but the Sass list functions make them useful. The nth function can access items in a list, the join function can join multiple lists together, and the append function can add items to lists. The @each rule can also add styles for each item in a list.

Read more on lists

$icons: (rss "\f09e") (phone "\e001") (headphones "\e008")

%standard-margin
  margin-right: 0.25em

@each $icon in $icons
  %icon-#{nth($icon, 1)}:before
    @extend %standard-margin
    content: nth($icon, 2)

.rss-tag
  @extend %icon-rss

.call-us
  @extend %icon-phone

.listen-now
  @extend %icon-headphones

SassMeister Gist