SASS/SCSS : CSS Preprocessor

1. Giới thiệu

Khi viết CSS theo cách bình thường, có thể bạn đã chán ngán nhiều thao tác lặp đi lặp lại rất nhạt nhẽo, và bạn mong muốn có một cái gì đó hỗ trợ bạn làm việc với CSS chuyên nghiệp hơn. Nếu như bạn muốn đưa kiến thức CSS của mình lên một tầm cao mới, làm việc chuyên nghiệp thì công cụ đầu tiên bạn cần sử dụng là SASS/SCSS - CSS Preprocessor.

2. CSS Preprocessor là gì?

CSS Preprocessors được hiểu là ngôn ngữ tiền xử lý CSS. Nó có nhiệm vụ logic hóa mã CSS sao cho gần giống với ngôn ngữ lập trình. Việc viết CSS Preprocessors mang lại một số lợi ích sau:

  • Tiết kiệm thời gian viết CSS.
  • Dễ dàng bảo trì và phát triển.
  • Có tính linh hoạt và tái sử dụng cao.
  • Các tập tin, đoạn mã CSS được tổ chức, sắp xếp một cách rõ ràng.

Có khá nhiều CSS Preprocessor như SASS, LESS, CSS-Crush, ... tuy nhiên CSS Preprocessor được sử dụng phổ biến nhất là SASS, sau đây là thông số tổng hợp từ năm 2015:

Vậy cùng nhau tìm hiểu xem SASS là gì nào.

3. SASS là gì?

SASS (Syntactically Awesome StyleSheets) là một CSS Prepocessor 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ể sử dụng biến (variables), quy tắc xếp chồng (nested rules), mixins, thừa kế (selector inheritance), hàm (functions), ... Hiểu đơn giản là mình làm style bằng SASS, rồi SASS sẽ render thành file CSS

SASS bản thân có hai kiểu viết khác nhau, một kiểu như là HAML, Pug - Sử dụng indent để phân tách các khối code , sử dụng xuống dòng để phân biệt rules , có phần mở rộng là .sass .

  • Sử dụng indent để thể hiện quy tắc xếp chồng (nested rules)
  • Không cần sử dụng ; khi kết thúc một property
  • Khai báo mixins bằng ký tự =
  • Sử dụng mixins bằng ký tự +
.abc
  .def
    display: block

Một kiểu viết khác, ra đời sau là SCSS, cú pháp tương tự như CSS, có phần mở rộng là .scss

  • Sử dụng dấu { và } để thể hiện quy tắc xếp chồng (nested rules)
  • Sử dụng ; để kết thúc một property
  • Khai báo mixins bằng directive @mixin
  • Sử dụng mixins bằng directive @include
.abc {
  .def {
     display: block;
  }
}

4. Một số tính năng cơ bản của SASS

Sử dụng biến (Variables)


Chẳng hạn trong một trang web, có rất nhiều chỗ có chung một màu, nhưng việc nhớ mã màu là điều tương đối khó. SASS cho bạn giải pháp đó là đặt tên biến cho màu đó, chỉ cần nhớ tên biến là bạn đã có thể sử dụng màu đó rồi
$mau-do: #ff0000;
$kich-thuoc: 100px;
.hinh-vuong {
    width: $kich-thuoc;
    height: $kich-thuoc;
    background-color: $mau-do;
}

Quy tắc xếp chồng (Nested Rules)

.foo{
    .bar {
        color: black;
    }
    .bar1 {
        color: white;
    }
}

Ở đây thay vì phải viết lại .foo nhiều lần, bạn chỉ cần đặt .bar.bar1 trong cùng bên trong .foo thôi

Mixin


Nếu như có nhiều class sử dụng lại có style giống nhau nhưng khác value, bạn có thể sử dụng @mixin để khai báo và sử dụng @include để tái sử dụng
$mau-do: #ff0000;
$kich-thuoc: 100px;

@mixin dong-1($color, $text) {
    color: $color;
    text-align: $text;
}

.hinh-vuong {
    width: $kich-thuoc;
    height: $kich-thuoc;
    box-shadow: 1px 1px 1px 1px $mau-do;
    .mau-chu {
        size: 14px;
        text-align: center;
        .dong-1 {
            @include dong-1($mau-do, left);
        }
    }
}

Sử dụng "&"

.foo {
  &_bar {
      property: "value .bar";
  }

  &_boop {
      property: "value .boop";
  }

  &.boo {
      property: "value .foo.boo";
  }
}

sẽ compile như sau:

.foo_bar {
  property: "value .bar";
}
.foo_boop {
  property: "value .boop";
}
.foo.boo {
  property: "value .foo.boo";
}

Sử dụng với các pseudo class và pseudo element rất tiện dụng

h1 {
 	text-align: center;
 	color: black;
 	&:hover {
 		color: #FF00F0;
 	}
 }

Kết luận


Trên đây là một số tính năng cơ bản của SASS, hi vọng các bạn sẽ hiểu được sự tiện lợi do nó mang lại.
Về cách sử dụng SASS và cũng như đọc thêm tài liệu về SASS các bạn có thể tìm kiếm thêm trên mạng hoặc vào trang chủ của SASS để nghiên cứu nhé!

Tài liệu tham khảo: https://sass-lang.com/guide