SASS/SCSS : CSS Preprocessor không thể thiếu cho Frontend Developer. ( phần I )

Sass

10

Vinh Trần viết ngày 24/04/2018

Những khái niệm đầu tiên

Nó là gì ?

Sass là viết tắt của cụm Syntactically Awesome Style Sheets ( Style Sheet có cú pháp ảo diệu , đại loại thế ) được thiết kế ra bởi Hampton Catlin và do Natalie Weizenbaum lập trình.

Sass là chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ) ,sẽ được biên dịch thành CSS. Nghĩa là, mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm 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 .

.gai-chan-dai
   height: 153cm;

sẽ được render ra css như sau:

.gai-chan-dai {
    height: 153cm
}

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

.gai-chan-dai {
    height: 153cm
}

được render ra CSS như này:

.gai-chan-dai {
    height: 153cm
}

Thì cũng không có gì khác với CSS, nhưng điểm mạnh của nó là ở quy tắc xếp chồng cùng các tính năng mạnh mẽ khác được tích hợp vào nó, mà mình sẽ đề cập đến trong phần sau.

Tại sao bạn nên sử dụng nó ?

Sass chỉ là một trong số các Preprocessor của CSS như LESS, Stylus, PostCSS. Tất nhiên mỗi Preprocessor trên đều có những cái hay riêng, nhưng mình sẽ không đề cập đến cái hay đó ở đây, trong bài viết này mình chỉ đề cập đến SASS.

Hơi dài dòng rồi, mình vào vấn đề chính, Sass có những ưu điểm chính sau :

• Tương thích với CSS
  SASS hoàn toàn tương thích với mọi phiên bản của CSS

• SASS có rất nhiều tính năng
  Các tính năng của Sass nhiều hơn bất kỳ ngôn ngữ mở rộng cho CSS nào khác .

• Trưởng thành
  Nói ngắn gọn là Sass đã qua thử thách của thời gian đề tồn tại và phát triển mạnh mẽ đến tận bây giờ ( 11 năm )

• Được công nhận và sử dụng rộng rãi .
  Năm này qua năm khác, số các công ty công nghệ có ảnh hưởng chọn Sass là phần mở rộng chính yếu cho CSS ngày càng nhiều.

• Cộng đồng rộng lớn

Hỗ trợ cho Sass là một số công ty công nghệ lớn cùng hàng ngàn lập trình viên toàn thời gian.

• Framework

Có rất nhiều framework được xây dựng bằng Sass, một trong số là Compass, Bourbon, Susy

​

Sử dụng nó như thế nào ?

Như đã đề cập đến ở trên, qua 11 năm phát triển, Sass được sử dụng trên nhiều nền tảng khác nhau. Dĩ nhiên với mỗi nền tảng là một lệnh render khác nhau, vì để đề cập đến toàn bộ cách render Sass trên các nền tảng thì khá là dài , nên trong phần này, mình chỉ đề cập đến các các sử dụng Sass nhanh nhất mà bạn không phải tốn thời gian thiết lập nhiều.

Compliler Sass bằng chương trình.

Koala // Miễn Phí , giao diện đơn giản , trực quan

Prepros // Miễn Phí nhưng có kèm quảng cáo, nhiều tính năng, có kèm live-reload ( load lại trình duyệt khi save).

Việc bạn phải làm chỉ là chọn file có phần mở rộng là .sass hoặc .scss , đặt tùy chọn bạn muốn compile file đó ra chỗ nào, có tự động compile khi save không ? cùng một số tùy chọn khác.

Làm trực tiếp bằng Codepen.

tạo một pen mới, trong pen setting, chọn Css Preprocessor là SCSS hoặc SASS.

Thử nghiệm bằng Sass Meister

Viết SCSS/SASS, Sassmeister sẽ compiler trực tiếp ra CSS ở cửa sổ bên cạnh.

Làm bằng Yeoman Webapp

nó đi kèm một số tính năng rất hữu dụng cho làm frontend:

• cho phép sử dụng các tính năng của ES2015 bằng babel
• CSS autoprefixing
• Tích hợp sẵn preview server với BrowserSync
• tự động compile Sass với libsass

Sử dụng Yeoman :

yêu cầu trước khi cài, bạn phải cài đặt:

• nodejs

Mở terminal, chạy lệnh :

npm install --global yo gulp-cli bower generator-webapp

tiếp sau đó chạy yo webapp trong terminal để tạo webapp.

sử dụng lệnh gulp serve để xem trước, watch các thay đổi để live - reload.

tức là nếu bạn tạo ra thay đổi trong các file mà webapp đang theo dõi, thì trình duyệt sẽ tự động reload lại, bạn không cần phải ấn f5 để xem các thay đổi mình vừa tạo ra.

khi làm xong , chạy gulp để buid webapp , hoặc gulp server:dist để xem webapp đã build.

ngoài ra còn có các lệnh như gulp serve:test để chạy test bằng mocha và

bower install --save <package> để cài đặt các gói ứng ụng bower.