Implementation of Control Directives in SASS


Sass Script supports control directives for including styles only under specific condition or including same style several times with variations. Their main purpose is to use them in mixins, those that are part libraries like Compass and requires flexibility.


IF is one of the basics directives for control the flow. The style would be applied only if the condition returns anything else than false or null.

Example :

if example Image

Result :

if result image


for loop is a repetition control structure that allows you to efficiently write a loop that needs to execute a specific number of times.

Example :

for example image

Result :

For result image


The for-loop is good if you are working with numbers. But if you want to work with list of words, than using the @each is better decision.

Example :

each example

Result :

Each result example image


If the step one that is in the for-loop is not good for you, than you must use the while. It will run until the condition is true.

Example :

while example image

Result :

While result example

Add new comment