Một vài mẹo giúp tận dụng tối đa Sass

Đây là bài dịch, bài gốc mời các bạn xem ở đây: https://www.sitepoint.com/8-tips-help-get-best-sass/

Khi được sử dụng hiệu quả, Sass giúp chúng ta xây dựng CSS có thể mở rộng và không bị lặp. Tuy nhiên, khi được sử dụng không chính xác, Sass có thể làm tăng kích thước file, thừa code thậm chí là trùng lặp.

Dưới đây là một số mẹo để giúp bạn tận dụng tốt nhất Sass trong ứng dụng của mình.

1. Cấu trúc lại Sass

Xây dựng cấu trúc trang web của bạn chính xác từ đầu là rất quan trọng cho bất kỳ dự án nào. Sử dụng [partials] (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials) cho phép bạn chia CSS thành các khối dễ quản lý, bảo trì và phát triển hơn.

Chúng ta chia thành các file nhỏ hơn bắt đầu bằng kí tự _, đây k phải là các tệp css riêng biệt. Chúng sẽ được import vào 1 tệp gốc, ở đây là global.scss trong thư mục gốc.

Ví dụ:

vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss

Cấu trúc thư mục này đảm bảo trang web dễ sử dụng và mở rộng. Ví dụ, các mô đun mới có thể dễ dàng được thêm vào thư mục mô-đun và sau đó thêm vào global.scss sử dụng @import

Để chứng minh, đây là một ví dụ global.scss:

/* VENDOR - Default fall-backs and external files.
========================================================================== */

@import 'vendor/_normalize.scss';


/* BASE - Base Variable file along with starting point Mixins and Placeholders.
========================================================================== */

@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';


/* FRAMEWORK - Structure and layout files.
========================================================================== */

@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';


/* MODULES - Re-usable site elements.
========================================================================== */ 

@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';

Để tham khảo hơn việc mở rộng này, các bạn có thể xem thêm ở đây Hugo’s extensive post on Sass architecture.

2. Sử dụng biến hiệu quả hơn

Các biến số là một trong những tính năng đơn giản của Sass nhưng vẫn thường được sử dụng không chính xác. Tạo một quy tắc đặt tên là điều cần thiết khi làm việc với các biến. Nếu không chúng sẽ trở nên khó hiểu và không thể tái sử dụng.

Dưới đây là một số mẹo để tạo các biến:

• Đừng đặt tên biến mơ hồ
• Hãy sử dụng naming convention (Modular, BEM, vv)
• Đảm bảo sử dụng biến là hợp lý. Dưới đây là một số ví dụ điển hình:

$orange: #ffa600; 
$grey: #f3f3f3; 
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;

Và một số ví dụ thảm họa:

$link: #ffa600;
$listStyle: none;
$radius: 5px;

3. Hạn chế sử dụng mixin

Mixin là một cách tuyệt vời để gộp các phần của code được sử dụng nhiều lần. Tuy nhiên, bao include mixin cũng giống như việc sao chép và dán trong tệp CSS. Nó tạo ra một lượng code trùng lặp và có thể làm phình lên tập tin CSS.

Một mixin do đó chỉ nên được sử dụng nếu có một đối số, để nhanh chóng tạo sửa đổi 1 style cũ.

Đây là một ví dụ:

@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;  
}

rounded-corner mixin có thể sử dụng ở bất kì đâu với 1 đối số $arc, điều này khiến nó trở thành 1 mixin đáng giá

.tab-button {
     @include rounded-corner(5px); 
}

.cta-button {
     @include rounded-corner(8px); 
}

Ví dụ không tốt sẽ giống như sau:

