Chắc hẳn, làm việc với CSS thì mọi người cũng từng nghe tới khái niệm variables,
Ta có thể khai báo variables trong CSS như sau
1 2 3 4 5 6 | <span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--red</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">--blue</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">--width</span><span class="token punctuation">:</span> 99px<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Và sau đó dùng lại các variables này ở nhiều chỗ, qua đó giúp việc maintain code dễ hơn
1 2 3 4 5 6 7 8 | <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Ngoài cách dùng này ra, chúng ta còn có thể override lại các variables để giảm thiệu việc phải viết lại code nhiều lần.
Override variables
Giả sử ta có những element sau
1 2 3 4 5 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>box<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>box.box--big<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>box.box--rotate<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>box.box--big.box--rotate<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Để áp dụng các modifier cho class box ta sẽ phải viết như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>5deg<span class="token punctuation">)</span> // trạng thái cơ bản của box <span class="token punctuation">}</span> <span class="token selector">.box--big</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>5deg<span class="token punctuation">)</span> // modifier cho box to ra nhưng vẫn phải giữ nguyên trạng thái rotate cơ bản của box <span class="token punctuation">}</span> <span class="token selector">.box--rotate</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span>2<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> // modifier cho box rotate nhưng vẫn phải giữ nguyên scale cơ bản của box <span class="token punctuation">}</span> <span class="token selector">.box--big.box--rotate</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>2<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> // kết hợp cả 2 modifier thì cần phải sửa lại đơn vị của scale và rotate <span class="token punctuation">}</span> |
Như trên thì ta thấy việc viết bình thường mất rất nhiều code, và đây là lúc mà CSS variables phát huy tác dụng của nó
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--scale</span><span class="token punctuation">:</span> 1.2<span class="token punctuation">;</span> <span class="token property">--rotate</span><span class="token punctuation">:</span> 5deg<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--scale<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--rotate<span class="token punctuation">)</span><span class="token punctuation">)</span> // trạng thái cơ bản của box <span class="token punctuation">}</span> <span class="token selector">.box--big</span> <span class="token punctuation">{</span> <span class="token property">--scale</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> // ta chỉ cần override lại variable --scale<span class="token punctuation">,</span> sẽ không ảnh hưởng đến rotate <span class="token punctuation">}</span> <span class="token selector">.box--rotate</span> <span class="token punctuation">{</span> <span class="token property">--rotate</span><span class="token punctuation">:</span> 45deg<span class="token punctuation">;</span> // ta chỉ cần override lại variable --rotate<span class="token punctuation">,</span> sẽ không ảnh hưởng đến scale <span class="token punctuation">}</span> <span class="token selector">.box--big.box--rotate</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> // k cần phải kết hợp cả 2 modifier vì đoạn code 2 modifier ở trên k làm ảnh hưởng đến nhau |
Ngoài trường hợp trên, chúng ta có thể áp dụng cách nào vào nhiều trường hợp khác nữa
Việc sử dụng CSS variables sẽ giúp chúng ta tránh phải lặp lại code nhiều lần