Sử dụng SASS, SCSS với nguyên lý cơ bản nhất

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 SCSS

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 ($) 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 :, sau dấu : là giá trị nào đó gán vào biết và kết thúc bởi ;. Ví dụ sau khai báo biến $red, giá trị biến đó giữ là mã màu #dd0000

$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

.box {
  color: #dd0000;
  border: 1px solid #dd0000; }

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 CSS có thể thiết lập đến các phần tử con bằng cách viết Selector 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 {} 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ụ CSS định dạng phần tử ul có lớp .nav, sau đó định dạng các phần tử con li chứa bên trong nó. Bạn thấy ký hiệu ul.nav li cho biết li thiết lập là phần tử con của ul.nav, nếu vậy trong SCSS chỉ việc đặt li bên trong ul.nav để có kết quả tương tự, viết như phần bên phải

CSS
ul.nav {
  list-style: none;
}

ul.nav li {
  padding: 10px;
}

SCSS
ul.nav {
  list-style: none; 
  li {
    padding: 10px;
  }
}

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

Ký hiệu & 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à & ở phía trước, ví dụ:

SCSS
ul {
    padding: 20px;
    &.title {
        color: red;
        &.titlesmall {
            font-size: 60%;
        }
    }
}

CSS
ul {
  padding: 20px;}

ul.title {
    color: red; }

ul.title.titlesmall {
      font-size: 60%; }

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

Như đã biết các pseudo selectors là định nghĩa một phần của phần tử, trong CSS đã biết có các pseudo selectors cho class như: a:link, a:visited, div:hover, a:active, div:first-child ... (Xem chi tiết tại pseudo selector)

Trong SASS SCSS thì để khai báo các pseudo selector này dùng đến ký hiệu &:selector_class, ví dụ sau gạch chân đường link khi hover chuột, khi active

SCSS
a {
  text-decoration: none;
  &:hover, &:active {
    text-decoration: underline;
  }
}

CSS
a {
  text-decoration: none; }

a:hover, a:active {
    text-decoration: underline; }

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

SCSS
.article h1 {
    background-color: #FFAFA5;
    .home & {
        background-color: #BBFCA2;
    }
    .about {
        background-color: #A0ADF1;
    }
}

CSS
.article h1 {
    background-color: #FFAFA5; }

.home .article h1 {
    background-color: #BBFCA2; }

.article h1 .about {
    background-color: #A0ADF1; }

Một cách tiện lợi nữa đó là ký hiệu phần tử cha & đượ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 &-small tự động sinh ra phần tử .footer-small

SCSS
.footer {
  background: #b87474;
  &-middle {
    background: #ca2020;
  }
  &-small {
    background: #3d3838;
  }
}

CSS
.footer {
  background: #b87474; }

.footer-middle {
    background: #b87474; }

.footer-small {
    background: #b87474; }

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ố font: với các thuộc tính như font-size, font-family
• Tiền tố background: với các thuộc tính như background-color, background-image ...
• Tiền tố list-style: với các thuộc tính như list-style-image, list-style-style ...
• Tiền tố margin: với các thuộc tính như margin-left, margin-bottom ...
• Tiền tố padding: với các thuộc tính như padding-right, padding-top ...
• Tiền tố border: với các thuộc tính như border-left, border-width, border-color ...

Với các thuộc tính này có thể viết trong SCSS/SASS bằng cách chỉ ra tiền tố tiento: (nhớ dấu : sau tiền tố rồi đến {}), và các hậu tố bên trong {}, ví dụ:

SCSS
.box {
  border: {
    color: black;
    width: 2px;
    radius:5px;
  }
}

CSS
.box {
  border-color: black;
  border-width: 2px;
  border-radius: 5px; }

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

Trong SCSS có một phần tử lớp là .phantu1 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 @extend .phantu1;

SCSS
.box {
  border: 1px solid red;
  background: silver;
}

.quote {
  @extend .box;
  color: yellow;
}

CSS
.box, .quote {
  border: 1px solid red;
  background: silver; }

.quote {
  color: yellow; }

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 .box, lưu ý rằng khai báo như vậy thì trong mã CSS có sinh ra lớp .box, 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 @extend chứ không cần có sinh ra một lớp gốc thì sử dụng kỹ thuật giữ chỗ placeholder bằng cách khai báo sử dụng ký hiệu %, xem ví dụ sau:

SCSS
%box {
  border: 1px solid red;
  background: silver;
}

.quote {
  @extend %box;
  color: yellow;
}

CSS
.quote {
  border: 1px solid red;
  background: silver; }

.quote {
  color: yellow; }