Concrete Sass Examples

When I started using Sass I was mostly using  nesting and variables. In my own experience this is also what I’ve seen to be the most commonly used features.

I want to illustrate some of it’s other features and how they can be used with practical examples.

@for and @if rules

The @for and @if rules can be used to quickly generate a lot of CSS selectors. Things that would have been possible but impractical and would have been hard to maintain.

For example to make a CSS implementation of  a progress meter, I used the @for and @if rules.

@for $pct from 0 through 100 {
    .progress-#{$pct} {
      width: getWidth($pct);

      &.tresholds {
        @if $pct < 33 {
          background-color: greenyellow;
        } @else if $pct < 66 {
          background-color: yellow;
        } @else {
          background-color: red;
        }
      }
    }
}

This quickly generates all 100 CSS selectors with colours varying depending on the progress.

You can see the full example here: CSS Progress Meters CodePen.

Another good use of the @for rule is for creating multiple @keyframes in CSS animations.

@function

Functions can be used to return values which is useful when dealing with dynamic rules like those created with @for or to calculate a value using a variable. This way if this value changes in the future you only need to change the variable and not all of the derived values.

For example (this is taken from the same progress meters CodePen):

$meter-width: 120px;

@function getWidth($pct) {
  @return $meter-width / 100 * $pct;
}

In this case the getWidth function will return the width for a given percentage. In the previous progress meter example we use this to get the width at each iteration in our for loop.

Also if we change the value of the $meter-width variable we won’t have to change our scss file besides that single value change.

Using Sass variables with CSS’ calc

CSS’ calc function is great, particularly when doing things like:

width: calc(100% - 5em);

You can still use your Sass variables in the calc function by using the following syntax:

$meter-width: 120px;

width: calc(100% - #{$meter-width});

Mixins

Mixins allow you to include a bunch of rules at once in a selector. Similar to @extend but one of the things that differentiate them is the fact that mixins can have parameters.

The Sass website mentions vendor prefixes as a good use of mixins. In this CSS triangles CodePen, I demonstrate another use. I used mixins for creating triangles using the the CSS Triangle trick.

If you define these mixins in a base scss file, you can then easily create all kind of CSS triangles.

%arrow {
  height: 0;
  width: 0;
}

@mixin css-triangle-trick-up($size, $color) {
  border-bottom: $size solid $color;
  border-left: $size solid transparent;
  border-right: $size solid transparent;
}

@mixin css-triangle-trick-down($size, $color) {
  border-top: $size solid $color;
  border-left: $size solid transparent;
  border-right: $size solid transparent;
}

.arrow-up {
  @extend %arrow;
  @include css-triangle-trick-up(30px, white);
}

.arrow-red-down {
  @extend %arrow;
  @include css-triangle-trick-down(40px, red);
}

The CodePen also includes examples of the @for rule and @extend.

Conclusion

There is more to Sass than what I have shown here, but still Sass is one of those subjects where there aren’t a ton of things to master. It’s quick and easy to learn the different features it offers and well worth the effort.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s