SASS P5 – Control Directive & Expressions

Phần này sẽ gồm 4 phần chính: IF, FOR, EACH, WHILE

1. if

Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng

p {@if1 + 1 == 2    {border: 1px solid;}@if5 < 3         {border: 2px dotted;}@ifnull          {border: 3px double;}}$type: monster;h3 {@if$type == ocean {color: blue;}@else if$type == matador {color: red;}@else if$type == monster {color: green;}@else{color: black;}}

Kết quả

p{border: 1px solid;}h3{color: green;}

2. for

Sử dụng vòng lặp @for cho các trường hợp biết trước số lần lặp lại khối lệnh.

@for$ifrom 1 through3 {.item-#{$i}{width: 2em *$i;}}

Kết quả

.item-1{width: 2em;}.item-2{width: 4em;}.item-3{width: 6em;}

3. each

Vòng lặp @each dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé

@each$name,$color in (item1, red),(item2, green),(item3, blue){.#{$name}{background:url(../images/#{$name}.png);color:#{$color};}}

Kết quả

.item1{background:url(../images/item1.png);color: red;}.item2{background:url(../images/item2.png);color: green;}.item3{background:url(../images/item3.png);color: blue;}

4. while

Vòng lặp @while sẽ thực hiện lặp đi lặp lại một khối công việc đến khi nào điều kiện đã cho còn là đúng.

$i: 6;@while$i > 0 {.item-#{$i}{width: 2em *$i;}$i:$i- 2;}

Kết quả

.item-6{width: 12em;}.item-4{width: 8em;}.item-2{width: 4em;}