SCSS variable

• Các khai báo và sử dụng biến trong SCSS khá giống với các các ngôn ngữ khác, cũng phân chia biến toàn cục (global) và biến địa phương, cách sử dụng cũng tương tự.

Cách khai báo biến SCSS

$name : value;

• $name tên biến, đặt bất tên bất kỳ không khoảng trắng.
• value giá trị của biến, là các giá trị CSS hoặc công thức.
• Cẩn thận cú pháp sử dụng dấu 2 chấm : không phải dấu bằng =.

Ví dụ

$a: 10;
$b: 10px;
$c: 20px + $b;
$d: 80%;
$color: #f00;
$bdr: 1px solid #ccc;
$fontFamily: Arial, sans-serif;

SCSS - biến toàn cục

• Là biến có phạm vi tác động tới tất cả các vị trí trong file SCSS.

Ví dụ

$a: 20px;
$b: $a + 30px;
#main {
    margin-bottom: $a;
}
#footer {
    padding: $a;
}

#main {
    margin-bottom: 20px;
}
#footer {
    padding: 20px;
}

• Ta thấy biến $a được sử dụng bên ngoài và cả bên trong các thành phần khác.

SCSS - biến địa phương

• Là biến có phạm vi tác động chỉ bên trong phạm vi được khai báo.

Ví dụ

#main {
    $a: 20px;
     margin-bottom: $a;
}
#footer {
    padding: $a;
}

Màn hình cmd báo lỗi.

• Ta thấy biến $a chỉ được sử dụng bên trong thành phần được khai báo là #main.