SASS P4 – Import – Partial – Media – Extend
- Tram Ho
1. Import & Partial
Trong thực tế khi code scss ta thường chia nhỏ ra các file đảm nhiệm các chức năng khác nhau như _colors.scss
or_variables.scss
rồi dùng từ khóa @import
để gọi vào.
1 2 3 4 | <span class="token property"><span class="token variable">$primary-300</span></span><span class="token punctuation">:</span> #64B5F6<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$primary-400</span></span><span class="token punctuation">:</span> #42A5F5<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$primary-600</span></span><span class="token punctuation">:</span> #1E88E5<span class="token punctuation">;</span> |
1 2 3 4 | <span class="token property"><span class="token variable">$font-size-base</span></span> <span class="token punctuation">:</span> 14px<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$font-size-large</span></span><span class="token punctuation">:</span> <span class="token function">ceil</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token variable">$font-size-base</span> <span class="token operator">*</span> 1.25<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ~18px</span> <span class="token property"><span class="token variable">$font-size-small</span></span><span class="token punctuation">:</span> <span class="token function">ceil</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token variable">$font-size-base</span> <span class="token operator">*</span> 0.85<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ~12px</span> |
File style.scss
To import the above 2 files, we write the following code
1 2 3 4 5 6 7 8 | <span class="token keyword">@import</span> <span class="token string">"variables"</span><span class="token punctuation">;</span> <span class="token keyword">@import</span> <span class="token string">"colors"</span><span class="token punctuation">;</span> <span class="token selector">.title </span><span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token variable">$font-size-small</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$primary-300</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Result
1 2 3 4 5 | <span class="token selector">.title</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #64B5F6<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Note
- The 3 files above are on the same level as each other
- When importing, it is not necessary to write the scss file extension
- I see 2 files
_colors.scss
and_variables.scss
have underscores in front, that’s Partial usage, this means SASS won’t compile those files into css files
2. Media
Writing style @media
Similar to writing CSS, often used when responsive websites
1 2 3 4 5 6 | <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.col-lg-6</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
3. Extend
Inherit the properties of another selector. Use keywords @extend
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token selector">.btn </span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">touch-action</span><span class="token punctuation">:</span> manipulation<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid transparent<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 7px 12px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5384616<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.btn-primary </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> .btn<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Result
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token selector">.btn, .btn-primary</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">touch-action</span><span class="token punctuation">:</span> manipulation<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid transparent<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 7px 12px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5384616<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.btn-primary</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Selection area %extend
will only inherit properties without compile.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token selector"><span class="token placeholder">%btn</span> </span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">touch-action</span><span class="token punctuation">:</span> manipulation<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid transparent<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 7px 12px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5384616<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.btn-primary </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> <span class="token placeholder selector">%btn</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Result
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token selector">.btn-primary</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">touch-action</span><span class="token punctuation">:</span> manipulation<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid transparent<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 7px 12px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5384616<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.btn-primary</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #2196F3<span class="token punctuation">;</span> <span class="token punctuation">}</span> |