Các cú pháp cơ bản trong SASS

Như chúng ta đã thấy cơ chế giúp Sass đơn giản hóa cách viết CSS là thông qua các tính năng, các cú pháp như biến, function, kế thừa,.. Mặc dù Sass không phải là một ngôn ngữ lập trình chính thức, nó chỉ đơn giản là hỗ trợ những cú pháp viết code dưới dạng script giúp cho việc compile code của Sass sang code CSS

Trong bài này chúng ta sẽ cũng tìm hiểu về các cú pháp và biểu thức sử dụng trong Sass.

Sass Expressions

Trong Sass hỗ trợ các biểu thức như phép điều kiện, các phép toán học như cộng, trừ, nhân, chia,...

$text-size: 15px;

#normal-text {
    font-size: $text-size;
}

#large-text {
    font-size: $text-size * 1.5;
}

Nhìn vào ví dụ trên chúng ta đang sử dụng phép nhân trong code Sass

Sass functions

Trong Sass hỗ trợ rất nhiều function có sẵn giúp chúng ta sử dụng dễ ràng và tiện dụng hơn như darken(), rgb(), min(), max(),.. vv

Dưới đây là một ví dụ về việc sử dụng function trong Sass giúp các bạn hiểu hơn về khái niệm này

$purple: #6A67CE;
$darkpurple: darken($purple, 15%);

.purple-btn 
{
    text-align: center;
    background-color: $purple;
} 
.purple-btn:hover
{
    background-color: $darkpurple;
}

Tổng kết

Bài viết này với mục đích giúp các bạn có cái nhìn ban đầu về các khái niệm cơ bản trong Sass như các phép toán, function và biến. Ở những bài tiếp theo chúng ta sẽ đi vào chi tiết hơn.