Hướng dẫn học Sass căn bản a-z

Bài viết này là nơi tổng kết gần 1 tháng mình học Sass. Mình muốn chia sẻ với các bạn về những gì mình học được và mong rằng bạn sẽ sử dụng kiến thức này một cách hiệu quả trong việc thiết kế cũng như lập trình Web, nhất là Web Design.

Một số điểm mình học được từ Sass + Compasss ( 1 vũ khí lợi hại khi dùng chung với Sass, kiểu như item Sangas + Yasha trong dota vậy )

Sass là gì ?

SASS là một trong những CSS Preprocessor nổi tiếng cũng giống như Less. Có quá nhiều blogger đã viết rất nhiều bài về SASS, nhưng mình vẫn muốn viết lại với những kiến thức mình có và đã tổng hợp lại. Hy vọng nó sẽ là khá đầy đủ cho những bạn nào muốn tìm hiểu về SASS và sâu hơn nữa.

Theo http://nathdesigner.com/

CSS Preprocessor là gì ?

CSS Preprocessor là ngôn ngữ kịch bản mở rộng của CSS. Chúng lấycác đoạn mã  được viết sử lý trước sau đó sẽ biên dịch ra các đoạn mã CSS thông thường. Hiện tại có thể có rất nhiều CSS Preprocessor nhưng có phỗ biến nhất trong số đó là SASS, LESS và Stylus.

Có một số lợi ích chúng ta có thể kể đến :

• Tiết kiệm thời gian
• Dễ bảo trì, phát  triển
• Sử dụng lại các đoạn mã CSS

Nãy giờ mình copy bài trên mạng đó, còn bây giờ là những gì mình chắt lọc được khi học xong quyển sách : Sass and Compass for Designers

1. Dễ bảo trì, phát triển nhờ cách quản lí, tạo khung, logic toán học ban đầu mà những lập trình viên đi sau dễ hiểu và tùy biến cao hơn.
2. Tiết kiệm thời gian là hệ quả của ưu điểm 1.
3. Tạo một “bộ xương sống” cho CSS đặc biệt dành cho Designer : Trong Sass, cho phép bạn tùy chỉnh hàng loạt màu sắc và cái này theo mình nghĩ là đặc biệt quan trọng với dân thiết kế web. Khi dùng Sass, bạn sẽ tạo ra tư duy phối màu trong đầu óc mà không cần phải dùng Photoshop hay Color Drop để bắt màu nữa. Vì trong Sass và compasss cho bạn các hàm phối màu theo độ sáng ( analog) ( lighten, darken ) hoặc phối màu bổ sung ( completent ), hoặc dùng hệ màu hsla phối 2 màu với nhau ( mixin color ) lâu dần mình nghĩ bạn sẽ chơi với các màu sắc một cách tự nhiên nhất. Tuyệt vời !
4. Bạn học được cách tối ưu hóa css, performance cho website : Thực tế cho thấy,  1 trang web chỉ nên chứa tối đa 3~4 file css, như thế sẽ thân thiện với các bộ máy tìm kiếm. Tại sao mình lại nói tối ưu hóa performance website ? Với Compass, bạn sẽ được hỗ trợ tạo tự động image sprites cho các ảnh ít thay đổi ( như logo, button, biển chỉ dẫn…) và nó xuất ra định dạng base64 giúp giảm lượng request lên server cũng như giảm khối lượng tải cho website của bạn. Ngoài ra, Compass cũng giúp các bức ảnh trên web của bạn chơi với định dạng SVG ( Vector ) để xử lý việc hiển thị trên các thiết bị HighDPI như iPhone 6, giúp bạn dễ dàng trong chuyện thiết kế các trang web Responsible Design.
5. Học xong Sass rồi thì học luôn Compasss giúp bạn nén file CSS đầu ra và trục xuất các dòng CSS không sử dụng hoặc rút gọn lại tối đa. Lại thêm 1 điểm mạnh để tối ưu hóa website.
6. Cộng đồng “bự” nhất nên dễ dàng học và HỎI.

