Giá như cách đặt $ trong Sass thật đơn giản!
Sass
8
tuds
22
White

tuds viết ngày 30/04/2016

Đây là vấn đề đau đầu và thường gây tranh cải nhất trong khi bạn làm việc nhóm hoặc cả chính những lúc bạn muốn xem lại code của mình.

Thối quen làm việc của tôi thường là nhanh, chỉ nhanh mới chứng minh công việc mình hiệu quả, nhưng nó sẽ sai khi bạn áp dụng nhanh cho cách đặt biến trong Sass.

alt text

Bạn không thể nào đặt một cách vô tội vạ $a, $b, $c hay $e $f, mà tất cả những biến bạn phải cho vào 1 hệ thống, 1 chuẩn nhất định.

Cố gắng thiết lập gợi nhớ cho chính bản thân mình cũng như những đồng nghiệp mà bạn sẽ phải làm chung. Việc đặt tên sẽ trở nên đơn giản và chính xác hơn cho từng một mục đích.

Ví dụ như $di-toilet $di-xem-phim $di-choi vừa nhìn vào những tên biến như thế này thì bạn sẽ nghĩ tới chức năng của nó là hành động chẳng hạn.

Khoản thời gian đầu khi dùng Sass tôi không biết được việc đặt tên biến ảnh hưởng nhiều như thế nào đến dự án của mình, cho đến khi nhìn lại thì ôi thôi, đống biến đã quá nhiều và mỗi lần sử dụng là phải mở file variable.scss lên so sánh và sử dụng.

Trường họp này giống như các bạn làm toán mà không thuộc bản cửu chương vậy, thực chất thì vẫn làm việc được nhưng thời gian quý báo của bạn sẽ bị dồn vào đây.

Và chắc chắn việc liên tục thông báo cho các đồng nghiệp của bạn về một tên mới, 1 biến mới vừa mới đẻ ra trong dư án này là điều hàng ngày bạn phải trả giá.

alt text

Nói nhiều vậy để chúng ta thấy được sự quan trọng của đặt tên cho 1 biến thôi, nhưng mà nó quan trọng thật đấy.

Ngay cả chính Sass cũng đẻ ra 1 styleguide để chúng ta follow theo mà, bạn đọc ở đây là chắc luôn nhé: http://sass-lang.com/styleguide

Cái này là styleguide của anh bự nên chúng ta nên theo, nhưng quả thật nó hay nên tôi muốn theo.

Cái quan trọng trong cách đặt biến này là việc thay thế đống mã màu hay bắt cứ những thứ gì khác một cách hiệu quả.

Bạn sẽ nhớ rất rõ các mã #333 #555 #777 là màu xám nhưng bạn thử nhớ những mã màu khác giúp tôi xem, trừ khi bạn làm việc với các màu đó hơn 10 lần hoặc bạn cố tình học thuộc nó.
alt text

Thay vào đó bạn chỉ việc đặt một tên gợi nhớ cho đúng:

$color-blue
$color-dark
$color-red

or cho border thì:

$border-blue
$border-dark
$border-red

Sẽ đơn giản hơn là việc nhớ từng mã màu, việc bạn quan tâm là website của bạn có bao nhiêu màu, và cứ thế mà phan những biến tương ứng với các màu cụ thể.

Bạn có thể đọc thêm ở đây, nó khá là chi tiết và cụ thể cho cách đặt tên như thế nào là đúng:

http://webdesign.tutsplus.com/tutorials/quick-tip-name-your-sass-variables-modularly--webdesign-13364

alt text

Trong bài này Jim Nielsen còn chia sẽ khá thú vị khi sử dụng Sublime Text để làm việc nhanh hơn khi cách đặt biến trở nên chuẩn hơn.

Một số kinh nguyệt, ối nhằm kinh nghiệm mà tôi hay dùng Sass:

  • Xác định màu chính của website có bao nhiêu màu.

    $brand-color-main or $brand-primary
    $brand-success
    $brand-warning
    $brand-info
    ...
    

    --

  • Xác định các màu dùng cho background

    $bg-color-main or $bg-primary
    $bg-success
    $bg-warning
    $bg-info
    ...
    

    --

Cũng tương tự:

  • Xác đinh màu cho border
  • Xác đinh màu cho text & link
  • Xác đinh màu cho button
  • Xác định chuẩn font-size
  • Xác định font-family cần dùng
$border-color-main
$text-color-main
$text-link-color-main
$btn-color-main
$font-size-main
$font-family-main
...

Tàm tàm, với cái đống này bạn có thể lôi từng dự án này sang dự án khác mà chỉ cần thay đổi màu của nó cho phù họp.

Để rồi không cần quan tâm đến màu của nó nữa mà chỉ cần nhớ trong dự án này màu chính của nó là $brand-color-main, button chính là $btn-color-main chẳng hạn.

Và tất nhiên, có thể đặt nhiều biến khác nữa để phục vụ cho các mục đích khác như margin, padding, line-height, font-weight .v.v...

Tóm lại

Mỗi người chúng ta điều có 1 phong cách, nói trắng ra là chảnh cmn chó nên ít khi theo styleguide của bắt cứ ai, chỉ thích làm theo cách của mình.

Nhưng xin thưa, nếu bạn muốn vậy thì hãy cố gắng nhiều hơn, nhiều hơn nữa để có thể tạo ra được những sản phẩm mà nhiều người có thể xem đó là 1 styleguide.

Giá như!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

34 bài viết.
104 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
52 12
0.1 Intro Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính t...
tuds viết hơn 2 năm trước
52 12
White
47 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết hơn 1 năm trước
47 5
White
26 2
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw width. 1 vw = 1% c...
tuds viết hơn 2 năm trước
26 2
Bài viết liên quan
White
4 2
Những khái niệm đầu tiên Nó là gì ? Sass là viết tắt của cụm Syntactically Awesome Style Sheets ( Style Sheet có cú pháp ảo diệu , đại loại thế ...
Vinh Trần viết 7 tháng trước
4 2
White
3 0
Đầu tiên tôi sẽ liệt kê một số thứ bạn cần nắm, chạm, sờ khi dùng @each trong Sass trước nhé. Đặt biến Bạn có thể dễ dàng đặt 1 biến mà bạn cần s...
tuds viết hơn 2 năm trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
104 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!