1) Vyvrácení českých mýtů. 2) Proč stylus 3) Tipy & triky

1. SUPERKODÉR
sk. Michal Matuška
@fireball_
www.superkoderi.cz

2. CSS Preprocessor
Stylus

3. Mýty & fakta

4. Malá a neaktivní komunita
Určen pro programátory
Nepodporuje plug-iny
Není podporován frameworky

5. Bootstrap framework
http://bit.ly/1d4OGXe
Foundation framework
http://bit.ly/1ffy6tv

6. Proč Stylus?

7. Nemá striktní
pravidla

8. a
{
color:
#333;
&:hover
{
color:
#000;
}
}
!
a
{
color:
#333;
&:hover
{
color:
#000;
}}
!
a
color:
#333;
&:hover
color:
#000;
Stylus

9. Significant
whitespace

10. Stylus
a
color
#333
&:hover
color
#000

11. Jednoduché volání
mixin

12. SASS vs Stylus
@include
background-­‐image(linear-­‐
gradient(top,
white,
black))
!
vs
!
background-­‐image
linear-­‐gradient(top,
white,
black)

13. @extend

14. .message
padding
10px
Stylus
!
.warning
@extend
.message
color
red
!
.message,
.warning
{
padding:
10px;
}
.warning
{
color:
red;
}
CSS

15. Business logika

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,
'%')

17. Tipy & triky

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;
}

20. Stylus
.crossroad-­‐articles
&
+
&
margin-­‐top
50px

21. CSS
.crossroad-­‐articles
+
.crossroad-­‐
articles
{
margin-­‐top:
50px;
}

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()

25. CSS
.icon:before
{
content:
'';
display:
inline-­‐block;
}

26. Stylus
no-­‐wrap
=
nowrap
!
.name
white-­‐space
no-­‐wrap

27. CSS
.name
{
white-­‐space:
nowrap;
}

28. Stylus
.btn
background
rgba(black,
.5)

29. CSS
.box
{
background:
rgba(0,0,0,0.5);
}

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;
}

32. Stylus
.icon-­‐add
absolute
top
50%
left
0
size
16px
margin-­‐top
(@height
/
-­‐2)

33. CSS
.icon-­‐add
{
position:
absolute;
top:
50%;
left:
0;
width:
16px;
height:
16px;
margin-­‐top:
-­‐8px;
}

34. Děkuji za pozornost
twitter.com/fireball_
www.superkoderi.cz
michal.matuska@superkoderi.cz