1. Tổng quan về Sass

Sass (Syntactically Awesome Style Sheets) là một ngôn ngữ tiền xử lý CSS mạnh mẽ. Nó mở rộng khả năng của CSS bằng cách cung cấp các tính năng như biến (variables), lồng ghép quy tắc (nested rules), mixins, hàm (functions) và nhiều tính năng khác. Sass hoàn toàn tương thích với cú pháp CSS, giúp bạn viết mã ngắn gọn và dễ bảo trì hơn.

Trình duyệt web không thể hiểu trực tiếp mã Sass. Do đó, bạn cần sử dụng công cụ biên dịch để chuyển đổi mã Sass thành CSS tiêu chuẩn trước khi sử dụng trong dự án.

Cài đặt Sass qua npm

Đảm bảo máy tính đã cài đặt Node.js và npm:

//Cài đặt toàn cục
npm install -g sass

//Kiểm tra phiên bản đã cài đặt
sass --version
//Hoặc viết tắt
sass -v

Sau khi cài đặt, hãy tạo một file SCSS (ví dụ: main.scss) để bắt đầu viết mã Sass. File CSS thông thường có phần mở rộng .css, còn file Sass sử dụng .scss.

2. Biến trong Sass

Biến cho phép bạn lưu trữ các giá trị được sử dụng nhiều lần như màu sắc, kích thước font, khoảng cách... Khi cần thay đổi, bạn chỉ cần sửa một nơi duy nhất.

Cú pháp: Sử dụng ký hiệu $ để khai báo biến. Tên biến có thể chứa chữ cái, số, dấu gạch dưới và dấu gạch ngang, nhưng không được bắt đầu bằng số. Sass hỗ trợ đặt tên theo kiểu camelCase hoặc snake_case.

Sass hỗ trợ nhiều loại dữ liệu: chuỗi, số, màu sắc, boolean, danh sách và giá trị null.

//Khai báo biến
$primaryColor: #0066cc;     //Biến màu sắc
$darkText: #1a1a1a;         //Biến màu chữ
$baseFontSize: 16px;        //Biến số
$headingFont: "Segoe UI", Roboto, sans-serif;  //Biến chuỗi

//Khai báo Sass map (cấu trúc key-value)
$themeColors: (
  primary: #0066cc,
  secondary: #ff6600,
  success: #28a745,
  danger: #dc3545
);

//Sử dụng biến
body {
  font-family: $headingFont;
  font-size: $baseFontSize;
  color: $darkText;
}

//Sử dụng map-get để lấy giá trị theo key
.card {
  h2 {
    color: map-get($themeColors, primary);
  }
  .badge-success {
    background: map-get($themeColors, success);
  }
  .badge-danger {
    background: map-get($themeColors, danger);
  }
}

3. Lồng ghép quy tắc (Nesting)

Sass cho phép bạn viết CSS theo cấu trúc phân cấp giống như HTML, giúp mã dễ đọc và trực quan hơn. Tuy nhiên, cần tránh lồng quá sâu vì sẽ tạo ra CSS phức tạp và khó bảo trì.

//Cú pháp SCSS lồng ghép
.sidebar {
  width: 250px;
  background: #f5f5f5;
  
  .menu {
    list-style: none;
    padding: 10px 0;
    
    li {
      padding: 8px 15px;
      border-bottom: 1px solid #ddd;
      
      a {
        text-decoration: none;
        color: #333;
        &:hover {
          color: #0066cc;
        }
      }
    }
  }
  
  //Sử dụng & để tham chiếu đến selector cha
  & > .title {
    font-weight: bold;
    padding: 15px;
  }
  
  & + .content {
    margin-left: 260px;
  }
}

Tương đương với CSS thuần:

.sidebar {
  width: 250px;
  background: #f5f5f5;
}
.sidebar .menu {
  list-style: none;
  padding: 10px 0;
}
.sidebar .menu li {
  padding: 8px 15px;
  border-bottom: 1px solid #ddd;
}
.sidebar .menu li a {
  text-decoration: none;
  color: #333;
}
.sidebar .menu li a:hover {
  color: #0066cc;
}
.sidebar > .title {
  font-weight: bold;
  padding: 15px;
}
.sidebar + .content {
  margin-left: 260px;
}

Ghi chú quan trọng:

• > - Selector con trực tiếp (child selector)
• + - Selector anh em kề nhau (adjacent sibling)
• ~ - Selector anh em chung (general sibling)
• :hover, :nth-child() - Pseudo-class

4. Mixins (@mixin và @include)

Mixins cho phép bạn định nghĩa các khối styles có thể tái sử dụng nhiều lần. Giống như hàm trong lập trình, mixins có thể nhận tham số để tùy chỉnh đầu ra.

