Cú pháp SASS và cú pháp SCSS

Bài viết này giải thích về cú pháp SASS và cú pháp SCSS.

Chúng tôi sẽ giải thích chi tiết các điểm khác biệt giữa cú pháp SASS và SCSS, đồng thời cung cấp các ví dụ cụ thể để bạn hiểu rõ hơn.

YouTube Video

Cú pháp SASS và cú pháp SCSS

SASS là một ngôn ngữ định kiểu được thiết kế để mở rộng khả năng của CSS. SASS có hai cú pháp. Đó là cú pháp SASS và cú pháp SCSS.

Tổng quan về SASS và SCSS

Cú pháp SASS

Cú pháp của SASS được viết như sau:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Cú pháp dựa vào thụt lề và không sử dụng ngoặc nhọn {} hoặc dấu chấm phẩy ;.
• Nó được thiết kế để viết mã ngắn gọn, dễ đọc.
• Đuôi mở rộng tệp là .sass.

Cú pháp SCSS

Cú pháp của SCSS được viết như sau:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Cú pháp giống với CSS, sử dụng ngoặc nhọn {} và dấu chấm phẩy ;.
• Tương thích cao với mã CSS hiện có, cho phép chuyển đổi trực tiếp CSS sang tệp SCSS.
• Đuôi mở rộng tệp là .scss.

Sự khác biệt chính giữa SASS và SCSS

Tiêu chí lựa chọn

Việc sử dụng cú pháp nào phụ thuộc vào nhu cầu của dự án và nhóm.

• Khi nào chọn cú pháp SASS

  • Cú pháp SASS giúp bạn viết mã ngắn gọn và sạch sẽ.
  • Nếu toàn bộ nhóm đều quen thuộc với cú pháp SASS, đó là một lựa chọn phù hợp.

• Khi nào chọn cú pháp SCSS

  • Nếu khả năng tương thích với CSS quan trọng và nhiều thành viên nhóm quen thuộc với CSS, cú pháp SCSS sẽ phù hợp hơn.

Ưu điểm của SASS và SCSS

Sau đây là những ưu điểm chung của cả cú pháp SASS và SCSS:.

1. Sử dụng biến

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Bằng cách sử dụng biến, bạn có thể xác định một kiểu tại một nơi và tái sử dụng nó ở nhiều vị trí khác nhau. Các thay đổi thiết kế có thể được áp dụng trên toàn bộ bằng cách chỉ cần thay đổi giá trị của biến, nâng cao khả năng bảo trì.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixin cho phép bạn nhóm các kiểu hoặc mã có tiền tố của nhà cung cấp được sử dụng nhiều lần ở nhiều nơi và áp dụng chúng linh hoạt bằng cách sử dụng đối số. Điều này giúp giảm sự trùng lặp mã và cải thiện khả năng bảo trì.

3. Quy tắc lồng nhau

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Bằng cách sử dụng lồng nhau (nesting), bạn có thể viết các kiểu theo thứ bậc dựa trên cấu trúc HTML, giúp dễ dàng nhóm các quy tắc liên quan. Điều này giúp tăng khả năng đọc cũng như bảo trì mã nguồn.

4. Kế thừa

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Bằng cách sử dụng kế thừa, bạn có thể nhóm và tái sử dụng các kiểu chung. Điều này giúp giảm sự trùng lặp mã và duy trì thiết kế nhất quán.

Kết luận

Việc chọn giữa SASS và SCSS phụ thuộc vào sở thích của lập trình viên và yêu cầu dự án.

Cú pháp SASS nhấn mạnh sự đơn giản, trong khi cú pháp SCSS chú trọng đến khả năng tương thích với CSS. Cả hai cú pháp đều mạnh mẽ và có thể tăng năng suất làm việc với CSS lên đáng kể.

Chọn phương án phù hợp nhất cho dự án sẽ giúp quản lý stylesheet hiệu quả hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video