Over a million developers have joined DZone.

Using IF Statements In Sass

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In preview tutorials we were investigating some of the features and benefits you get with using Sass to generate your CSS files.

If you haven't tried Sass then I advise you look into using it in your next project, to get information on what's involved with Sass view my article on Getting Started with Sass.

We also learnt that you can use loops just like in other programming languages to dynamically create classes for your CSS.

In this article we are going to look at using IF statements in Sass.

To use IF statements you do this by defining them prefixed with a @.

    @if 1 + 1 == 2 { border: 1px solid;  }

Sass IF Statements

This will allow you to create a mixin where you pass in a number of different parameters which can change the outcome of the values for element. The below mixin is something you can apply to any element which you want to make absolute positioned, then you just pass in the values for top, right, bottom and left. We then use the IF statements to see if the parameter has a value, if it hasn't then we just ignore that property. This will allow you to exactly position the element anywhere you want using only the properties that you need to.

@mixin absolute-position($top, $right, $bottom, $left)
  position: absolute;

  @if $top != '' {
    top: $top;

  @if $right != '' {
    right: $right;

  @if $bottom != '' {
    bottom: $bottom;

  @if $left != '' {
    left: $left;

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}