(click anywhere to close)

[SASS] Control Flow

category: Website | course: SASS | difficulty:

This chapter’s title is just a fancy name for controlling how the stylesheet is compiled. More specifically, it’s about controlling which parts are ultimately going to be rendered, and how often. The program determines this based on certain conditions and expressions you provide. If you’ve done any sort of programming work, you should be familiar with these.

I’ll give you a quick overview about if-else and loops. If you want to know more, I suggest you check out the JavaScript course. It uses the same principles, and if you’re learning advanced CSS stuff, you’ll probably also like (and need) JavaScript.


To create a simple if-else statement, that adds one value if the condition is true, and another if it’s false or null, use

if(condition, value if true, value if false)
p {
  color: if(lightness($background-color) > 50, #000, #fff); //Set text colour dark/light based on background colour

To create more complex statements that add a certain set of styles based on multiple conditions, we use

@if condition { styles } @else if condition { styles } @else { styles }

Of course you can use as many @else if statements as you like, which means you can also omit them entirely.

p {
  @if (lightness($background-color) > 50) {
    color: #000000; // Light background, make text colour dark
  } @else {
    color: #ffffff; // Dark background, make text colour light


To repeat a set of styles, without having to retype it yourself, we can use a loop. To create a for loop, use one of these two syntaxes:

@for $var from <start> through <end> @for $var from <start> to <end>

Note that the first syntax includes the <end> value, while the second syntax doesn’t.

//Set first nine children to gradually darker background colours
p {
	@for $i from 1 to 10 {
		&:nth-child($i) {
			background-color: darken($main-colour, ($i*5)%);

To create a for each loop through a list or map, use

@each $var in <list or map>
$map = (cat1: "Panda", cat2: "Jaguar", cat3: "Koala", cat4: "Bushdog");

//Sets elements with classes cat1, cat2, cat3, cat4 to their respective animal
@each $cat, $name in $map {
	.#{$cat}::after {
		content: $name;

To create a while loop, which keeps looping as long as a condition is true, use

@while condition

Note that this is rarely necessary, and also make sure you don’t create infinite loops. Check if there’s always a way for the condition to return false and exit the loop.


Last, but certainly not least, it can be very useful to debug your SASS code in case there’s an error. If something doesn’t go as planned, but you don’t know why, it’s helpful to debug. This means letting the compiler spit out the values of certain variables or functions or whatever, while it’s compiling. This way you can check if everything actually is going like it should be.

To print out a value to the standard error stream – which is the command line tool if you use that, or part of the software if you use that – we use

@debug expression
$some-variable: 20px;
$some-other-variable: 30px;
@debug $some-variable + $some-other-variable; //Should print 50px
[SASS] FunctionsNo next post :(
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk