SCSS
SCSS Cơ Bản
Cũng như HTML, để viết CSS một cách nhanh chóng và quản lý tốt hơn, AGL áp dụng ngôn ngữ SCSS.
SCSS là một ngôn ngữ tiền xử lý được biên dịch thành CSS, với phần mở rộng file có dạng .scss.
SCSS cho phép thêm các tính năng bổ sung vào CSS, bao gồm các biến, nesting,…
Các tính năng bổ sung có thể giúp việc viết SCSS đơn giản và nhanh chóng hơn nhiều so với CSS tiêu chuẩn.
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%;
}
Quy Tắc Bổ Sung
Khi sử dụng SASS/SCSS các bạn chú ý những điểm sau:
- Hạn chế cấp độ càng ít càng tốt (tốt nhất là 2 cấp độ Cha -> Con).
- Đối với các mối quan hệ trong Class, các bạn lưu ý phải viết ra đầy đủ tên các Class luôn và không dùng dấu “&”, ngoài yếu tố này các bạn có thể sử dụng dấu “&” tùy ý. Ví dụ:
<div class="c-box">
<h2 class="c-box__title">title title title title title</h2>
<p class="c-box__desc">desc desc desc desc desc desc desc desc</p>
</div>
/* Bad */
.c-box {
padding: 20px;
&__title{
color: blue;
}
&__desc{
color: gray;
}
}
/* Good */
.c-box {
padding: 20px;
.c-box__title{
color: blue;
}
.c-box__desc{
color: gray;
}
}
- Không lạm dụng
mixinvì có một vài trường hợp không tối ưu được code khi build ra CSS thuần. - Không gọi thẳng tên thẻ (tag html) trong SCSS mà phải gọi tên class/id (tức là mọi thẻ cần CSS trong html đều phải đặt class/id)
/* Bad */
.c-box {
padding: 20px;
h2 {
color: blue;
}
}
/* Good */
.c-box {
padding: 20px;
.c-box__title {
color: blue;
}
}
- Khi sử dụng một thuộc tính nào đó, phải đảm bảo thuộc tính đó được áp dụng phổ biến trên toàn bộ trình duyệt (cross-browser), nếu không thỏa điều kiện này thì phải hỏi ý kiến khách.