SCSS
Tổng quan
CSS Preprocessors (ngôn ngữ tiền xử lý CSS) là một ngôn ngữ kịch bản mở rộng của CSS, có công dụng giúp bạn viết các cú pháp CSS giống như là một ngôn ngữ lập trình rồi biên dịch (compile) nó thành CSS thuần. Hiện nay, có rất nhiều CSS Preprocessor như SASS, SCSS, LESS, Stylus, PostCSS...
SASS/SCSS là một CSS preprocessor, giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Bản chất của SASS và SCSS là giống nhau, chỉ khác nhau ở cách viết.
SASS (Syntactically Awesome StyleSheets) sử dụng cú pháp giống như Ruby, có phần mở rộng là .sass, sử dụng indent (thụt đầu dòng) để phân tách các khối code, sử dụng xuống dòng để phân biệt các declaration, cách viết CSS như vậy không 'gần gũi' với CSS thuần nên việc hiểu và đọc code SASS gặp khó khăn.
.c-title
color: #fff
font-size: 50px
Đến năm 2010, SASS phiên bản 3.0 được phát hành, nó giới thiệu một cú pháp mới (bản nâng cấp) gọi là SCSS (Sassy CSS), có ph ần mở rộng là .scss. Cú pháp SCSS thân thiện hơn với CSS, giúp chúng ta viết CSS một cách đơn giản và dễ hiểu hơn.
.c-box {
padding: 20px;
.c-box__title {
color: #fff;
font-size: 50px;
}
}
Hiện nay, AGL cũng đang sử dụng SCSS cho các dự án của mình.
Vì sao sử dụng SCSS
- SCSS có cú pháp tương tự với CSS nên dễ học, dễ hiểu, dễ áp dụng...
- SCSS cung cấp tính năng nesting, giúp việc viết code gọn gàng và nhanh chóng hơn nhiều so với CSS tiêu chuẩn.
- SCSS có thể hỗ trợ mọi tính năng có sẵn trong CSS và SASS.
- SCSS cho phép tái sử dụng code nhờ vào các tính năng như biến, mixin, extend... giúp các developer tiết kiệm nhiều thời gian trong phát triển, sửa chữa, bảo trì...
- Tương thích được với mọi phiên bản CSS.
Các tính năng cơ bản của SCSS
1. Variables (Biến)
Hãy coi biến như một cách để lưu trữ thông tin mà bạn muốn sử dụng lại trong toàn bộ stylesheet.
Bạn có thể lưu trữ các thông tin như màu sắc, font chữ, hoặc bất kỳ giá trị CSS nào mà bạn nghĩ rằng bạn muốn sử dụng lại.
SCSS sử dụng ký hiệu $ để tạo biến. Dưới đây là một ví dụ:
/* Scss */
$font-stack: Helvetica, san-serif;
$primary-color: #333;
body{
font: 100% $font-stack;
color: $primary-color;
}
/* Css */
body{
font: 100% Helvetica, sans-serif;
color: #333;
}
Khi SCSS được xử lý, nó sẽ lấy các biến mà chúng ta định nghĩa cho $font-stack và $primary-color, và tạo ra CSS thông thường với các giá trị biến của chúng được gán trong CSS.
Điều này có thể vô cùng hữu ích khi làm việc với màu sắc thương hiệu và giữ cho chúng nhất quán trên toàn bộ trang web.
2. Nesting (Lồng nhau)
Khi viết HTML, bạn có thể nhận thấy nó có một cấu trúc phân cấp lồng nhau rõ ràng. Tuy nhiên, CSS không có điều đó.
SCSS cho phép bạn lồng các bộ chọn CSS theo cách tương tự với cấu trúc lồng nhau trong HTML. Tuy nhiên, hãy nhớ rằng lồng quá nhiều các quy tắc có thể dẫn đến CSS quá mức phức tạp và khó bảo trì, điều này được coi là một việc không tốt.
Dưới đây là một ví dụ về các style cho thanh điều hướng (navigation) của một trang web:
/* Scss */
nav{
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
display: inline-block;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
/* Css */
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
}
nav a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
Bạn sẽ nhận thấy rằng các bộ chọn ul, li và a được lồng bên trong bộ chọn nav.
Điều này là một cách tuyệt vời để tổ chức CSS của bạn và làm cho nó dễ đọc hơn.
3. Modules
Bạn không cần phải viết toàn bộ mã SCSS trong một tệp duy nhất. Bạn có thể chia nhỏ mã SCSS thành các tệp riêng biệt và sử dụng quy tắc @use để nạp các tệp SCSS khác như một module.
Điều này cho phép bạn sử dụng các biến, mixin và funtion được định nghĩa trong các tệp SCSS đó bằng cách sử dụng namespace dựa trên tên tệp.
/* Scss */
/*_base.scss*/
$font-stack: Helvetica, sana-serif;
$primary-color: #333;
body{
font: 100% $font-stack;
color: $primary-color;
}
/*styles.scss*/
@use 'base';
.inverse{
background-color: base.$primary-color;
color: white;
}
/* Css */
.box{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Chúng ta đã sử dụng @use 'base'; trong tệp styles.scss.
Khi bạn sử dụng một tệp, bạn không cần phải bao gồm phần mở rộng tệp. SCSS tự động hiểu điều này và xử lý cho bạn.
4. Mixins
Một số điều trong CSS có thể hơi phiền phức để viết, đặc biệt là với CSS3 và nhiều prefix tồn tại (-webkit, -moz, -ms, -o).
Mixin cho phép bạn nhóm các khai báo CSS mà bạn muốn sử dụng lại trong toàn bộ trang web của bạn.
Bạn thậm chí có thể truyền các giá trị vào để làm cho mixin của bạn linh hoạt hơn.
Dưới đây là một ví dụ về việc sử dụng mixin cho thuộc tính transform.
/* Scss */
@mixin transform($property){
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box{
@include transform(rotate(30deg));
}
/* Css */
.box{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Để tạo một mixin, bạn sử dụng chỉ thị @mixin và đặt tên cho nó. Trong ví dụ trên, chúng ta đã đặt tên mixin là transform.
Chúng ta cũng sử dụng biến $property trong ngoặc đơn để có thể truyền vào một giá trị bất kỳ.
Sau khi tạo mixin, bạn có thể sử dụng nó như một khai báo CSS bằng cách bắt đầu với @include, tiếp theo là tên của mixin.
5. Extend/Inheritance (Mở rộng/Kế thừa)
Đây là một trong những tính năng hữu ích nhất của SCSS. Sử dụng @extend cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ selector này sang selector khác. Điều này giúp giữ cho mã SCSS của bạn ngắn gọn và tránh việc lặp lại.
Trong ví dụ sau, chúng ta sẽ tạo ra một loạt các thông báo error, warning và success, sử dụng một tính năng khác đi đôi với @extend, đó là các class placeholder.
Class placeholder là một loại class đặc biệt chỉ được in ra khi nó được kế thừa, và giúp giữ cho CSS sau khi biên dịch gọn gàng và sạch sẽ.
/* Scss */
/*This css will print because %message-shared is extended. */
%message-shared{
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
/*This css won't print because %equal-heights is never extended. */
%equal-heights{
display: flex;
flex-wrap: wrap;
}
.message{
@extend %message-shared;
}
.success{
@extend %message-shared;
border-color: green;
}
.error{
@extend %message-shared;
border-color: red;
}
.warning{
@extend %message-shared;
border-color: yellow;
}
/*Css*/
/*This css will print because %message-shared is extended. */
.message, .success, .error, .warning{
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success{
border-color: green;
}
.error{
border-color: red;
}
.warning{
border-color: yellow;
}
Mã trên cho phép .message, .success, .error, .warning hoạt động giống như %message-shared. Điều này có nghĩa là bất kỳ nơi nào %message-shared xuất hiện, .message, .success, .error, .warning cũng sẽ xuất hiện.
Sự kỳ diệu xảy ra trong CSS được tạo ra, trong đó mỗi class này sẽ có các thuộc tính CSS giống như %message-shared. Điều này giúp bạn tránh việc phải viết nhiều tên lớp trên các phần tử HTML.
Bạn có thể kế thừa hầu hết các selector CSS đơn giản cùng với các lớp placeholder trong SCSS, nhưng sử dụng placeholder là cách dễ nhất để đảm bảo bạn không kế thừa một class được lồng trong một nơi khác trong stylesheet của bạn, điều này có thể dẫn đến việc chọn các selector không đúng ý muốn trong CSS của bạn.
Lưu ý rằng CSS trong %equal-heights không được tạo ra, vì %equal-heights chưa được sử dụng.
6. Operators
Việc thực hiện phép tính trong CSS bằng SCSS rất hữu ích. SCSS cung cấp một số toán tử toán học tiêu chuẩn như +, -, *, /, %.
Chúng giúp bạn tính toán các giá trị trong CSS một cách dễ dàng.
/*Scss*/
.container{
width: 100%;
}
.article[role="main"]{
float: left;
width: 600px / 960px * 100%;
}
.aside[role="complementary"]{
float: right;
width: 300px / 960px * 100%;
}
/*Css*/
.container{
width: 100%;
}
.article[role="main"]{
float: left;
width: 62.5%;
}
.aside[role="complementary"]{
float: right;
width: 31.25%;
}