SASS P5 – Control Directive & Expressions
- Tram Ho
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token selector">p </span><span class="token punctuation">{</span> <span class="token keyword">@if</span> <span class="token selector">1 + 1 == 2 </span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">@if</span> <span class="token selector">5 < 3 </span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px dotted<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">@if</span> <span class="token selector">null </span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 3px double<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token property"><span class="token variable">$type</span></span><span class="token punctuation">:</span> monster<span class="token punctuation">;</span> <span class="token selector">h3 </span><span class="token punctuation">{</span> <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$type</span> == ocean </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">@else if</span> <span class="token selector"><span class="token variable">$type</span> == matador </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">@else if</span> <span class="token selector"><span class="token variable">$type</span> == monster </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">@else</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Kết quả
1 2 3 4 5 6 7 | <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h3</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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.
1 2 3 4 | <span class="token keyword">@for</span> <span class="token variable">$i</span> <span class="token keyword">from</span> 1 <span class="token keyword">through</span> <span class="token selector">3 </span><span class="token punctuation">{</span> <span class="token selector">.item-<span class="token variable">#{$i}</span> </span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 2em <span class="token operator">*</span> <span class="token variable">$i</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Kết quả
1 2 3 4 | <span class="token selector">.item-1</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item-2</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item-3</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 6em<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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é
1 2 3 4 5 6 7 | <span class="token keyword">@each</span> <span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$color</span> in <span class="token punctuation">(</span>item1<span class="token punctuation">,</span> red<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>item2<span class="token punctuation">,</span> green<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>item3<span class="token punctuation">,</span> blue<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token selector">.<span class="token variable">#{$name}</span> </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>../images/<span class="token variable">#{$name}</span>.png<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">#{$color}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Kết quả
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token selector">.item1</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../images/item1.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item2</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../images/item2.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item3</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../images/item3.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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.
1 2 3 4 5 6 | <span class="token property"><span class="token variable">$i</span></span><span class="token punctuation">:</span> 6<span class="token punctuation">;</span> <span class="token keyword">@while</span> <span class="token selector"><span class="token variable">$i</span> > 0 </span><span class="token punctuation">{</span> <span class="token selector">.item-<span class="token variable">#{$i}</span> </span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 2em <span class="token operator">*</span> <span class="token variable">$i</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token property"><span class="token variable">$i</span></span><span class="token punctuation">:</span> <span class="token variable">$i</span> <span class="token operator">-</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Kết quả
1 2 3 | <span class="token selector">.item-6</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 12em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item-4</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 8em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item-2</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> |