Trong vai trò là một nhà thiết kế theme WordPress mới, bạn sẽ nhanh chóng thấy được các thách thức của việc duy trì các file CSS dài trong khi vẫn phải giữ cho chúng ngăn nắp, đảm bảo khả năng mở rộng và dễ đọc. Bạn cũng sẽ biết rằng nhiều nhà thiết kế và nhà phát triển front-end đề xuất việc sử dụng các ngôn ngữ tiền xử lý CSS (CSS Preprocessor) như SASS hoặc LESS. Nhưng tất cả những khái niệm này là gì và bạn phải bắt đầu từ đâu? Bài viết này là một lời giới thiệu về SASS cho các nhà thiết kế theme WordPress mới bắt đầu. Chúng tôi sẽ cho bạn biết CSS preprocessor là gì, tại sao bạn phải dùng đến nó cùng với cách cài đặt, sử dụng nó.
SASS là gì?
Ngôn ngữ CSS mà ngày nay chúng ta đang sử dụng được thiết kế để trở thành một ngôn ngữ stylesheet, quy định về cách trình bày một văn bản HTML. Tuy nhiên thế giới web ngày càng tiến hóa, các nhà thiết kế đòi hỏi một ngôn ngữ stylesheet khác cho phép họ làm nhiều thứ hơn mà ít phải tốn thời gian và công sức hơn. CSS preprocessor như SASS là những ngôn ngữ như vậy. Chúng cho phép bạn sử dụng những tính năng mà hiện chưa tồn tại trên CSS bao gồm sử dụng các biến, các phép toán, lồng ghép câu lệnh, mixins,….
Các đặc điểm của nó rất giống với PHP – vốn là một ngôn ngữ tiền xử lý cho phép thực thi các đoạn mã trên server từ đó tạo ra văn bản HTML. Tương tự như vậy, SASS thực thi các file .scss từ đó tạo ra file CSS cho trình duyệt có thể đọc được.
Kể từ phiên bản 3.8, Bảng quản trị WordPress dashboard đã được đổi qua phát triển bằng SASS. Có rất nhiều các website bán theme WordPress và các nhà phát triển đã và đang sử dụng SASS để tăng tốc độ cho quá trình sản xuất của mình.
SASS cho việc phát triển theme WordPress
Hầu hết các nhà thiết kế theme sử dụng một môi trường phát triển cục bộ (local development environment) để làm việc trên các theme của họ trước khi triển khai nó đến môi trường staging hoặc đưa lên server đang chạy web. Vì SASS là ngôn ngữ tiền xử lý, bạn sẽ cần cài đặt nó trên môi trường phát triển cục bộ (tức là PC bạn đang dùng).
Điều đầu tiên bạn cần làm là cài đặt SASS. Nó có thể được sử dụng bằng dòng lệnh, tuy nhiên trên thị trường cũng tồn tại một số ứng dụng GUI khá đẹp cho SASS. Chúng tôi khuyên bạn nên thử Koala , đây là một ứng dụng mã nguồn mở miễn phí hoạt động trên Mac, Windows và Linux.
Để phù hợp với bài viết này, bạn sẽ cần tạo một theme trắng. Việc này chỉ đơn giản là tạo một thư mục mới trong /wp-content/themes/. Bạn có thể đặt tên cho nó là ‘mytheme’ hoặc bất cứ thứ gì bạn muốn. Trong thư mục theme trắng, hãy tạo một thư mục khác và đặt tên là stylesheets.
Trong thư mục stylesheets, bạn cần tạo file style.scss bằng trình soạn thảo văn bản như Notepad.
Bây giờ bạn cần mở Koala và nhấp vào biểu tượng dấu cộng để thêm project mới. Tiếp theo, xác định vị trí thư mục theme của bạn và thêm nó vào dự án project của bạn. Bạn sẽ thấy Koala tự động tìm file SASS trong thư mục stylesheets của bạn và hiển thị nó.
Tiếp theo, nhấp chuột phải vào file SASS của bạn và chọn tùy chọn Set Output Path . Bây giờ, hãy chọn thư mục gốc của thư mục theme của bạn, ví dụ /wp-content/themes/mytheme/và nhấn enter. Koala ngay lập tức sẽ tạo ra file CSS tương ứng trong thư mục theme của bạn. Để kiểm tra lại, bạn cần mở file SASS có tên style.scss trong trình soạn thảo văn bản (Notepad) và gõ đoạn mã sau:
$fonts: arial, verdana, sans-serif; body { font-family:$fonts; }
Bây giờ bạn cần lưu các thay đổi và quay trở lại Koala. Nhấp chuột phải vào file SASS của bạn và menu sẽ hiện ở bên phải. Để biên dịch file SASS thành CSS, chỉ cần nhấp vào nút ‘Compile‘ . Bạn có thể xem kết quả bằng cách mở file style.css trong thư mục theme của mình và nó sẽ được xử lý thành CSS như thế này:
body { font-family: arial, verdana, sans-serif; }
Lưu ý : chúng tôi đã định nghĩa một biến $fonts trong file SASS của chúng tôi. Bây giờ bất cứ khi nào chúng ta cần thêm một họ phông chữ, chúng ta không cần phải nhập lại cả dòng CSS nữa mà chỉ cần sử dụng biến $fonts.
SASS còn mang siêu năng lực gì cho CSS nữa?
SASS cực kỳ mạnh mẽ, tương thích ngược và siêu dễ học. Như chúng tôi đã đề cập trước đó, bạn có thể tạo các biến, code lồng vào nhau (nesting), mixin, import, partials, hỗ trợ các phép toán và toán tử logic, v.v. Bây giờ chúng tôi sẽ cho bạn thấy một số ví dụ, sau đó bạn có thể thử sử dụng chúng trên theme WordPress của mình.
Quản lý nhiều stylesheet
Một vấn đề phổ biến mà bạn sẽ gặp phải trong quá trình thiết kế theme WordPress là các stylesheet lớn với rất nhiều phần. Bạn có thể sẽ cuộn lên xuống rất nhiều để sửa các đoạn mã giống nhau ở khắp mọi nơi. Trong khi đó, sử dụng SASS, bạn có thể import nhiều file khác vào stylesheet chính của mình và cuối cùng biên dịch rồi xuất ra một file CSS duy nhất.
Import CSS thì sao?
Vấn đề với việc sử dụng @import trong file CSS của bạn là mỗi lần bạn thêm @import, trình duyệt sẽ gửi một request mới đến server. Điều này ảnh hưởng không tốt đến thời gian tải trang của website.Khi bạn sử dụng @import trong SASS, nó sẽ gói tất cả các file được import vào file SASS của bạn và server chỉ cần gửi một file CSS duy nhất chứa tất cả đến trình duyệt.
Để tìm hiểu cách sử dụng @import trong SASS, trước tiên bạn cần tạo một file có tên reset.scss trong thư mục stylesheet của theme và dán đoạn mã này vào.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } Bây giờ bạn cần mở file style.scss chính và thêm dòng này vào nơi bạn muốn import file reset.scss:
@import 'reset';
Lưu ý: bạn không cần nhập tên file đầy đủ bao gồm phần .scss. Để biên dịch file này, bạn cần mở Koala và nhấp vào nút Compile lại một lần nữa. File style.css sau khi bấm nút Compile sẽ được cập nhật lại, nếu bây giờ bạn mở file này bạn sẽ thấy đoạn mã tương ứng với reset.scss ở đó.
Nesting ở SASS
Không giống như HTML, CSS không phải là ngôn ngữ hỗ trợ nesting nhiều lớp. SASS cho phép bạn tạo các file được lồng vào nhau dễ quản lý và làm việc. Ví dụ: bạn có thể lồng tất cả các thành phần sử dụng cho <article> section vào một selector cho nó. Điều này cho phép một nahf thiết kế theme WordPress có thể làm việc với nhiều section và định dạng mỗi element một cách dễ dàng. Để minh họa cho cách nesting hoạt động, bạn hãy thêm đoạn mã sau vào file style.css
.entry-content { p { font-size:12px; line-height:150%; } ul { line-height:150%; } a:link, a:visited, a:active { text-decoration:none; color: #ff6633; } }
Sau khi xử lý nó sẽ xuất ra file CSS sau:
.entry-content p { font-size: 12px; line-height: 150%; } .entry-content ul { line-height: 150%; } .entry-content a:link, .entry-content a:visited, .entry-content a:active { text-decoration: none; color: #ff6633; }
Là một nhà thiết kế theme, bạn sẽ thiết kế giao diện khác nhau cho các widget, bài đăng, menu điều hướng, tiêu đề, v.v. Sử dụng Nestin trong SASS làm cho code được cấu trúc tốt hơn và bạn sẽ không phải viết đi viết lại các class, selector và identifier nữa.
Sử dụng Mixins trong SASS
Đôi khi bạn sẽ cần sử dụng lại một số CSS trong project của mình ngay cả khi định dạng giống nhau, vì bạn sẽ sử dụng chúng với các selector và class khác nhau. Đây là lúc mixin phát huy tác dụng của mình. Hãy thử sử dụng mixin trong file style.css :
@mixin hide-text{ overflow:hidden; text-indent:-9000px; display:block; }
Mixin này về cơ bản đang ẩn một vài đoạn text, không cho hiển thị đối với người dùng .Đây là một ví dụ cho việc sử dụng SCSS mixin để ẩn text trên logo.
.logo{ background: url("logo.png"); height:100px; width:200px; @include hide-text; }
Hãy để ý một chút để thấy bạn cần sử dụng @include để thêm một mixin mới. Sau khi biên dịch, nó sẽ tương ứng với đoạn CSS sau :
.logo { background: url("logo.png"); height: 100px; width: 200px; overflow: hidden; text-indent: -9000px; display: block; }
Mixin cũng rất có ích với các vendor prefix. Khi cần sử dụng các giá trị opacity hoặc border radius, mixin có thể tiết kiệm cho bạn rất nhiều thời gian. Nhìn vào ví dụ này, chúng tôi đã dùng mixin để quy định border radius cho element.
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .largebutton { @include border-radius(10px); } .smallbutton { @include border-radius(5px); }
Sau khi biên dịch, nó sẽ tạo ra đoạn CSS sau :
.largebutton { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .smallbutton { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
Chúng tôi hy vọng rằng bài viết này đã tạo tiền đề cho bạn đối với việc sử dụng SASS trong phát triển theme WordPress. Nhiều nhà thiết kế theme WordPress đã và đang sử dụng nó. Một số người cho rằng trong tương lai, tất cả CSS sẽ được tiền xử lý (preprocessed) và các nhà phát triển theme WordPress cần phải đón đầu công nghệ. Hãy cho chúng tôi biết suy nghĩ của bạn về việc sử dụng ngôn ngữ tiền xử lý CSS như SASS để phát triển theme WordPress bằng cách để lại nhận xét bên dưới.