Hướng dẫn scss syntax - cú pháp scss

Cú pháp viết SCSS

Cú pháp viết SCSS được thiết kế lại từ SASS, hoàn toàn dựa theo cấu trúc của CSS, nhưng được cải tiến linh hoạt hơn.
Xem một vài ví dụ mẫu sau đây sẽ giúp bạn hình dung phần nào về cấu trúc SCSS.

SCSSCSS

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
    tag-con-1 {
        thuộc-tính: giá-trị;
        thuộc-tính: giá-trị;
    }
    tag-con-2 {
        thuộc-tính: giá-trị;
        thuộc-tính: giá-trị;
    }
}

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

Xem một vài ví dụ mẫu sau đây sẽ giúp bạn hình dung thêm phần nào về cấu trúc SCSS.

Ví dụ về SCSS syntax

SCSSCSS

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

Xem một vài ví dụ mẫu sau đây sẽ giúp bạn hình dung thêm phần nào về cấu trúc SCSS.

Hướng dẫn học SCSS, nội dung bài học đơn giản, khoa học giúp bạn cài đặt, tự động thực thi file CSS chỉ với thao tác save, giúp bạn làm quen với các nội dung của SCSS một cách nhanh chóng và dễ hiểu nhất.

SCSS là gì? - giúp bạn hiểu được SCSS có thể làm gì.
Biên dịch SCSS sang CSS - hướng dẫn cài đặt từ con số 0.
SCSS auto compile - hướng dẫn cài đặt tự động biên dịch SCSS sang CSS.
Cú pháp viết SCSS - hướng dẫn cách viết cấu trúc.
SCSS - biến [variable] - khai báo và xử lý biến.
SCSS - toán tử [oparator] - tính toán.
SCSS - Nesting - cách viết phân cấp.
SCSS - @extend - kế thừa thuộc tính.
SCSS - @mixin & @include - khai báo và kế thừa kết hợp đối số.
SCSS - Placeholders - khá giống @mixin, tuy nhiên sẽ gom các thành phần có cùng Placeholders lại với nhau.
SCSS - @function - hướng dẫn tạo và gọi hàm.
SCSS - câu lệnh @if @else - hướng dẫn cách viết câu lệnh if.
SCSS - vòng lặp @for - hướng dẫn cách viết vòng lặp for.
SCSS - vòng lặp @while - hướng dẫn cách viết vòng lặp while.
SCSS - vòng lặp @each - hướng dẫn cách viết vòng lặp each.
SCSS - @import - kết hợp các file SCSS.

Bắt đầu học SCSS thôi

Khi viết code Sass với cú pháp SCSS hãy bắt đấu viết những gì mong muốn như từng viết CSS, trong quá trình đó ta sẽ tìm hiểu những tính năng mở rộng áp dụng vào các khối code

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

9SCSS hãy bắt đấu viết những gì mong muốn như từng viết CSS, trong quá trình đó ta sẽ tìm hiểu những tính năng mở rộng áp dụng vào các khối code

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

Các biến trong SCSS

Cú pháp khai báo biến:

$tenbien: giatri;

Biến khai báo bắt đầu bằng ký hiệu dollar [

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

0] và nối tiếp là các ký tự tên biến, kết thúc tên biến là ký hiệu

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

1, sau dấu

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

1 là giá trị nào đó gán vào biết và kết thúc bởi

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

3. Ví dụ sau khai báo biến

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

4, giá trị biến đó giữ là mã màu

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

$red: #dd0000;

Sử dụng biến

Khi nào muốn sử dụng giá trị của biến, trong code SCSS chỉ việc gọi lại tên biến, tại vị trí gọi đó tên biến sẽ thay thế bởi giá trị của biến. Ví dụ:

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

Kết quả CSS sinh ra

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

Khi sử dụng biến để viết SCSS, chúng ta có thể nhanh chóng thay đổi thuộc tính của rất nhiều phần tử CSS có sử dụng đến giá trị biến

Nguyên lý lồng nhau trong SCSS [Nesting]

Như đã biết trong

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

6 có thể thiết lập đến các phần tử con bằng cách viết

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

7 phù hợp, trong SCSS có thể viết theo cách đúng như vậy, ngoài ra có thể đặt phần tử con bên trong khối

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