@mixin cta-button {
    padding: 10px;
    color: #fff;
    background-color: red;
    font-size: 14px;
    awidth: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

4. Sử dụng Placeholders

Không giống mixin, placeholders có thể được sử dụng nhiều lần mà không bị lặp code. Điều này làm cho làm nó dễ sử dụng hơn và vẫn giữ DRY CSS:

%bg-image {
    awidth: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend %bg-image;
    background-image:url(/img/image-one.jpg");
}

.image-two {
    @extend %bg-image;
    background-image:url(/img/image-two.jpg");
}

Đây là CSS:

.image-one, .image-two {
    awidth: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    background-image:url(/img/image-one.jpg") ;
}

.image-two {
    background-image:url(/img/image-two.jpg") ;
}

Kết hợp với phần đã nói ở mục 3, placeholder có thể được sử dụng cùng với mixins để giảm trùng lặp code và vẫn giữ được sự linh hoạt của một mixin ...

/* PLACEHOLDER 
============================================= */

%btn {
    padding: 10px;
    color:#fff;
    curser: pointer;
    border: none;
    shadow: none;
    font-size: 14px;
    awidth: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

/* BUTTON MIXIN 
============================================= */

@mixin  btn-background($btn-background) {
    @extend %btn;
    background-color: $btn-background;
    &:hover {
        background-color: lighten($btn-background,10%);
    }
}

/* BUTTONS
============================================= */

.cta-btn {
    @include btn-background(green);
}

.main-btn {
    @include btn-background(orange);
}

.info-btn {
    @include btn-background(blue);
}

5. Sử dụng hàm cho các phép tính

Functions rất hữu ích trong việc tính toán trong CSS. Sass function không trả về bất kì css nào, thay vào đó, nó trả về một giá trị có thể được sử dụng trong CSS.

Ví dụ, các function hữu ích để tính toán chiều rộng của một phần tử:

@function calculate-awidth ($col-span) {
    @return 100% / $col-span 
}

.span-two {
    awidth: calculate-awidth(2); // spans 2 columns, awidth = 50%
}

.span-three {
    awidth: calculate-awidth(3); // spans 3 columns, awidth = 33.3%
}

6. Sắp xếp gọn gàng

Đặt tất cả các mixins, functions, placeholders và các biến trong file liên quan đến chúng. Giữ các khối code với nhau sẽ đảm bảo chúng dễ dàng chỉnh sửa và sử dụng lại trong tương lai.

Các phần tử được sử dụng ở nhiều nơi nên được đặt trong một thư mục gốc. Các thư mục gốc nên chứa các biến global như phông chữ và màu sắc:

$font-primary: 'Roboto', sans-serif; 
$font-secondary: Arial, Helvetica, sans-serif;

$color-primary: $orange;
$color-secondary: $blue;
$color-tertiary: $grey;

Các mixins, function và biến cụ thể cụ thể phải được để chính xác ở module liên quan đến nó:

$tab-radius: 5px;
$tab-color: $grey;

7. Giới hạn cấp độ con

Sử dụng bữa bãi việc lồng nhau trong Sass có thể gây ra rất nhiều vấn đề, từ code phức tạp đếnsự phụ thuộc quá nhiều vào cấu trúc HTML của trang. Những điều này có thể gây ra vấn đề sâu hơn và có khả năngkhiến chúng ta phải sử dụng!important, mà thường nên tránh.

Đây là 1 vài nguyên tắc bạn nên tuân theo:

• Không lớn hơn 3 cấp độ lồng nhau
• Đảm bảo css ngắn gọn và có thể dùng lại
• Sử dụng lồng nhau khi có thể, k phải bắt buộc

8. Giữ mọi thứ đơn giản

Điểm quan trọng nhất là giữ mọi thứ đơn giản nhất có thể. Mục đích của Sass là viết CSS dễ quản lý hơn. Trước khi tạo ra bất kỳ mixin, varible, hoặc function, đảm bảo rằng nó sẽ đẩy nhanh sự phát triển và không làm mọi thứ bị quá phức tạp. Tất cả các tính năng Sass rất hữu ích khi được sử dụng đúng lúc, đúng chỗ.

Tạo ra một danh sách vô số các biến mà không có cách sử dụng rõ ràng, hoặc một function phức tạp, khó hiểu đối với bất cứ ai ngoài tác giả không phải là mục đích của 1 developer có tâm.