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

Trong phạm vi của bài này, chúng ta sẽ tìm hiểu về những cú pháp trong SASS từ đó thấy được những điểm tốt hơn so với CSS truyền thống.

Kiểu File Sass

Sass cung cấp 2 định dạng file là .scss và .sass như chúng ta có đề cập đến ở bài giới thiệu Sass. Scss được giới thiệu từ Version 3 và có cú pháp giống với CSS. Tuy nhiên nó không ngắn gọn bằng Sass.

Bạn có thể chuyển file Sass sang file Scss bằng lệnh sass-convert command như sau

sass-convert sass-style.sass scss-style.scss

Và ngược lại chúng ta cũng có thể chuyển file Scss sang file Sass bằng lệnh sass-convert command

SCSS Syntax

Cú pháp cho Scss là giống với CSS truyền thống, và đây cũng là cú pháp phổ biến của Sass. Chính vì vậy việc học Sass sẽ trở nên dễ ràng hơn nếu các bạn đã có kiến thức về CSS rồi.

Scss cũng cung cấp các tính năng như biến, các phép toán, functions, kế thừa,... etc. Bây giờ chúng ta sẽ tập trung vào những cú pháp quan trọng trong Scss mà CSS truyền thống không có.

Comments trong SCSS

Cách comment của Scss giống với Javascript, nó hỗ trợ cả comment một dòng và comment trên nhiều dòng

// Hello
// This is Suntech's Sass tutorial

/*  
    This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/

.suntech-bg
{
    background-color:pink;
}

Nếu compile code Scss ở trên sang CSS chúng ta được như thế này

/*  
    This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/
.suntech-bg
{
    background-color:pink;
}

Nested trong SCSS

Chúng ta có đoạn code HTML như sau

<div id="sidebar">
    <ul>
        <li>Khóa học</li>
        <li>Blog</li>
        <li>Fqa</li>
        <li>Test</li>
        <li>Series</li>
    </ul>
</div>

Cách viết CSS truyền thống

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

Cách viết SCSS

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    }
}