Trần Thị Thu Hiền SASS - Syntactically Awesome Style Sheets là một mở rộng của CSS, giúp việc tổ chức và phát triển code CSS một cách gần gũi như những ngôn ngữ lập trình cơ bản. Nó cho phép sử dụng các biến, hàm và một số syntax khác như: nested rules, mixins, inline imports,... SASS hỗ trợ 2 loại cú pháp là Sass và SCSS với những ưu điểm và nhược điểm nhất định tùy thuộc vào dự án mà bạn đang phát triển. Trong nội dung bài viết này tôi sẽ sử dụng SCSS để giới thiệu những tính năng của SASS.
Nội dung bài viết

Giới thiệu

Sass - Syntactically Awesome Style Sheets là một mở rộng của CSS, giúp việc tổ chức và phát triển code CSS một cách gần gũi như những ngôn ngữ lập trình cơ bản. Nó cho phép sử dụng các biến, hàm và một số syntax khác như: nested rules, mixins, inline imports,... Sass hỗ trợ 2 loại cú pháp SASS và SCSS với những ưu điểm và nhược điểm nhất định tùy thuộc vào dự án mà bạn đang phát triển. Trong nội dung bài viết này tôi sẽ trình bày bằng SCSS vì nó có cú pháp gần gũi với CSS hơn.

Định nghĩa biến

SCSS cho phép định nghĩa 1 biến theo cú pháp:

 $<variable-name>: <data>

variable-name: tên biến

data : giá trị của biến

Sass hỗ trợ 8 kiểu dữ liệu:

  • Kiểu số: số nguyên, số thực, px (1.5; 27; 16px)
  • Kiểu chuỗi: có thể đặt trong dấu nháy đơn, nháy kép hoặc không ("abc", 'xyz', mno)
  • Màu sắc: blue, #ff8800, rgbs(255, 0, 0, 0.5)
  • Booleans: true, false
  • Nulls: null
  • Danh sách các giá trị được phân cách bởi khoảng trắng hoặc dấu phẩy
  • Hàm phụ thuộc

Ví dụ:

$main-color: #ff8800;
$main-font:  'Arial';

h1.title
{
   font:  $main-font;
   color: $main-color;
}

Khi chuyển sang CSS

h1.title
{
   font:  #ff8800;
   color: 'Arial';
}

Toán tử

Toán tử so sánh: ==, !=, <, >, <=, >=

Toán tử tính toán: +, -, *, /, %

Để sử dụng biến trong Sass, bạn có thể sử dụng #{} để thêm biến vào phép tính như một toán hạng. 

Ví dụ:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

Sau khi chuyển thành, ta được CSS như sau:

p {
  font: 12px/30px; 
}

Quy tắc lồng nhau

Khi viết HTML, bạn có thể nhận thấy rằng nó có 1 hệ thống phân cấp rõ ràng và trực quan. Với SASS chúng ta có thể đặt CSS cho các một đối tượng được nằm bên trong đối tượng cha của nó.

Ví dụ:

#main div {
  background-color: #ff8800;
  width: 100%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

sẽ được chuyển thành

#main div {
  background-color: #ff8800;
  width: 100%; 
}

 #main div .redbox {
    background-color: #ff0000;
    color: #000000; 
}

Khi sử dụng quy tắc lồng nhau, bạn có thể chỉ ra đối tượng parent của selector hiện tại bằng cách sử dụng ký hiệu: &. Ví dụ:

#main {
  color: black;
  p {
    font-weight: bold;
    &:hover { color: red; }
  }
}

Sau khi chuyển đổi thì & sẽ được thay thế bởi selector bên ngoài.

#main {
  color: black; 
}

#main p {
  font-weight: bold; 
}

#main p:hover {
  color: red; 
}

Function

Sass cung cấp một số hàm định nghĩa một số chức năng thông dụng trong CSS. Bạn có thể tra cứu danh sách đầy đủ các hàm tại đây.

Mixins

Mixins cho phép bạn có thể định nghĩa 1 style và sử dụng lại nhiều lần trong suốt stylesheet.

Kế thừa với extends

Extends cho phép bạn kế thừa các thuộc tính CSS của một selector, ngoài việc tăng tính tái sử dụng như mixins, extends còn giúp tạo ra một kết nối hợp lý giữa các class một cách cụ thể hơn trong HTML .

Tích hợp thêm file .scss với inline imports

Sass hỗ trợ CSS @import nhưng khác với CSS3, Sass sẽ kết hợp tất cả các file import ra thành một file duy nhất, điều này giúp hạn chế số lượng HTTP request đến server. Ngoài ra, các biến và mixins được định nghĩa trong những file được import đều có thể sử dụng trong file chính.

THẢO LUẬN
Tôi luôn ước rằng máy tính của mình dễ sử dụng như điện thoại của mình, điều ước đó đã thành hiện thực khi tôi không biết làm sao để sử dụng điện thoại của mình nữa. Bjarne Stroustrup
ĐÓNG