1. Phải nắm CSS ở mức tương đối (tức là advance ) còn begineer thì chưa nên đụng tới Sass vì có thể gây một số lỗi lớn.
2. Sass không phải cái gì cao siêu mà thần thánh hóa nó quá, không nên quá chi tiết khi dùng Sass sẽ gây ra bộ khung CSS khó quản lý cho các bạn được tranfer về sau.
3. Phải build từ Server chứ không như LESS.
4. Không dành cho các dự án nhỏ. Nếu nhỏ thì xài CSS thôi, trừ khi bạn muốn thử chơi với các màu sắc trong Sass.

[icon type=”fa fa-gears”] Cài đặt Sass ?

Cái này trong quyển sách có nói đầy đủ, nếu bạn ngại tiếng anh thì có thể tham khảo tại đây Còn ko hiểu gì thì comment bên dưới, mình sẽ giải đáp.

[icon type=”fa fa-folder-open”] Cấu trúc cơ bản cho một dự án Sass

Khi bắt đầu làm việc với một dự án về Sass thì việc trước tiên cần nhất là sắp xếp một cấu trúc tốt cho dự án Sass (CSS preprocessor) sao cho hợp lý trước khi bắt đầu viết code, để có thể khai thác hết sức mạnh công nghệ mà nó mang lại. Ngoài việc sắp xếp một cấu trúc tốt thì vẫn còn cả khối việc để làm với Sass nên trong phạm vi bài viết có thể giúp bạn hiểu và nên nghĩ theo hướng tiếp cận như thế nào hơn là hướng dẫn bạn nên làm như thế nào, còn việc làm như thế nào sẽ do bạn tự định đoạt.

[icon type=”glyphicon glyphicon-leaf”] Vẽ ra kiến trúc cho dự án

Một trong những lợi ích khi sử dụng CSS preprocessor là khả năng chia code ra thành nhiều file giúp bạn dễ quản lý vào bảo trì code nhưng không ảnh hưởng nhiều đến hiệu suất của web. Nhờ có @import của Sass mà bạn có thể có bao nhiêu file tùy ý cho môi trường phát triển, và sau khi biên dịch tất cả sẽ được gom lại thành một file duy nhất.

“Multiple files in dev, a single file in prod.”
— Bruce Lee

Bắt đầu với việc chia các  thuộc tính trong CSS vào đúng các file và thư mục trong dự án. Như người ta vẫn thường nói “mọi thứ cần ở đúng nơi của nó, ở mọi nơi đều có đúng những thứ mà nó thuộc về”. Giờ bắt đầu công cuộc chia của (tất nhiên là các thuộc tính CSS).

[icon type=”glyphicon glyphicon-folder-close”] Tạo các thư mục (folder) theo chức năng

Tạo ra các thư mục chứa các file Sass là cần thiết, cũng giống như việc để các loại giấy tờ trong các ngăn kéo khác nhau để có thể tìm đúng thứ cần tìm một cách nhanh nhất.

Chúng ta nên phân loại các file Sass và đặt chúng vào các folder theo chức năng khi tạo kiến trúc cho dự án Sass.

Kiến trúc nó đại loại giống như vầy :

