SASS-SCSS

Trần Đức Lĩnh

SASS viết tắt của (Syntactically Awesome StyleSheets), nó giúp viết CSS nhanh hơn, cấu trúc rõ ràng hơn, quản lý và bảo trì code sau này dễ hơn. Có thể nén tập tin CSS để tiết kiệm dung lượng.

Trong khi đó SCSS được thiết kế bởi các lập trình viên Ruby, nó thừa hưởng các cú pháp giống với Ruby.

SCSS là phiên bản nâng cấp của SASS giúp viết CSS dễ dàng hơn, dễ hiểu hơn.

Biến (Variables).

  • strings
  • numbers
  • colors
  • booleans
  • lists
  • nulls

  • Cú pháp.
$variablename: value;

Interpolation.

  • Cú pháp.
$variablename: "error";

.class-#{$variablename} {
    // Code ...
}

/* .class-variablename {
    // Code ...
} */

// #{$variable}

Phạm vi của biến (Variable Scope).

Phạm vi của biến sẽ được xác định ở mức phạm vi lòng bên trong chứa nó.

  • Code SCSS
$myColor: red;

.block_1 {
    $myColor: blue;
    background: $myColor;
}

.block_2 {
    background: $myColor;
}
  • Chuyển đổi CSS
.block_1 {
    background: blue;
}

.block_2 {
    background: red;
}

Sử dụng !global.

Khi sử dụng !global cho tên biến, các thay đổi sau đó đều ghi đè.

Nên thận trọng khi sử dụng chúng.

  • Cú pháp.
$variablename: value !global;
  • Code SCSS
$myColor: red;

.block_1 {
    $myColor: blue;
    background: $myColor !global;
}

.block_2 {
    background: $myColor;
}
  • Chuyển đổi CSS
.block_1 {
    background: blue;
}

.block_2 {
    background: blue;
}

Sử dụng !default

Sử dụng cho một giá trị mặc định của biến, giá trị này sẽ được áp dụng khi chưa có thuộc tính được định nghĩa trước đó.

  • Cú pháp.
$variablename: value !default;

Có 2 trường hợp như sau.

Tạo 2 file và @import lòng vào file chủ đích. (main.scss - var.scss).

  • Code SCSS
// var.scss
$message-color: blue !default;
  • Code SCSS
// main.scss
@import 'var.scss';

$message-color: green;
p.message {
    color: $message-color;
}
  • Chuyển đổi CSS

Theo như code phía trên sẽ là màu green bởi vì biến cùng tên ghi đè vào giá trị trước đó.

p.message {
  color: green;
}
  • Code SCSS
// var.scss
$message-color: blue !default;
  • Code SCSS
// main.scss
@import 'var.scss';

$message-color: green !default;
p.message {
    color: $message-color;
}
  • Chuyển đổi CSS

Giá trị cho trước là màu green, thế nhưng !default được gọi vào nhằm chèn ép giá trị hiện tại, vì thế sẽ là màu blue.

p.message {
  color: blue;
}

Quy tắc lồng nhau.

Tương tự như cấu trúc DOM bên trong HTML.

  • Code HTML
<nav>
    <ol>
        <li></li>
        <a></a>
    </ol>
</nav>
  • Code SCSS
nav{
    ol { 
        // Code ...
    }
    li{
        // Code ...
    }
    a {
        // Code ...
    }
}
  • Chuyển đổi CSS
nav ol {
    /* Code ... */
}
nav li {
    /* Code ... */
}
nav a {
    /* Code ... */
}

Thuộc tính lồng nhau.

Thuộc tính lồng nhau được áp dụng với các tính chất tương đồng như font hoặc text.

  • Code SCSS
font: {
    family: Helvetica, sans-serif;
    size: 1rem;
}
text: {
    align: center;
    transform: lowercase;
}
  • Chuyển đổi CSS
font-family: Helvetica, sans-serif;
font-size: 1rem;

text-align: center;
text-transform: lowercase;

@mixin - @include

Tương tự như function, có thể có tham số hoặc không.

Dùng @mixin <name> để tạo và dùng @include <name> để gọi chúng ra để thực thi.

  • Code SCSS
@mixin mixName ($color_1, $color_2) {
    body {
        background: linear-gradient(to right, $color_1, $color_2);
    }
}

@include mixName (#00b7ff, #a890fe);
  • Chuyển đổi CSS
body {
    background: linear-gradient(to right, #00b7ff, #a890fe);
}

@mixin default.

Tham số mặc định sẽ được định nghĩa sẵn bên trong tham số, nếu không khai báo, hiển nhiên tham số mặc định sẽ được truyền vào.

  • Code SCSS
@mixin transition($elem: all) {
  transition: $elem .3s ease;
}

.box {
  @include transition;
}
  • Chuyển đổi CSS
.box { transition: all .3s ease; }

@extend

Quy tắc kế thừa, @extend sẽ thừa hưởng những gì đã có trước đó của một class nào đó.

  • Cú pháp.
@extend <.class-name>;
  • Code SCSS
.animal {
    background: red;
}
.ladybird {
    @extend .animal;
    color: white;
}
  • Chuyển đổi CSS
.animal, .ladybird {
  background: red;
}

.ladybird {
  color: white;
}

Placehoder (%).

Khác với @extend một chút, khai báo ngược và chỉ định thành phần nào muốn chứa các thuộc tính đã khai báo trước đó, có tính chất gôm các thuộc tính giống nhau thành một.

Sự khác biệt lớn nhất là placehoder không sử dụng đối số để truyền vào

Giống với việc 1 tên class được gọi nhiều lần trong các thẻ của HTML.

  • Cú pháp
%<name-class>{
    // Code ...
}

.tag-name {
    @extend %<name-class> {
    
    }
}
  • Code SCSS
%block {
    margin: 0 auto;
    display: block;
}

ul {
    @extend %block;
}

div {
    @extend %block;
}
  • Chuyển đổi CSS
ul, div {
  margin: 0 auto;
  display: block;
}

Loop

@each

Sử dụng vòng lặp để duyệt mảng.

  • Code SCSS
$buttonConfig: 'one' 90px, 'two' 66px, 'three' 100px;

@each $tuple in $buttonConfig {
    .div-#{nth($tuple, 1)} {
        width: nth($tuple, 2);
    }
}
  • Chuyển đổi CSS
.div-one {
  width: 90px;
}

.div-two {
  width: 66px;
}

.div-three {
  width: 100px;
}

(Còn nữa...)