8 phần tử cha, nó cũng sinh ra CSS theo mối quan hệ cha con phù hợp, việc đó chính là sự lồng nhau [Nesting

Ví dụ

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

6 định dạng phần tử

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

0 có lớp

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

1, sau đó định dạng các phần tử con

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

2 chứa bên trong nó. Bạn thấy ký hiệu

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

3 cho biết

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

2 thiết lập là phần tử con của

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

5, nếu vậy trong

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

9 chỉ việc đặt

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

2 bên trong

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

5 để có kết quả tương tự, viết như phần bên phải

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

Phần tử con cấp 1 của phần tử cha, ký hiệu &

Ký hiệu

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

9 có nghĩa là phần tử cha. Để khai báo phần tử con cấp 1 sử dụng ký hiệu và
.main { margin: 0 auto; width: 600px; .section { padding: 20px; } .info { background-color: #ccc; } }
9 ở phía trước, ví dụ: Để khai báo phần tử con cấp 1 sử dụng ký hiệu và

.main {
  margin: 0 auto;
  width: 600px;
  .section {
    padding: 20px;
  }
  .info {
    background-color: #ccc;
  }
}

9 ở phía trước, ví dụ:

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

Ký hiệu & áp dụng tương tự cho

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

Như đã biết các

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

1 là định nghĩa một phần của phần tử, trong

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

6 đã biết có các

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

1 cho class như:

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

.main {
  margin: 0 auto;
  width: 600px;
}
.main .section {
  padding: 20px; 
}
.main .info {
  background-color: #ccc; 
}

9 ... [Xem chi tiết tại pseudo selector]

Trong

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

0 thì để khai báo các

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

1 này dùng đến ký hiệu

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

2, ví dụ sau gạch chân đường link khi hover chuột, khi active

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

Một cách áp dụng lựa chọn phần tử cha & nữa như sau: bổ xung thêm tính chất cho loại phần tử cha lồng vào trong phần tử con

tag-cha {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-1 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}
tag-cha tag-con-2 {
    thuộc-tính: giá-trị;
    thuộc-tính: giá-trị;
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

Một cách tiện lợi nữa đó là ký hiệu phần tử cha

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

3 được dùng như là một thành phần tên của phần tử con. Ví dụ sau ký hiệu

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

4 tự động sinh ra phần tử

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

Lồng nhau về thuộc tính CSS

Nguyên lý lồng nhau ở trên cũng áp dụng cho nhiều thuộc tính có cùng tiền tố, trong CSS có rất nhiều thuộc tính mà tiền tố giống nhau ví dụ vài tiền tố như:

Tiền tố

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

6: với các thuộc tính như

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

Tiền tố

body {
  font:{
    family: Arial, sans-serif;
    size: 16px;
  }
}

9: với các thuộc tính như

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

1 ...

Tiền tố

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

2: với các thuộc tính như

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

4 ...

Tiền tố

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

5: với các thuộc tính như

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

7 ...

Tiền tố

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

8: với các thuộc tính như

body {
  font-family: Arial, sans-serif;
  font-size: 16px; 
}

$red: #dd0000;

0 ...

Tiền tố

$red: #dd0000;

1: với các thuộc tính như

$red: #dd0000;

$red: #dd0000;

$red: #dd0000;

4 ...

Với các thuộc tính này có thể viết trong

$red: #dd0000;

5 bằng cách chỉ ra tiền tố

$red: #dd0000;

6 [nhớ dấu

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

1 sau tiền tố rồi đến

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

8], và các hậu tố bên trong

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

8, ví dụ:

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

Sử dụng lại mã SCSS với @extend

Trong SCSS có một phần tử lớp là

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

0 thì có thể áp tất cả các thuộc tính của phần tử đó vào phần tử khác bằng cú pháp

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

Giữ chỗ placeholder và sử dụng lại với @extend

Ở ví dụ trên có sử dụng lại thuộc tính khai báo trong phần tử lớp

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

2, lưu ý rằng khai báo như vậy thì trong mã

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

6 có sinh ra lớp

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

2, trong nhiều trường hợp chỉ muốn khai báo các thuộc tính và sử dụng lại với

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

5 chứ không cần có sinh ra một lớp gốc thì sử dụng kỹ thuật giữ chỗ

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

6 bằng cách khai báo sử dụng ký hiệu

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

7, xem ví dụ sau:

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

tag {
    họ-thuộc-tính: {
        tên-thuộc-tính: giá-trị;
        tên-thuộc-tính: giá-trị;
    }
}

Mã

tag {
    họ-tên-thuộc-tính: giá-trị;
    họ-tên-thuộc-tính: giá-trị;
}

6 không có sinh ra một phần tử lớp

$red: #dd0000;

.box {
  color: $red;              //Gán thuộc tính bằng giá trị từ biến $red
  border: 1px solid $red;   //Gán thuộc tính bằng giá trị từ biến $red
}

2 nữa

Cú pháp viết SCSS

Ví dụ về SCSS syntax

Các biến trong SCSS

Nguyên lý lồng nhau trong SCSS [Nesting]

Lồng nhau về thuộc tính CSS

Sử dụng lại mã SCSS với @extend

Giữ chỗ placeholder và sử dụng lại với @extend

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề