Khái niệm
Sass là gì
Sass là viết tắt của Syntactically Awesome Style Sheets, một ngôn ngữ tiền xử lý CSS. Cú pháp Css của bạn sẽ được viết dưới dạng Sass, sau đó sẽ được biên dịch qua Css.
Có nhiều loại CSS Preprocessor:
- Sass
- Stylus
- Less
- ….
Trong bài viết này mình sẽ giới thiệu về Sass.
Scss là gì
Bản thân Sass có 2 kiểu viết, scss là kiểu viết được tạo ra sau. Một kiểu viết có đuôi .sass, một kiểu viết thứ 2 là scss có đuôi là .scss .
Cách viết sass:
1 2 3 | .f16 <span class="token property">font-size</span><span class="token punctuation">:</span> 153cm<span class="token punctuation">;</span> |
Cách viết scss:
1 2 3 4 | <span class="token selector">.f16</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 153cm<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
cả 2 đều render ra css
1 2 3 4 | <span class="token selector">.f16</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 153cm<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Các tiện ích của Sass
- Đã có một thời gian dài phát triển và được sử dụng rộng rãi
- Tiết kiệm được thời gian code Css
- Có cộng đồng rộng lớn
- Tính tương thích với css cao.
Các quy tắc viết Sass
Mình prefer việc sử dụng Scss hơn là Sass, vì cú pháp vẫn giữ lại dấu ngoặc nhọn (giống vs cú pháp của Css) nên rất dễ hiểu.
Quy tắc xếp chồng (Nested Rule)
Ví dụ mình có một đoạn html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mystyle.css<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>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>SASS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> |
Với cú pháp Css thuần, chúng ta sẽ phải viết như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li</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 punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 6px 12px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tuy nhiên chúng ta có thể bỏ qua việc phải viết lại thứ tự các thẻ khi style bằng scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token selector">nav </span><span class="token punctuation">{</span> <span class="token selector">ul </span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li </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 punctuation">}</span> <span class="token selector">a </span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 6px 12px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Variable
Cho phép ta định nghĩa variable, thuận tiện khi định nghĩa các font, kiểu chữ chung trong 1 project.
Variable trong Sass có các scope khác nhau: global và scope thường
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token property"><span class="token variable">$myColor</span></span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token selector">h1 </span><span class="token punctuation">{</span> <span class="token property"><span class="token variable">$myColor</span></span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$myColor</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <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 variable">$myColor</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mystyle.css<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>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is a paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> |
Thẻ
sẽ có màu đỏ chứ không phải màu xanh.
Nếu sử dụng global scope như sau thì <p> sẽ có màu xanh
1 2 3 4 5 6 7 8 9 10 11 | <span class="token property"><span class="token variable">$myColor</span></span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token selector">h1 </span><span class="token punctuation">{</span> <span class="token property"><span class="token variable">$myColor</span></span><span class="token punctuation">:</span> green !global<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$myColor</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <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 variable">$myColor</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Mixin
Trong sass, @mixin cho phép ta tạo ra 1 đoạn code có thể được sử dụng lại.
@include cho phép ta include trực tiếp đoạn code ta đã tạo bằng **@mixin **
VD:
1 2 3 4 5 6 7 8 | <span class="token keyword">@mixin</span> <span class="token selector">important-text </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 property">font-size</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
1 2 3 4 5 | <span class="token selector">.danger </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> important-text<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Mixin có thể include mixin khác hay truyền variable vào mixin
1 2 3 4 | <span class="token keyword">@mixin</span> <span class="token selector">special-text </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> important-text<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">@mixin</span> <span class="token function">bordered</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> blue, <span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 50px<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> <span class="token variable">$width</span> solid <span class="token variable">$color</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.myArticle </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> <span class="token function">bordered</span><span class="token punctuation">(</span>blue, 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Call mixin with two values</span> <span class="token punctuation">}</span> <span class="token selector">.myNotes </span><span class="token punctuation">{</span> <span class="token keyword">@include</span> <span class="token function">bordered</span><span class="token punctuation">(</span>red, 2px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Call mixin with two values</span> <span class="token punctuation">}</span> |
Extend
@extend cho phép ta chia sẻ 1 set style css với các phần tử khác.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token selector">.button-basic </span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 30px<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">font-size</span><span class="token punctuation">:</span> 16px<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 punctuation">}</span> <span class="token selector">.button-report </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> .button-basic<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button-submit </span><span class="token punctuation">{</span> <span class="token keyword">@extend</span> .button-basic<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Khi biên dịch ra css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token selector">.button-basic, .button-report, .button-submit</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 30px<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">font-size</span><span class="token punctuation">:</span> 16px<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 punctuation">}</span> <span class="token selector">.button-report</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.button-submit</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Import
@import cho phép ta include nội dung của 1 file vào file khác
Css import gọi HTTP request mỗi lần import, còn sass @import thực hiện import trong CSS, cải thiện performance.
VD:
style.scss
1 2 3 4 5 6 7 8 | <span class="token selector">html, body, ul, ol </span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
main.scss
1 2 3 4 5 6 7 8 | <span class="token keyword">@import</span> <span class="token string">"reset"</span><span class="token punctuation">;</span> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Helvetica, sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<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> |
Sass partial
Mặc định Sass sẽ biên dịch tất cả các file qua css. Tuy nhiên khi import trong sass thì ta không cần biên dịch qua css. Vậy nên ta có thể sử dụng partial để skip việc biên dịch qua css. Cú pháp là ta thêm “_” trước tên file.
VD:
_style.scss (sẽ không bị biên dịch qua css)
1 2 3 4 | <span class="token property"><span class="token variable">$myPink</span></span><span class="token punctuation">:</span> #EE82EE<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$myBlue</span></span><span class="token punctuation">:</span> #4169E1<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$myGreen</span></span><span class="token punctuation">:</span> #8FBC8F<span class="token punctuation">;</span> |
Kết luận
Khi làm việc trong dự án thì việc phải viết sass là điều không tránh khỏi bởi hiện nay sass rất phổ biến.
Sass có nhiều tiện ích về cú pháp cho phép ta giảm thời gian code hơn. Cám ơn đã theo dõi bài viết.