tìm hiểu về công nghệ less, giới thiệu về less

Giới thiệu LESS     !"#$#%$$ !&'(&) !"#$#!! *&'(+,- !"#$#!. "/012 !"#$#!% 3&'(&2 !"#$#*   44 5)2&'6 744082-'59 :;<=> 44 5)2&'6 744082-'59 :;<=> ?@44/-5A ?@44/-5A  !  • ?@445B8/CDEFGHIJ4HGGH/K:G=8/<ALM • ?@44N8 - O,5P445)2KQR&S&2) - T(S&2GU)DV805:44 * W, W, 1IJ 1IJ HJHX&GHJ HJHX&GHJ YZ YZ 48H 48H N88 " W, • 8[86-D/5BJZ\]&G0:;KJZ\ /D:J'GH^-DO<,6&_-'59/'KD`0-' 59:; 3 W, Oa\ bb?HJJ cG/d"T%!$ef dH-H/g G/cG/f h !g G/cG/f h ij-k'?HJJk5/&d"T%!$e D,cG/D,'l&2H-H/! $ 1IJ • 1IJ8[8QD:&:m^-:G-JJ/44/G-JJ 6DV:65)2GG-JJ':&:m^- G-JJ6-0_D,K-'/DVD:&:m ^-G-JJ . 1IJ • 2JZN-6-D:G8nG-JJolC&gradientJ-& /-HJg D-6/&dH-H-H-f D-6/&GH-/p/-Hn8KdH-H-H-Kdof D-6/&ppGH-/p/-Hn8KdH-H-H-Kdof D-6/&pJpGH-/p/-Hn8KdH-H-H-Kdof D-6/&pqpGH-/p/-Hn8KdH-H-H-Kdof D-6/&prHD6pGH-/p/-Hn8KdH-H-H-Kdof h ijD:&:mD/5P5Bk5/-HJ='6D&_l&'DkM6- D6D`05s/-HJ-'D/G5B t 1IJ Oa\ g /-HJf D/H/8IJGd333f D/H/p/-&J*8If h % 1IJ bb?@44 /&Hp/H/Jnc/-&J38Iog D/H/p/-&Jc/-&Jf prHD6pD/H/p/-&Jc/-&Jf pqpD/H/p/-&Jc/-&Jf h dH-H/g /&Hp/H/Jf h duH/g /&Hp/H/Jn#8Iof h LJJ)MG dH-H/g D/H/p/-&J38If prHD6pD/H/p/-&J38If pqpD/H/p/-&J38If h duH/g D/H/p/-&J#8If prHD6pD/H/p/-&J#8If pqpD/H/p/-&J#8If h # [...]...Nested Rules • Thay vì viết các tên selector dài để chỉ ra các quan hệ thừa kế trong CSS, với Less bạn có thể lồng các selector vào nhau Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và code stylesheet cũng ngắn gọn hơn 11 Nested Rules • // LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-... trừ, nhân, chia giá trị của các thuộc tính, màu sắc, làm cho giá trị của các thuộc tính có liên quan tới nhau Cho phép thao tác với các giá trị theo bất cứ cách nào bạn muốn 13 Ví dụ: Hàm & toán tử // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: . Giới thiệu LESS     !"#$#%$$ !&'(&). tử • Z8[8:K/vK|K-/^-&:mK&JQKG /^-&:mGS&--&8[8- /HDkMD&_ * Hàm & toán tử Ví d :ụ // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: