Forem

mikkel250
mikkel250

Posted on

Sass Control Flow

If Else

Sass gives more control flow than CSS, beginning with the form of @if and @else. Based on the results of the control flow, the Sass will compile to different CSS based on the conditions.

@mixin foo($size) {
  font-size: $size;
  @if $size > 20 {
    line-height: $size;
  } @else {
    // @else shown as syntax demo, no need for it here
  }
}

.small {
  @include foo(14px);
}
.large {
  @include foo(24px);
}

// compiles to CSS
.small {
  font-size: 14px;
}
.large {
  font-size: 24px;
  line-height: 24px;
}

If you work with any other programming language, this should look familiar, just note that there are no parentheses around the condition following the @if keyword.

For loops

Sass also provides a for loop that can be used for control flow and automate repetitive tasks. Some things to note are that for loops can be either inclusive or exclusive, depending on how it is written. Using through is inclusive. Using to is exclusive.

@for $i from 1 through 5 {
 // inclusive
}

@for $i from 1 to 5 {
 // exclusive
}

The syntax of how to create style rules for different font sizes for the various h tags based on some simple math is shown below. On the second line of the example below, the #{$i} is interpolation, which tacks on the value of i after the h.

@for $i from 1 through 5 {
  h#{$i} {
    font-size: 5rem - $i*0.75rem;
  }
}

// compiles to CSS 
h1 {font-size: 4.25rem;}
h2 {font-size: 3.5rem;}
h3 {font-size: 2.75rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.25rem;}

Another good application of a loop might be if a grid system is used, a more DRY method could use a loop to generate the values instead of repeatedly writing the measurement values, and later being able to change the values once and have them reflected everywhere.

Each

Another loop which can be used is @each, which is used to iterate over lists, which will be covered in the next installment in this series. The syntax is:

@each $i in $myList {
  /* your code */ 
}

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more