Vài Phút Tìm Hiểu Sass

Như tiêu đề mình sẽ giới thiệu cho các anh em một bài viết ngắn gọn nhất về SASS – một CSS Prepocessor mà các anh em cần phải biết nếu đã xác định trở thành một Front-end Developer.

Vậy SASS là gì?

SASS là một CSS Preprocessor giúp các anh em viết CSS nhanh và có cấu trúc tổ chức file rõ ràng hơn. Thông qua một số đặc tính đặc biệt như: khai báo variable, quy tắc nesting, partials và mixins, SASS sẽ giúp việc code CSS bớt nhàm chán và thêm một tầm cao mới 😹😹😹

Lý do cần phải biết SASS

• Muốn được lương cao và dễ pass phỏng vấn hơn vì hầu như mình đều thấy các công ty đều yêu cầu phải biết SASS nếu đã xác định là Front-end Developer
• Dễ dàng quản lý và tổ chức file cho CSS Source.
• Kết hợp được với nhiều công cụ khác như autoprefixer để tự động thêm tiền tố chẳng hạn, khi mà code CSS thông dụng bình thường các anh em phải tốn thời gian viết đi viết lại các tiền tố này.

Chung quy lại khi các anh em đã biết SASS rồi thì chắc cũng sẽ không muốn dành thời gian ngồi viết CSS bình thường nữa đâu. Tin mình đi 😹😹😹.

Một vài quy tắc của SASS:

Khai báo biến (variable):

Một trong những điểm thú vị của SASS mà CSS không có đó là khả năng khai báo biến. Để hiểu rõ hơn mình sẽ có ví dụ như sau:

padding-top: 0;
margin-right: 0;

Ở đây mình có 2 thuộc tính trên cùng chung giá trị 0, do đó để tối giản code và dễ quản lý hơn mình sẽ viết lại như sau:

$zero: 0;
padding-top: $zero; 
margin-right: $zero;

Quy tắc nesting:

Quy tắc nesting hay còn gọi là quy tắc xếp chồng. Ok để làm rõ dưới đây sẽ là một minh hoạ nho nhỏ để các anh em hiểu thêm về quy tắc nesting trong SASS

Ở đây mình sẽ phải gọi 2 lần tag ul trong việc style CSS cho một tag con li .

ul {display: block;}
ul li {display: inline-block; margin: 5px 0;}

Để gọn gàn hơn và dễ maintain sau khi các CSS của mình trở nên to hơn, mình sẽ simplify nó lại như sau:

ul {
  display: block;

  li {
    display: inline-block;
    margin: 5px 0;
  }
}

Ở đây mình sẽ đặt CSS cho tag li nằm trong CSS của tag ul và ta gọi đó là quy tắc xếp chồng. Cool chưa 😽😽😽

Cơ chế import (partials):

Partial dịch sang tiếng việt có nghĩa là từng phần, do đó cơ chế này sẽ giúp các anh em phân cấu trúc CSS của mình thành nhiều file khác nhau và dùng function @import để kết nối các file này lại.

Giả sử mình có hai là file app.scss, _partial.scss ở cùng một cấp thư mục, bây giờ mình muốn import file partial.scss từ file app.scss thì đầu tiên mình cần phải bỏ dấu _ trước tên của file partial (đây là quy định của SASS) và code của file app.scss của mình sẽ có dạng như sau:

@import 'partial';

Quy tắc mixins:

Ở đây mình thường dùng mixins cho những việc mình cần phải viết một lần mà sử dụng lại ở nhiều nơi điển hình ở đây đó là viết media query chẳng hạn.

Chúng ta sẽ cùng làm rõ qua ví dụ minh hoạ bên dưới:

$breakpoint-1: 425px;
@mixin breakpoint-small() {
  @media screen and (max-width: $breakpoint-1){
    @content
  }
}

Ở đây mình sẽ viết một mixin có tên là breakpoint-small() và bên trong mixin này mình đã khai báo một media query chứa biến @content

Giả sử mình muốn khai báo một CSS width: 10% cho giao diện mobile chẳng hạn.
Thì chúng ta sẽ làm như sau:

@include breakpoint-small(){
  w-10-s {width: 10%;} 
}

Chúng ta sẽ dùng @include để gọi mixins và w-10-s {width: 10%;} sẽ là nội dụng sẽ được hiển thị ở biến @content

Kết luận:

Cơ bản là SASS chỉ có nhiêu đây thôi, nhưng bên cạnh nó còn vài cái mình không liệt kê ví dụ như @extend chẳng hạn vì bản thân mình chưa có dùng nên không thể viết được 😂

Các anh em có thể xem thêm về SASS trên website chính của nó nhé:

https://sass-lang.com/guide

Nhưng mình nghĩ với nhiêu đây thôi cũng đã đủ để cho các anh em làm việc rồi.

Để hiểu rõ thêm các anh em có thể xem cách mình sử dụng SASS như thế nào trong library mình đang contribute nhé.

Mọi thắc mắc vui lòng để lại bình luận bên dưới, viết tới đây cũng dài lắm rồi

Thân chào và quyết thắng, hẹn gặp lại vào một bài viết không xa 😂😂😂