Η Οδηγία @for στο SASS

Με τη βοήθεια της οδηγίας @for μπορούμε να εξάγουμε συγκεκριμένα στυλ σε ποσότητα, που καθορίζεται από μια μεταβλητή-μετρητή. Η πρώτη παραλλαγή σύνταξης της @for φαίνεται ως εξής:

scss@for $var from (begin) through (end)

Σε αυτήν την περίπτωση, η περιοχή περιλαμβάνει αυστηρά τις τιμές (begin) και (end). Αξίζει να σημειωθεί ότι τα (begin) και (end) πρέπει να επιστρέφουν ακέραιους αριθμούς, αφού ορίζουν την κατεύθυνση της μέτρησης, π.χ. αν το (begin) είναι μικρότερο από το (end), ο μετρητής θα αυξάνεται και αντιστοίχως, αν συμβαίνει το αντίθετο - θα μειώνεται.

Ας εξετάσουμε τη λειτουργία της οδηγίας @for στην πρώτη σύνταξη με το ακόλουθο παράδειγμα:

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Αποτέλεσμα μεταγλώττισης:

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

Στη δεύτερη παραλλαγή, η σύνταξη εμφανίζεται ως εξής:

scss@for $var from (begin) to (end)

Σε αυτήν την περίπτωση, η τιμή (end) αποκλείεται.

Ας πάρουμε το προηγούμενο παράδειγμα και να το γράψουμε στη δεύτερη παραλλαγή:

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Τώρα δώστε προσοχή στον παραγόμενο κώδικα:

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}