Giá như @each trong Sass thật đơn giản!
Sass
6
tuds
22
White

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

Đầ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ử dụng, và cần nhớ là biến có thể mang nhiều giá trị, màu sắc mã màu (#333), chuỗi (green, red), hoặc có thể kế thừa nhau.

$cha   : green;
$con   : $cha;

.cha {
  background: $con;
}
// ==> css
.cha {
  background: green;
}

Gọi biến #{$var_name}

$cha    : green;
$con    : $cha;
$color  : color;

.cha {
  background-#{$color}: $con;
}
// ==> css
.cha {
  background-color: green;
}

Ngooài ra ta có thể sử dụng kết họp với nhiều thứ

  • class .#{$var-name} ==> dấu . phía trước nhé
  • id ##{$var-name} ==> dấu # phía trước nhé

Nói tào lao nhiều quá giờ nhảy vào phần chính thôi.

each

Chắc hẳn là các bạn đã biết qua @each của jquery, nói vậy thôi chứ đừng lên google search each jquery nhé :D.

Với each trong Sass bạn sẽ trở nên ghê hơn trong khi viết Css, ghê ở nghĩa là thấy ghê đó nha.

Tôi có 1 đoạn Css như sao:

.ca {
  color: blue;
  background: blue;
  font-size: 14px;
  height: 50px;
  width: 100px;
}
.ca-chet-gray {
  color: gray;
  background: gray;
  font-size: 14px;
  height: 50px;
  width: 100px;
}
.ca-chet-green {
  color: green;
  background: green;
  font-size: 14px;
  height: 50px;
  width: 100px;
}
.ca-chet-red {
  color: red;
  background: red;
  font-size: 14px;
  height: 50px;
  width: 100px;
}

Kết quả xét nghiệm là mấy con cá này kế thừa cha của nó là , và bạn thấy nếu chúng ta bắt từng con cá như thế này để kiểm tra thì rất là tốn thời gian đúng không.

Chúng ta sẽ xét nghiệm nó lại bằng Sass:

@each $loai-ca, $mau-cua-ca, $kich-thuoc-ca in
(ca-chet-red, red, 14px),
(ca-chet-green, green, 14px),
(ca-chet-gray, gray, 14px)
 {
  .#{$loai-ca} {
    background: #{$mau-cua-ca};
    color: #{$kich-thuoc-ca};
    font-size: #{$kich-thuoc-ca};
    height: 50px;
    width: 100px;
  }
}

alt text

Nhìn vào đóng bịnh này thấy ghê quá, giờ là lúc giải phẩu nó xem bịnh cá như thế nào.

Ta cần xác định con cá này có tên là gì, màu sắc, kích thước, cân nặng, chiều cao .v.v... có nhiều bao nhiêu thì liệt kê ra bấy nhiêu nhé.

Ở đây tôi liệt kê 1 số thôi $loai-ca, $mau-cua-ca, $kich-thuoc-ca còn chiều cao và kích thước tôi không liệt kê, nếu bạn thích thì vẫn được nhé.

Thở bằng đường dưới một cái, chuẩn bị vào ca khó đây :D

Bạn thấy @each ... in ... ở những chổ ... là

$loai-ca, $mau-cua-ca, $kich-thuoc-ca

(ca-chet-red, red, 14px)

Điếm thứ tự thử nhé, 1 - 2 - 3 rồi bạn thấy thế nào, tôi thì, đương nhiên "thở bằng đường dưới một cái" là khỏe rồi :D.

Giả sử tôi đổi thử vị trí của biến xem sao nhé, thiệt tình ca giải phẩu có mùi kinh quớ.

$loai-ca, $kich-thuoc-ca, $mau-cua-ca

(ca-chet-red, red, 14px)

alt text

Xem ra đổi vị trí là cá bị biến dạng ngay, nên bạn chú ý phần này nhé.

Khi khai báo vị trí các giá trị phải chính xác, và biết rõ là mình nên khai báo nó ở đâu, nếu không cá chết thì ráng chịu nhé.

Tối ưu khi giải phẩu

Tới đây tôi cảm thấy khó thở vì mùi kinh quá rồi, tôi phải đi ra ngoài, ngoài cái cấu trúc thấy ghê này. Ý tôi là, nếu tôi thay đổi các thông số lại bằng $bien hết thì chuyện gì sẽ xảy ra nhỉ:

$ca: ca-chet;
$ca-size: 14px;
@each $loai-ca, $mau-cua-ca, $kich-thuoc-ca in
(#{$ca}-red, red, $ca-size),
(#{$ca}-green, green, $ca-size),
(#{$ca}-gray, gray, $ca-size)
 {
  .#{$loai-ca} {
    background: #{$mau-cua-ca};
    color: #{$mau-cua-ca};
    font-size: #{$kich-thuoc-ca};
    height: 50px;
    width: 100px;
  }
}

Ta nên xác định là ta có bao nhiêu loại cá, và nó có trùng tên với nhau hay không, nếu trong trường họp này là có và tôi sẽ cho nó 1 biến là: $ca: ca-chet;

Ngoài ra, các thuộc tính giống nhau ta nên đưa ra 1 $biến để có thể tiện đường sửa 1 lần và đó cũng là thứ hay ở Sass.

Với cách giải phẩu trên nếu tôi không muốn nó là cá chết nữa, tôi chỉ cần sửa ở biến cá

$ca: ca-chet; ==> $ca: btn;

alt text

Rất là nhanh, tiện, và có thể tùy biến cho phù họp mục đích sử dụng con cá này.

Quên kéo

HÌnh như tới đây mình quên 3 - 4 cây kéo trong con cá rồi thì phải, à không vòng lặp mới đúng:

.#{$loai-ca} {
    background: #{$mau-cua-ca};
    color: #{$mau-cua-ca};
    font-size: #{$kich-thuoc-ca};
    height: 50px;
    width: 100px;
  }

Ở đây chính là cái đóng thuộc tính mà các bạn phải viết đi, viết lại cho mỗi con cá, thay vì như vậy bạn chỉ cần khai báo 1 lần ở đây, và nếu có khác biệt gì thì bạn khai báo ở đây

alt text

Kết liễu con cá

Cá là một loại sinh vật giống nhâu "cá mè một lứa" thế nên *@each ... in ... * bạn nhớ nó là vòng lặp các con cá cũng được.

Điều cần lưu ý là $biến được sử dụng và được gọi 1 cách loằn ngoằn trong đó, nhưng nó cũng có logic, với tôi là :

  • Đếm1 - 2 - 3
  • Gôm những tên trùng lặp thành $biến
  • Đặt tên biến hiệu quả.
  • Sử dụng những biến có sẳn trong project nếu có thể.

Chúc bạn giải phẩu bọn "cá mè 1 lứa" thành công.

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

32 bài viết.
93 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
40 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 12 tháng trước
40 5
White
35 7
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 1 năm trước
35 7
White
17 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 gần 2 năm trước
17 2
Bài viết liên quan
White
4 3
Đâ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...
tuds viết gần 2 năm trước
4 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
32 bài viết.
93 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á!