SCSS là gì? Làm sao để viết CSS bằng SASS/SCSS chuẩn nhất?

Có một điều chắc chắn rằng là mỗi lập trình viên đều phải thực hiện những công việc liên quan đến CSS. Nếu bạn đang muốn hướng bản thân theo công việc của một lập trình viên và bạn đang muốn tìm hiểu SCSS là gì? Bài viết dưới đây sẽ giúp bạn tìm hiểu kỹ hơn về SCSS.

Thế nào là SCSS?

SCSS hay còn gọi là CSS preprocessor, đây là một trong những chương trình tiền xử lý của CSS. Nó sẽ giúp bạn viết CSS dựa vào những ngôn ngữ lập trình có cấu trúc rõ ràng, rành mạch để dễ dàng phát triển cũng như việc code được bảo trì dễ dàng hơn. Ngoài ra, SCSS còn sở hữu khá nhiều thư viện với mục đích hỗ trợ và cho phép các bạn viết code CSS đơn giản và dễ dàng hơn.

File SCSS là gì đang là thắc mắc của nhiều người

File SCSS là gì đang là thắc mắc của nhiều người

Có rất nhiều loại SCSS và trong số đó thường là: SASS, Stylus hay LESS. Hiểu một cách đơn giản hơn SCSS chính là phiên bản nâng cấp của SASS với mục đích giúp ta viết CSS dễ dàng hơn.

SCSS là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS. Việc này đã cho phép bạn viết CSS nhanh hơn với những cấu trúc rõ ràng, rành mạch. SCSS có khả năng giúp bạn tiết kiệm được thời gian viết CSS cũng như việc bảo trì và phát triển CSS.

Những hữu ích khi sử dụng SCSS thay cho CSS

  • Việc thay đổi cách viết theo hướng từ dạng thuộc lòng những thuộc tính cũng như các giá trị sang cách viết có tính logic hơn. Như thế sẽ đảm bảo cho các DEV cảm thấy mới mẻ hơn trong việc lập trình.

Tỷ lệ lập trình viên sử dụng SCSS ngày càng tăng

Tỷ lệ lập trình viên sử dụng SCSS ngày càng tăng

  • Source code sẽ trở nên gọn gàng hơn bao giờ hết. Vì chúng đã sử dụng cách viết biến, hàm, vòng lặp và câu điều kiện,…
  • Việc tái sử dụng source code sẽ trở nên tốt hơn khi dùng SCSS thay cho CSS.
  • Hàm bằng biến, hàm,… tái sử dụng code đã khiến khả năng kiểm soát source code tốt hơn so với việc viết code bằng CSS thông thường.
  • Các DEV sẽ cảm thấy viết code trở nên dễ dàng hơn và thoải mái hơn khi sử dụng SCSS.
  • SCSS tương thích với mọi phiên bản của CSS
  • Những tính năng của SAS thường nhiều hơn những ngôn ngữ mở rộng nào cho CSS.
  • SASS phát triển mạnh mẽ như ngày hôm nay đã phải trải qua rất nhiều thử thách về thời gian để có thể trường tồn và phát triển.
  • Hầu hết, những công ty về công nghệ đều chứng minh tầm ảnh hưởng và đều lựa chọn SASS là thành phần mở rộng chủ yếu cho CSS.
  • Những công ty công nghệ lớn và hàng ngàn nhân viên DEV đều là cộng đồng hỗ trợ cho SASS.
  • Hiện nay, đã có rất nhiều framework được xây dựng bằng SASS. Một trong số đó gồm có: Compass, Bourbon, Susy,..,

Bạn đọc tham khảo thêm: Automation testing là gì -Ứng dụng của nó như thế nào?

Cách viết CSS bằng SASS/SCSS một cách chuẩn nhất

Khi đã nắm rõ được thế nào là SCSS, bạn cũng cần phải nắm được cách viết CSS bằng SASS/SCSS một cách chuẩn nhất. Cùng tham khảo nhé!

Thực hiện nguyên tắc xếp chồng (Nested Rule)

Ví dụ: Dưới đây là 1 đoạn HTML

<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>

Bây giờ bạn muốn viết CSS cho thẻ Ul với Class menu với CSS thuần. Bạn có thể viết:

.Navbar Ul.Menu {

    List-Style: None;

}

Bạn muốn tiếp tục CSS cho thẻ li trong thẻ Ul (có class là menu) thì sẽ thành như sau:

.Navbar Ul.Menu Li {

    Padding: 5px;

}