Mixin không có tham số

@mixin resetStyles {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  @include resetStyles;
}

Mixin có tham số và giá trị mặc định

@mixin buttonStyle($bgColor: #0066cc, $textColor: #fff) {
  display: inline-block;
  padding: 10px 20px;
  background: $bgColor;
  color: $textColor;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
  }
}

.btn-primary {
  @include buttonStyle;
}

.btn-success {
  @include buttonStyle(#28a745, #fff);
}

.btn-outline {
  @include buttonStyle(transparent, #0066cc);
  border: 1px solid #0066cc;
}

Tham số biến đổi (Variable Arguments)

@mixin flexCenter($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

.container {
  @include flexCenter;
}

.card-wrapper {
  @include flexCenter(row, space-between, stretch);
}

Ví dụ tạo box-shadow đa nền tảng

@mixin customBoxShadow($shadow...) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

.card {
  @include customBoxShadow(0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06));
}

Lưu ý: Trong Sass, dấu gạch ngang - và dấu gạch dưới _ được coi là giống nhau. Ví dụ: @mixin border-radius và @mixin border_radius là cùng một mixin.

Mixins lồng nhau

@mixin textStyle($size: 16px, $color: #333, $weight: normal) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
  
  .highlight {
    color: lighten($color, 20%);
  }
  
  .muted {
    color: rgba($color, 0.6);
  }
}

.heading {
  @include textStyle(24px, #1a1a1a, bold);
}

.paragraph {
  @include textStyle(14px, #666);
}

5. Các hàm trong Sass

Sass cung cấp nhiều hàm tích hợp sẵn để xử lý chuỗi, số, danh sách, màu sắc và các tác vụ khác.

Hàm toán học và số

Hàm	Mô tả	Ví dụ
abs($number)	Trả về giá trị tuyệt đối	abs(-20) → 20
ceil($number)	Làm tròn lên	ceil(4.2) → 5
floor($number)	Làm tròn xuống	floor(4.8) → 4
round($number)	Làm tròn theo quy tắc toán học	round(4.5) → 5
max($numbers...)	Trả về số lớn nhất	max(3, 7, 2, 9) → 9
min($numbers...)	Trả về số nhỏ nhất	min(3, 7, 2, 9) → 2
comparable($num1, $num2)	Kiểm tra hai số có cùng đơn vị	comparable(10px, 5px) → true

$width: 100px;
$padding: 15px;

.container {
  //Sử dụng hàm toán học
  width: $width;
  padding: $padding;
  margin-bottom: floor($padding * 1.5);
  border-width: ceil($width / 50);
}

Hàm xử lý Map

Hàm	Mô tả
map-get($map, $key)	Lấy giá trị theo key, trả về null nếu không tồn tại
map-has-key($map, $key)	Kiểm tra key có tồn tại không
map-keys($map)	Trả về danh sách các keys
map-values($map)	Trả về danh sách các values

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px,
  xlarge: 1200px
);

//Lấy giá trị theo key
@media (min-width: map-get($breakpoints, medium)) {
  .container {
    max-width: 720px;
  }
}

//Kiểm tra key tồn tại
@if map-has-key($breakpoints, xxlarge) {
  .container {
    max-width: map-get($breakpoints, xxlarge);
  }
}

Hàm xử lý màu sắc

$baseColor: #0066cc;

.button {
  background: $baseColor;
  
  &:hover {
    //Làm sáng màu
    background: lighten($baseColor, 10%);
  }
  
  &:active {
    //Làm tối màu
    background: darken($baseColor, 15%);
  }
}

.text-muted {
  //Tạo màu trong suốt
  color: rgba($baseColor, 0.5);
}

6. Chỉ thị @import trong Sass

Tương tự CSS, Sass hỗ trợ chỉ thị @import để nhập các file khác. Tuy nhiên, Sass thực hiện việc hợp nhất (merge) các file trong quá trình biên dịch, không tạo ra nhiều HTTP requests như CSS thuần.

Ưu điểm: Giảm số lượng requests tới server, tổ chức code tốt hơn, dễ quản lý codebase lớn.

Lưu ý: Khi import, không cần thêm phần mở rộng file. Sass sẽ tự động tìm file có đuôi .scss.

//File: _variables.scss
$primary: #0066cc;
$secondary: #6c757d;
$success: #28a745;

//File: _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

//File: styles.scss (file chính)
@import "variables";
@import "reset";

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f8f9fa;
  color: #333;
}

Để code gọn gàng hơn, bạn nên đặt tên file partial (file chia nhỏ) bắt đầu bằng dấu gạch dưới _ như _variables.scss, _mixins.scss. Khi import, chỉ cần viết tên file mà không cần dấu gạch dưới và phần mở rộng.