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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (266.8 KB, 16 trang )

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
•
-'<,JHGH/5C`/-S&-v-6,/44K?HJJ
DCGwJHGH/o-&O'GS&-v-6,/E

/x/)HJ'GHJHHyQR)

Nested Rules
•
bb?@44
dH-H/
g
g
upJqH!$8If
uprHDGf
h
8gupJqH!8If
-gHIpH/-zHf
{H/gD/H/p r8Ih
h
h
h
W/-44
dH-H/g
upJqH!$8If
uprHDGfh
dH-H/8g
upJqH!8Ifh
dH-H/8-g
HIpH/-zHfh
dH-H/8-H/g
D/H/pr8Ifh
!
Hàm & toán 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: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate (@red, 10%);
}
ij-k5/8I
D,cHpD/H/='6
5,dH-H//D,
cHpD/H/J}5BJZ\
D/H/pGH~DH/p/K
DH/p//^-J}5B|!)D,6
"
48H
•
B,J}5Bv-Egiá trị/80k
H-H/g
cG/DG-6f

D-6/&pG/cG/f
-g
cG/DG&Hf
D-6/&pG/cG/f
-g
G/cG/f
h
h
h
headerJ}&D-6/&Gmàu đenK/6&navGmàu xanh-/AK&^-ayGmàu xanh-/A
3
Thank you!
$

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

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về