SASS/SCSS là gì | Tính năng của SASS/SCSS

 SASS/SCSS là gì?,những tính năng của SASS/SCSS là một trong chủ đề mà tôi muốn đề cập với bạn trong bài viết hôm nay,đây là những kiến thức mà tôi đã tích lũy được trong những kinh nghiệm làm việc của mình.

CSS Preprocessor là gì?

CSS Preprocessor là một ngôn ngữ tiền xử lý css, nó có công cụ sẽ giúp các bạn việt một cú pháp css gần nhau với ngôn ngữ lập trình  rồi compile nó ra CSS thuần.

Hiện nay có rất nhiều CSS Preprocessor như SASS,LESS,Stylus nhưng đặc dụng và thường xuyên mình sử dụng SASS nên mình chỉ giới thiệu cho các bạn về SASS.

SASS là gì?

SASS(Syntactically Awesonme StyleSheets) là một CSS Preprocessor giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn,với SASS bạn có thể viết CSS theo thứ tự rõ ràng hơn,dễ quản lý các biến đã định nghĩa sẵn,giảm dung lượng tập tin css

SCCSS là gì?

SASS được thiết kế bởi các lập trình Ruby, dể viết theo kiểu SASS sẽ khó hiểu nên xuất hiện phiên bản SCCSS ra đời để các bạn có thể nhìn một cách dễ dàng nhất.

Tính năng của SASS/SCSS

Quy tắc xếp chồng

Ví dụ mình có một đoạn HTML như sau

 <div class="container">

    <div class="row">

        <div class="navbar col-12">

            <a class="brand">Viblo</a>

            <ul class="menu">

                <li><a href="#">Menu 1</a></li>

                <li><a href="#">Menu 2</a></li>

            </ul>

        </div>

    </div>

</div>

Giả sử bạn chỉ muốn CSS cho thẻ ul với class menu, với CSS thuần bạn viết

.navbar ul.menu {

    list-style: none;

}

Nếu bạn tiếp tục muốn CSS cho thẻ li trong thẻ ul (có class là menu) thì

.navbar ul.menu li {

    padding: 5px;

}

Nếu bạn sử dụng Nested Rule của SASS thi đoạn code như bên dưới.

.navbar {

    ul.menu {

        list-style: none;

        li {

            padding: 5px;

            a {

                text-decoration: none;

            }

        }

    }

}

Biến

Biến chứa các giá trị mà bạn có thể sử dụng nhiều lần thưc hiện trong việc sử dụng mã màu, font hãy chữ.

Để khai báo một biến trong sass bạn sử dụng biến $.

ví dụ:

$whiteColor = #fff;

.navbar {

    ul.menu {

        list-style: none;

        li {

            padding: 5px;

            a {

                text-decoration: none;

                color: $whitecolor

            }

        }

    }

}

Quy tắc Mixin

Mixin là một cơ chế khá phổ biến trong SASS. Công dụng của nó là mang nhiều thuộc tính mà bạn đã quy ước trong một mix nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết lại các thuộc tính đó (Ví dụ ở trên là color vs font-size)

@mixin colorVsFont {

    color: #fff;

    font-size: 50px;

}

.navbar {

    ul.menu {

        list-style: none;

        li {

            padding: 5px;

            a {

                text-decoration: none;

                @include colorVsFont;

            }

        }

    }

}

Bạn có thể truyền tham số trong Mixin

ví dụ:

@mixin colorVsFont($color, $fontSize) {

    color: $color;

    font-size: $fontSize;

}

.navbar {

    ul.menu {

        list-style: none;

        li {

            padding: 5px;

            a {

                text-decoration: none;

                @include colorVsFont(#000, 50px);

            }

        }

    }

}

Kế thừa.

Cách thực hiện này sẽ là khi bạn tạo một class rồi bạn extend nó vào là sử dụng được.

.title-box {

    color: #dacb46;

    text-shadow: 1px 1px 1px #1a1a1a;

    display: inline-block;

    text-transform: uppercase;

}

.navbar {

    ul.menu {

        list-style: none;

        li {

            padding: 5px;

            a {

                text-decoration: none;

                @extend .title-box;

            }

        }

    }

}

Import

Đây là cú pháp của SASS mà mình muốn giới thiệu cho các bạn biết vì nó thường xuyên sử dụng trong project.Nó khá giống cách bạn require hay include file như PHP

@import 'header';

@import 'body';

@import 'footer';