SASS và Các Cú Pháp Cơ Bản

SCSS và đị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, rgba(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: 'Arial';
   color: #ff8800;
}

Toán tử

• Toán tử so sánh: ==, !=, <, >, <=, >=
• Toán tử tính toán: +, -, *, /, %

Để sử dụng biến trong Sass, 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 đổi được đượ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, 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 1 số hàm định nghĩa chức năng thông dụng trong CSS. Có thể tra cứu danh sách đầy đủ các hàm tại đây.

Mixins

Mixins cho phép đị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 kế thừa các thuộc tính CSS của 1 selector, ngoài việc tăng tính tái sử dụng như mixins, extends còn giúp tạo ra 1 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 kết hợp tất cả các file import ra thành một file duy nhất, 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.