Certainly, working with CSS everyone has heard of the concept of variables,
We can declare variables in CSS as follows
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> |
And then reuse these variables in many places, which makes it easier to maintain the code
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> |
In addition to this usage, we can override variables to reduce the need to rewrite the code over and over again.
Override variables
Suppose we have the following elements
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> |
To apply modifiers to the class box
we will have to write the following
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> |
As we can see above, writing normally takes a lot of code, and this is where CSS variables come into play
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 |
In addition to the above case, we can apply how to many other cases
Using CSS variables will help us avoid having to repeat the code over and over again