Más contenido relacionado Stylus - css preprocessor4. Malá a neaktivní komunita
Určen pro programátory
Nepodporuje plug-iny
Není podporován frameworky
8. a
{
color:
#333;
&:hover
{
color:
#000;
}
}
!
a
{
color:
#333;
&:hover
{
color:
#000;
}}
!
a
color:
#333;
&:hover
color:
#000;
Stylus
10. Stylus
a
color
#333
&:hover
color
#000
12. SASS vs Stylus
@include
background-‐image(linear-‐
gradient(top,
white,
black))
!
vs
!
background-‐image
linear-‐gradient(top,
white,
black)
14. .message
padding
10px
Stylus
!
.warning
@extend
.message
color
red
!
.message,
.warning
{
padding:
10px;
}
.warning
{
color:
red;
}
CSS
16. Stylus
$cols
=
1
2
3
4
5
!
for
$col
in
$cols
$parts
=
1..$col
for
$part
in
$parts
if
$col
is
1
or
$part
is
not
$col
.col-‐{$part}-‐{$col}
width
unit(100
/
$col
*
$part,
'%')
18. Stylus
$absoluteFull
position
absolute
top
0
right
0
bottom
0
left
0
!
.overlay
@extend
$absoluteFull
19. CSS
.overlay
{
position:
absolute;
top:
0;
right:
0;
bottom:
0;
left:
0;
}
22. Stylus
input
color
#666
&:hover,
/.is-‐hovered
color
#000
23. CSS
input
{
color:
#666;
}
!
input:hover,
.is-‐hovered
{
color:
#000;
}
24. Stylus
icon()
if
match(':(before|after)',
selector())
content
''
display
inline-‐block
!
.icon
&:before
icon()
30. Stylus
size()
if
length(arguments)
==
1
width
arguments[0]
height
arguments[0]
else
width
arguments[0]
height
arguments[1]
!
.square
size
30px
!
.rectangle
size
30px
15px
31. CSS
.square
{
width:
30px;
height:
30px;
}
!
.rectangle
{
width:
30px;
height:
15px;
}
33. CSS
.icon-‐add
{
position:
absolute;
top:
50%;
left:
0;
width:
16px;
height:
16px;
margin-‐top:
-‐8px;
}