Thiết Kế Theme WordPress Bằng SASS Thay Vì CSS (P2)

[tiendat3791]

Tiếp theo bài viết Thiết Kế Theme WordPress Bằng SASS Thay Vì CSS (P1), công ty thiết kế web OTVINA cùng các bạn tìm hiểu phần tiếp theo.
[h=3]Thứ tư, cấu trúc lại CSS thành Sass.[/h][h=3]Toán tử & trong Sass.[/h]Chức năng: Các toán tử & sử dụng để nhân bản hoặc đảo ngược thứ tự của selector.
p {
& + & {
margin-top: 1em;
}
}
.menu-link {
color: $gray;
.menu-item:hover & {
color: $gray-light;
}
}Xét về mặt tính toán các giá trị thay đổi gần giống nhau, ví dụ như khi thiết kế web nhà hàng khách sạn bạn muốn khi khách hàng thực hiện một quá trình di chuột thì màu sắc trên website sẽ nhạt dần, với CSS để làm được điều đó bạn sẽ tạo ra các giá trị màu liên tiếp, nhưng đối với Sass thì sao?
Ví dụ về một hàm tính toán màu sắc nhạt dần theo di chuột sử dụng Sass.
// This goes in _functions.scss:
@function hover-color($color) {
@return lighten($color, 10%);
}
// This is how you use the function in other partials:
.button {
background-color: $red;
&:hover {
background-color: hover-color($red);
}
}Chúng ta có thể sử dụng cấu trúc code bằng cách lấy các block code lặp đi lặp lại và thay thế chúng bằng mixins.
// This goes in _mixins.scss:
@mixin clearfix() {
&::after {
content: “”;
display: table;
clear: both;
}
}
// This is how you use the mixin in other partials:
.content-container {
@include clearfix;
}Mixins cũng có thể lấy các thông số để tạo ra tùy chỉnh. Điều này rất hữu ích cho các mẫu thiết kế giống như các nút hoặc các thông báo.
// This goes in _mixins.scss:
@mixin alert($color) {
border-radius: .5em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.5);
border-top: 4px solid $color;
color: $color;
}
// This is how you use this mixin:
.alert-error {
@include alert($red);
}
.alert-success {
@include alert($green);
}.

Thiết kế theme wordpress bằng Sass thay vì CSS.
[h=3]Import các partials Sass.[/h]Có hai phương pháp để Import Sass từ các thư mục, trước hết phải import mỗi tập tin vào style.css bao gồm cả tên thư mục.
@import 'base/variables';
// imports _variables.scss from the /base/ directory
@import 'base/mixins';
// imports mixins.scss from the /base/ directory
@import 'base/grid';
// imports _grid.scss from the /base/ directoryPhương pháp thứ hai - phương pháp này phức tạp hơn.
// in style.scss
@import 'base/base';

// in /base/_base.scss
@import 'variables';
// imports _variables.scss from the /base/ directory
@import 'mixins';
// imports mixins.scss from the /base/ directory
@import 'grid';
// imports _grid.scss from the /base/ directoryCả hai phương pháp này đều import theo thứ tự, phương pháp đầu tiên đơn giản hơn nhưng phương pháp thứ hai lại có lợi thế trong việc giữ style.scss gọn hơn và có thể sử dụng trong bất kỳ module nào.
Sau đây một số sơ đồ tổ chức khá đơn giản, chúng ta có thể sử dụng như sau:

• /base/ (variables, mixins, reset, typography)
• /layout/ (grid, header, footer)
• /vendors/ (plugins, vendors, etc)
• /components/ (buttons, menus, forms, widgets)
• /pages/ (home, landing page, portfolio).

Trên đây là một số điểm cơ bản trong việc sử dụng Sass trong việc thiết kế theme cho WordPress. Thiết kế web OTVINA hi vọng bài viết này sẽ mai lại nhiều lợi ích cho các bạn.
Cảm ơn và trân trọng.
Nguồn : Thiết Kế Theme WordPress Bằng SASS Thay Vì CSS (P2)