Lession 2: Biến (variables) trong Scss

Chào mừng các bạn đến với Lession 2 của Series Scss của WolfActive tụi mình. Ở Lession này mình sẽ nói về variable trong Scss. Về việc biến là gì thì chắc là các bạn không lạ lẫm nữa nhỉ, Bởi bất kì trong những ngôn ngữ nào các bạn học, lập trình cũng đều có biến. Vậy giờ chúng ta cùng tìm hiểu chúng trong Scss nhé.

1/ Biến trong SCSS

Như các bạn cũng biết khi chúng ta sử dụng biến trong lập trình. Chúng ta có thể sử dụng biến để tái xử dụng nhiều lần trong code, mà khi cần thiết thay đổi giá trị cũng sẽ dễ dàng hơn rất nhiều. Điển hình trong lập trình web, thì color là các bạn sử dụng khá nhiều để tạo điểm nhấn trong trang web này,…

Cú pháp khai báo biến cụ thể như sau “$ + tên variable: giá trị“.

Một số ví dụ về cách khai báo:

$text-color: #222;
$dark-color:#333;
$bg-color:$dark-color;
$text-font:"Courier New";
$text-family: Arial,Verdana;
$container-width:1280px;
$container-height:100vh; 
body{
  color:$text-color;
  font-family:$text-family;
  width:$container-width;
  height:$container-height;
  background:$bg-color;
}

Lúc này khi compile ra Css, chúng ta sẽ được đoạn code sau:

body{
  color:#222;
  font-family:Arial,Verdana;
  width:1280px;
  height:100vh;
  background:#333;
}

2/ Vậy khi nào thì nên sử dụng variable?

Chúng ta chỉ sử dụng khi  bạn sử dụng một giá trị đó nhiều lần thì các bạn hãy cùng đặt nó vào một biến. Ví dụ như nãy mình nói như color làm màu chủ đạo tạo điểm nhấn cho website, thì các bạn nên đặt vào một biến. Để khi các bạn có nhu cầu thay đổi bố cục, màu sắc của trang web thì các bạn cũng tiện xử lí và chỉnh sửa hơn.

Lợi ích khi dùng biến:

• Khai báo variable ở một nơi và tái sử dụng nhiều lần trong code
• Có thể sửa đổi và linh hoạt hơn; bạn có thể điều chỉnh các giá trị để thay đổi thiết kế nếu có yêu cầu thay đổi.
• Giúp cho code của bạn dễ đọc, dễ sử dụng hơn khi các bạn đặt tên giống với thuộc tính bạn muốn truyền vào. Ví dụ: $color sử dụng cho các thuộc tính css về màu như color; background,…

Tổng kết

Như vậy ở lession 2 này chúng ta được kiến thức về những gì? Chúng ta đã tìm hiểu được cách khai báo, cách sử dụng biến trong Scss, biết được các lợi ích và khi nào thì sử dụng variable cho hợp lí. Ở bài kế, lession 3, chúng ta sẽ cùng nhau tìm hiểu về một chủ đề là partial. Tức là chia phần (chia file) cho scss cho hợp lệ. Cảm ơn các bạn đã theo dõi. Mọi thông tin thắc mắc các bạn liên hệ về fanpage của tụi mình nhé https://www.facebook.com/Wolfactiveweb.design.SEO