Một vài thủ thuật sử dụng SASS viết CSS

    Thời buổi này làm việc gì người ta cũng thường sử dụng các công cụ hỗ trợ sao cho công việc chúng ta được nhanh hơn, đến cả chơi game mấy thanh niên cũng dùng tool hack, hỗ trợ leo rank các kiểu... thì không có lý do gì mà một dev không sử dụng SASS để viết CSS nhanh hơn, gọn hơn, rõ ràng hơn cả.

    Nhưng đầu tiên chúng ta cần tìm hiểu CSS Preprocessor, SASS là gì đã, sau đó cùng tìm hiểu một số kỹ thuật viết, tích hợp các công cụ viết CSS nhé

1. CSS Preprocessor

    Đọc tên cũng hiểu nôm na CSS Preprocessor là ngôn ngữ tiền xử lý CSS, nó tổ chức mã CSS thành một cấu trúc giúp viết CSS theo mộ trình tự rõ ràng, nhanh hơn, có tính tái sử dụng, dễ dàng bảo trì và phát triển.

    Một số CSS Preprocessor được sử dụng phổ biến như: SASS, LESS, ...

2. SASS

    SASS là một CSS Preprocessor cung cấp các quy tắc viết CSS nhanh và tiện lợi hơn như: nested (lồng nhau), khai báo biến, mixins (kiểu gom nhóm CSS...), có thế nén tập tin CSS ...

3. Cài đặt SASS

- Cài đặt Ruby

    Do SASS là một thư viện của Ruby nên đầu tiên các bạn phải cải đặt Ruby
    Vào link để tải Ruby phù hợp với hệ điều hành các bạn đang dùng và cài đặt bình thường

- Cài đặt SASS


gem install sass

- Biên dịch

  • Chuyển đổi sass sang css: (SASS thường được viết dưới dạng file .scss)

sass /path/to/style.scss /path/to/style.css

  • Tự động chuyển đổi khi lưu file:

sass -watch /path/to/style.scss /path/to/style.css

  • Chuyển đổi tất cả file trong thư mục:

sass /path/to/resource/sass:/path/to/public/css

    Nếu muốn ăn liền không muốn cài đặt Ruby hay chạy lệnh rườm rà thì các bạn có thể dùng các phần mềm biên dịch file SASS sang CSS như Prepros, Koala, Compass (các bạn tự tìm link download nhé)

4. Sử dụng SASS

- Biến: SASS dùng ký tự $ đứng trước để xác định biến

    Bạn có thể khai báo biến màu chữ của cả trang, background header, footer, body, font-family... để khi nào muốn thay đổi thì chỉ cần thay đổi duy nhất một chỗ khai báo biến đó, ví dụ:

$color: #000;
$font: Roboto, sans-serif;
$bghead: #fff;

.header {
    color: $color;
    background: $bghead;
}

- Lồng nhau (nesting): SASS có thể được viết các class, thẻ, id lồng nhau tương tự như các thẻ HTML được viết lồng nhau vậy

<ul class="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
</ul>

//sass
.list {
    .item {
        color: #ff0000;
        &:hover {
            color: #000;
        }
    }
}

 - Chia nhỏ các file và import

    Các bạn có thể tách nhỏ các file ra cho dễ quản lý, ví dụ như một file khai báo các biến, một file khai báo các class có sẵn thường hay dùng..., sau đó dùng @import để ghép chúng lại với nhau

/* _variable.scss */
$fontsize: 14px;
$bodyColor: #ff0000;
$bodyBg: #fff;

/* main.scss */
@import _variable.scss
body {
    color: $bodyColor;
    background: $bodyBg;
}

- Mixins

    Mình thấy Mixins là phần hữu ích nhất khi sử dụng SASS, nó giúp bạn viết css rất gọn gàng bằng cách nhóm các css lại với nhau, nó cũng có thể được hiểu như một hàm (function) trong các ngôn ngữ lập trình.

    Mixin khai báo bằng từ khóa @mixin và sử dùng bằng @include

    Mình thường dùng Mixins để viết các CSS3 dùng riêng cho từng trình duyệt

@mixin rotate ($deg) {
    transform: rotate($deg);
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
}

.circle {
    @include rotate(45deg);
}

- Kế thừa

    Đây là phần mà bạn có thể tái sử dụng code css

%border {
    border-width: 3px;
    border-style: solid;
}

.border {
    @extend %border;
}
.border-red {
    @extend %border;
    border-color: red;
}
.border-black {
    @extend %border;
    border-color: black;
}

- Các phép toán

SASS cung cấp các phép toán +, -, *, / và % để tính toán độ rộng, margin, padding ...

.box {
    width: 300px * 5;
    height: calc(20px * 5 + 10%);
}

5. Tích hợp SASS vào Netbean

    Khi làm việc với Netbean để vừa viết code bên server, vừa viết css, sẽ rất bất tiện khi phải dùng command line hay các phần mềm khác để biên dịch SASS,  vì vậy mình xin hướng dẫn cách tích hợp SASS vào Netbean luôn để mỗi khi Ctrl + S một phát là nó tự biên dịch và nén luôn file css cho mình

  • Đầu tiên bạn cần cài đặt Ruby (cài đặt như đầu bài)
  • Mở Netbean, với Netbean 8.0.2 vào Tools -> options -> HTML/JS -> CSS Preprocessor
  • Điền đường dẫn sass.bat vào sass path như hình

image

  • Lưu lại cài đặt
  • Bây giờ mở project bạn muốn biên dịch SASS
  • Click chuột phải vào project -> properties -> CSS preprocessor và thiết lập file cần biên dịch - input, đường dẫn xuất css - output, các tùy chọn nén file (--style compressed), source map (--sourcemap=none)

image

  • Nhớ tích vào Complie sass files on save nhé.
  • Giờ chỉ cần bạn save file thì Netbean sẽ tự biên dịch và nén file css cho bạn. rất tiện phải không

 

Hi vọng bài viết sử dụng sass viết css sẽ có ích với các bạn! thanks.

Bài viết từ pinlaz.com