sass/ 
| 
|– base/ 
|   |– _reset.scss       # Reset/normalize 
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
| 
|– components/ 
|   |– _buttons.scss     # Buttons 
|   |– _carousel.scss    # Carousel 
|   |– _cover.scss       # Cover 
|   |– _dropdown.scss    # Dropdown 
|   |– _navigation.scss  # Navigation 
|   ...                  # Etc… 
| 
|– helpers/ 
|   |– _variables.scss   # Sass Variables 
|   |– _functions.scss   # Sass Functions 
|   |– _mixins.scss      # Sass Mixins 
|   |– _helpers.scss     # Class & placeholders helpers 
|   ...                  # Etc… 
| 
|– layout/ 
|   |– _grid.scss        # Grid system 
|   |– _header.scss      # Header 
|   |– _footer.scss      # Footer 
|   |– _sidebar.scss     # Sidebar 
|   |– _forms.scss       # Forms 
|   ...                  # Etc… 
| 
|– pages/ 
|   |– _home.scss        # Home specific styles 
|   |– _contact.scss     # Contact specific styles 
|   ...                  # Etc… 
| 
|– themes/ 
|   |– _theme.scss       # Default theme 
|   |– _admin.scss       # Admin theme 
|   ...                  # Etc… 
| 
|– vendors/ 
|   |– _bootstrap.scss   # Bootstrap 
|   |– _jquery-ui.scss   # jQuery UI 
|   ...                  # Etc… 
| 
| 
`– main.scss             # primary Sass file

Chỉ để một file Sass duy nhất dùng biên dịch sang file .css ở cấp ngoài cùng (root) : main.scss. Tấc cả các file Sass khác đều được chia vào các thư mục phù hợp theo chức năng và được đặt tên bắt đầu bằng dấu gạch dưới (_) để bộ biên dịch của Sass biết rằng đây là các file .scss thành phần (partial) các file này sẽ không được biên dịch thành file .css. Với vai trò là file gốc main.scss chỉ việc @importcác hết file .scss thành phần để gộp tất cả lại vào một file .css duy nhất sau khi biên dịch.

Trong file main.scss sẽ có nội dung đại loại giống như vầy :

// Sass utilities
@import "helpers/variables";
@import "helpers/functions";
@import "helpers/mixins";
@import "helpers/placeholders";
 
// Vendors and external stylesheets
@import "vendors/bootstrap";
@import "vendors/jquery-ui";
 
// Base stuff
@import "base/reset";
@import "base/typography";
 
// Layout related stylesheets
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
 
// Components and modules
@import "components/carousel";
@import "components/buttons";
@import "components/cover";
@import "components/dropdown";
 
// Page-specific stylesheets
@import "pages/home";
@import "pages/contact";
 
// Themes
@import "themes/theme";
@import "themes/admin";

“One file to rule them all,
One file to find them,
One file to bring them all,
And in the Sass way merge them.”
— J.R.R. Tolkien

> Ý nghĩa của từng thư mục :

Base

Thư mục base/ chứa tất cả những mẫu CSS có sẵn mặc định cho dự án ví dụ như file Reset.css hoặc Normalize.css (dùng để bỏ những thuộc tính định dạng mặc định do trình duyệt áp dụng cho website), hoặc các mẫu CSS để xử lý kiểu chữ (typography), vân vân và vân vân, tùy thuộc vào dự án sẽ có thêm những mẫu khác nữa.

• _reset.scss or _normalize.scss
• _typography.scss

Helpers

Thông thường là helpers/ nhiều khi đặt là utils/, nhưng đều cùng một ý nghĩa là nó chứa những tiện ích, công cụ hỗ trợ trong Sass mà chúng ta sử dụng trong cả dự án đại loại như những function hoặc mixin. Trong thư mục này còn có thể chứa thêm file_variables.scss (cũng có thể đặt là _config.scss) tất cả các biến toàn cục dùng cho dự án sẽ cho hết vào file này ví dụ như kiểu chữ, font chữ, các biến màu sắc, vân vân và vân vân,…

• _variables.scss
• _mixins.scss
• _functions.scss
• _placeholders.scss (thường đặt là _helpers.scss)

Layout

Trong này chứa các file có nhiệm vụ định dạng bố cục cho những phần chính của trang web như header, footer,…Và một file ứng với một cục, chứ không nên định dạng bố cục cho nhiều phần trong một file, có thể đặt tên là layout/ hoặc partials/ . Ngoài ra có thể đưa file_grid vào đây nếu bạn đang làm một dự án sử dụng grid system để định dạng bố cục cho trang web.

• _grid.scss
• _header.scss
• _footer.scss
• _sidebar.scss
• _forms.scss

Components

Những định dạng cho các thành phần trang web sẽ được đặt trong thư mục components/ (đôi khi đặt là modules/). Nếu layout/ dành cho những thành phần chính của trang web thì components/ dành cho những thành phần nhỏ hơn. Trong này chưa tất cả những thứ như slider, loader, widget, vân vân và vân vân. Có rất nhiều thể loại thành phần trong components/ khi mà trang web của bạn được chia nhỏ theo chức năng.

• _media.scss
• _carousel.scss
• _thumbnails.scss

Pages

Trường hợp website của bạn có những trang không dùng chung một template, và mỗi trang có một kiểu thiết kế khác nhau thì lúc đó bạn nên đặt code .scss định dạng cho những trang đó vào đây thư mục pages/. Ví dụ trang home và trang contact sử dụng thiết kế khác nhau về bố cục và màu sắc và không dùng những code .scss định dạng chung, thì nên có 2 file _home.scss và _contact.scss trong thư mục pages/ để giải quyết vấn đề.

• _home.scss
• _contact.scss

Tuỳ vào quá trình triển khai, những file trong thư mục này có thể có hoặc không được gom lại chung với những file thành phần khác khi biên dịch. Đều do bạn quyết định thôi, thông thường mình chỉ gom những thành phần trong thư mục này khi có trang  cần sử dụng chúng. Ví dụ trang home có bố cục khác với những trang khác cần phải biên dịch thêm 200 dòng CSS nữa, trong khi những trang khác không cần những dòng CSS đó, nên chỉ cần biên dịch riềng file _home.scss cho trang home và chỉ đưa vào khi load trang home.

Themes

Nếu dự án sử dụng nhiều theme cùng lúc thì nên có thư mục này themes/. Để hết mọi thứ liên quan tới theme hoặc định dạng cho những trang đặc biệt vào đây.

• _theme.scss
• _admin.scss

Vendors

Cuối cùng, thông thường dự án nào cũng xài ít nhất một thành phần nào đó của bên thứ ba, và đây là nơi dành cho các thành phần của bên thứ ba, thư mục vendors/, trong phạm vi bài viết bên thứ ba có thể là các framework hoặc thư viện mở rộng như Bootstrap,jQueryUI, Fancy Carousel Slider jQuery Powered,… Hãy đặt hết những thành phần không phải code do team của dự án viết vào đây, mục đích là khi có vấn đề gì đó thì bạn có thể xác định được vấn đề không phải do code của team, mà là do code đến từ bên thứ ba, khi đó Google sẽ giúp bạn giải quyết vấn đề.

• bootstrap.scss
• jquery-ui.scss
• select2.scss

Mặc khác, cũng nên có một thư mục vendors-extensions/ chứa những phần mở rộng từ thư viện hoặc framework của bên thứ ba do chúng ta viết thêm. Ví dụ bạn muốn mở rộng Bootstrap, bạn sẽ có một file là _bootstrap.scss, khi đó mọi thứ bạn mở rộng hoặc thêm vào sẽ đặt hết trong file này và tránh được việc chỉnh sửa file gốc thư viện hoặc framework.

Xong, vậy là bạn đã có kiến trúc cơ bản cho một dự án Sass. Tùy theo từng dự án mà sẽ bạn có kiến trúc khác nhau phù hợp với dự án. Trong tình huống cây thư mục trong dự án của bạn có nhiều cấp thì theo mình không nên phân cấp quá sâu cây thư mục. Phần lớn trong các dự án Sass, cây thư mục một cấp là đẹp và đủ, bạn có thể dễ dàng sắp xếp và quản lý mà không cần làm cho nó quá phức tạp. Nhưng nếu dự án đòi hỏi phải có cây thư mục nhiều cấp thì cứ vô tư mà theo thôi.

Nhiều file thì tốt !

Một câu hỏi mọi người vẫn hay hỏi là “Chia ra bao nhiêu file thì đủ ?”, và câu trả lời là: không bao giờ là quá nhiều file khi chúng ta chia ra để có thể sắp xếp và quản lý code dễ hơn, điều đó giúp ích nhiều hơn là có hại. Nếu trong dự án chúng ta cảm  giác nên chia ra nhiều file cho dễ quản lý, thì cứ vô tư mà chia thôi. Như Chris Coyier đã từng viết trong bài hướng dẫn về Sass của mình Sass Style Guide.

“Break into as many small files as makes sense.”
— Chris Coyier

Tuy nhiên đối với một Component (module) thì không nên chia nhỏ một file ra  thành nhiều file, trừ khi việc đó tốt cho dự án. Thông thường sẽ có một file cho một module không hơn không kém, được đặt tên rõ ràng thể hiện được chức năng của module, làm vậy sẽ dễ dàng khi tìm kiếm code, bạn chỉ việc dùng “go to” (nếu xài Sumlime Text).

Túm lại :

Những hướng dẫn trong bài đều dựa trên kinh nghiệm làm việc và ý kiến cá nhân, nên chỉ mang tính chất tham khảo. Phần quyết định cuối cùng vẫn thuộc về bạn, tùy vào tình huống dự án, kinh nghiệm bản thân mà bạn có thể tiếp cận theo cách khác hoặc kết hợp cách trong bài và cách của bạn.

Nếu có một nguyên tắc vàng nào đó khi dựng kiến trúc cho dự án Sass, thì đơn giản đó là : Hãy làm cho mọi thứ có ý nghĩa và dễ hiểu.

Khi làm việc với một team Front-ends, hãy chắc rằng anh em trong team đều cảm thấy dễ chịu với kiến trúc dự án đã tạo ra, hoặc viết các hướng dẫn để mọi người đều biết và hiểu mình đang làm gì.

P/s : Nếu các bạn có thắc mắc hoặc tìm ra những chỗ sai trên bài viết, làm ơn hãy “chê” mình càng chi tiết càng tốt. Như vậy mình và bạn đọc sẽ ngày càng tốt hơn 🙂

[icon type=”glyphicon glyphicon-bookmark”] Tài Liệu Tham Khảo

Trên mạng có rất nhiều bài blog nói về Sass, nhưng để chính thống và tập trung trong 1 bài toán cụ thể, mình khuyên bạn nên đọc và học cuốn : Sass and Compass for Designers vì :

1. Nó giúp bạn đi từ dễ tới khó.
2. Demo của nó là 1 layout web nho nhỏ nhưng được bố cục rất chuyên nghiệp.
3. Rất nhiều tài liệu, công cụ, bài toán được trình bày cụ thể và thực tế trong quyển sách.
4. Designer nên đọc để đi tới cuốn tiếp theo : Responsible Web Design : HTML5 & CSS3.

[button style=”btn-danger btn-sm” icon=”glyphicon glyphicon-share-alt” align=”left” type=”link” target=”false” title=”Xem Sách Tại Đây” link=”https://www.packtpub.com/web-development/sass-and-compass-designers”]

Hoặc

Nhận cuốn sách miễn phí bằng cách đăng kí Email và comment bên dưới.

Thân chào,

AnhThien8.

<span style="text-decoration: underline;"><em>Link tham khảo :</em></span>

http://boygiandi.com/wordpress/tim-hieu-sass/

http://nathdesigner.com/css/sass-css-preprocessor

http://thachpham.com/web-development/html-css/huong-dan-su-dung-sass-de-viet-css.html

http://www.ff-team.com/tao-cau-truc-co-ban-cho-mot-du-an-sass/