Sau đó, bạn muốn CSS tiếp tục cho thẻ a trong thẻ li,… thì bạn có thể viết lặp đi lặp lại tên tag (hoặc class và id).

Thực hiện Nested Rule của SASS sinh ra thì có thể đảm bảo cho việc bạn thực hiện cách trên sẽ đơn giản hơn.

Cú pháp thực hiện: 

.Navbar {

    Ul.Menu {

        List-Style: None;

        Li {

            Padding: 5px;

            A {

                Text-Decoration: None;

            }

        }

    }

}

Nếu đoạn SASS trên được compile ra CSS thuần: 

.Navbar Ul.Menu {

    List-Style: None;

}

.Navbar Ul.Menu Li {

    Padding: 5px;

}

.Navbar Ul.Menu Li a {

    Text-Decoration: None;

}

Quy tắc xếp chồng này thường được sử dụng rất nhiều khi đưa vào 1 project viết CSS bằng SASS.

Với biến (Variable)

Thường thì biến sẽ chứa những giá trị mà bạn có thể sử dụng được nhiều lần. Ví dụ: mã màu, font, kiểu chữ,…

Để có thể khai báo được một biến trong SASS chúng ta thường sẽ viết dấu $ cùng với tên biến.

Ví dụ: 

$whiteColor = #fff;

.navbar {

    ul.menu {

        list-style: none;

        li {

            padding: 6px;

            a {

                text-decoration: none;

                color: $whitecolor

            }

        }

    }

}

Với quy tắc Mixin

Mixin là một trong những cơ chế tương đối phổ biến trong SASS, công dụng của Mixin thường mang nhiều thuộc tính và được quy ước trong một mix nào đó và sẽ @include vào một thành phần bất kỳ nào đó mà bạn cần phải viết lại những thuộc tính đó.

Công cụ Koala dùng để compile CSS Preprocessor

Công cụ Koala dùng để compile CSS Preprocessor

Extends – Kế thừa

Đây là cách thực hiện mà cho phép bạn định nghĩa ra 1 class. Sau đó sử dụng tag nào thì dùng @extend nó là hoàn thành.

.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

Import chính là một cú pháp của SASS, nó khá giống cách bạn require hay include file vào các file khác trong PHP.

Ví dụ bạn có 1 trang index, bao gồm header, body, footer.  Nếu bạn CSS cho các phần trên vào 1 style.css thì với SASS bạn có thể làm như sau:

  1. Tạo 1 file _header.scss để CSS riêng cho header.
  2. Tạo 1 file _body.scss dành riêng cho body
  3. 1 file _footer.scss dành cho footer

Lưu ý: cần phải có dấu _ trước tên file được import

Ở file style.css ta chỉ cần @import 3 file trên là OK

_header.scss

#header{ // code sass here }

_body.scss

#body{ // code sass here }

_footer.scss

#footer { // code sass here }

style.scss

@import ‘header’;

@import ‘body’;

@import ‘footer’;

// code sass here

Khi bạn đang import sẽ không cần tên đuôi file (.scss), lưu ý đường dẫn của file bạn import.

Trình compile SASS

Hiện nay, có khá nhiều trình biên dịch SASS sang CSS thuần. Dưới đây là 2 công cụ có thể trình biên dịch SASS sang CSS thuần:

  • Koala: Đây chính là một trong những phần mềm được dùng để compile SCSS như SASS, LESS,… Bạn có thể dùng nó khi viết SASS.
  • Laravel Mix: Nếu bạn đang cần thực hiện công việc với project Laravel thì không cần phần mềm thứ 3. Vì nó tích hợp với một công cụ gọi là Laravel Mix với nhiều tính năng và có thể compile các SCSS sang CSS thuần chính là một trong những tính năng được đánh giá là tốt của nó.

So sánh cú pháp cơ bản của SASS và SCSS

SASS SCSS
Quy tắc xếp chồng Chỉ sử dụng dạng thụt lề – Intended Sử dụng cặp dấu {}
Kết thúc Property Không sử dụng “;” – Semi:colon Sử dụng “;” để kết thúc 
Khai báo Mixins Sử dụng = Sử dụng @Mixins
Sử dụng Mixins Sử dụng + Sử dụng @include

Trên đây là 1 số thông tin SCSS là gì cùng một số cú pháp dùng để viết CSS bằng SASS/SCSS. Qua bài viết trên chắc hẳn bạn đã hiểu SCSS là gì rồi đúng không. Hy vọng, bài viết trên sẽ giúp ích cho bạn trên con đường lập trình của mình.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *