Future of Web Apps: Sass2. Hampton Catlin
• (Ex) Product Lead for Wikipedia Mobile
(en.m.wikipedia.org)
• Dictionary! for iPhone, WebOS. 20 million
users.
• Maintainer of mini_magick
• Misc Rails API features.
11. About Sass
• NOT dynamic
• Compiles to CSS!
• 5 years old
• Not server-side;
developer-side
• Nathan Weizenbaum &
Chris Eppstein
19. Other Implementations
• Ruby - Main Implementation
• Python - python-scss or ClassyCSS
• .Net - CoffeeAndSass
• LESS.app - Has Sass support
• PHP - PHamlP
• Rails, Django, Everything...
22. #header {
width: 200px;
}
h2 {
font-size: 50px;
}
23. <html>
<body>
<div id="header">
<h2>Logo</h2>
...
</div>
<h2>Not me!</h2>
</body>
</html>
24. #header {
width: 200px;
}
#header h2 {
font-size: 50px;
}
25. #header {
width: 200px;
h2 {
font-size: 50px;
}
}
28. p {
color: #369; }
a {
color: #???; }
29. p {
color: #369; }
a {
color: #d9e6f2; }
30. p {
color: #369; }
a {
color: lighten(#369, 50%); }
31. p {
color: #336699; }
a {
color: #d9e6f2; }
p {
color: #369; }
a {
color: lighten(#369, 50%); }
37. <div id="columns">
<div class="column" id="left_column"> 1</div>
<div class="column" id="middle_column">2</div>
<div class="column" id="right_column"> 3</div>
</div>
39. #columns .column {
border: 1px solid black; }
#columns #right_column {
width: 20px; }
$column_width: 300px; #columns #left_column {
$right_column: 20px; width: 30px; }
$left_column: 30px; #columns #middle_column {
width: 250px; }
#columns {
.column {
border: 1px solid black; }
#right_column {
width: $right_column; }
#left_column {
width: $left_column; }
#middle_column {
width: $column_width - $left_column - $right_column; } }
40. #columns .column, #sidebar .column {
border: 1px solid black; }
#columns #right_column, #sidebar #right
width: 20px; }
#columns #left_column, #sidebar #left_c
$column_width: 300px; width: 30px; }
$right_column: 20px; #columns #middle_column, #sidebar #midd
$left_column: 30px; width: 250px; }
#columns, #sidebar {
.column {
border: 1px solid black; }
#right_column {
width: $right_column; }
#left_column {
width: $left_column; }
#middle_column {
width: $column_width - $left_column - $right_column; } }
44. #columns .column {
border: 1px solid black; }
#columns .column.right {
width: 20px; }
$column_width: 300px;
#columns .column.left {
$right_column: 20px;
width: 30px; }
$left_column: 30px;
#columns .column.middle {
width: 250px; }
#columns {
.column {
border: 1px solid black;
&.right {
width: $right_column; }
&.left {
width: $left_column; }
&.middle {
width: $column_width - $left_column - $right_column; } }}
50. @mixin three_columns($width, $left_column, $right_column) {
&.right {
width: $right_column; }
&.left {
width: $left_column; }
&.middle {
width: $width - $left_column - $right_column; } }
#columns {
.column {
border: 1px solid black;
@include three_columns(300px, 20px, 30px); } }
51. // _mixins.sass
@mixin three_columns($width, $left_column, $right_column) {
&.right {
width: $right_column; }
&.left {
width: $left_column; }
&.middle {
width: $width - $left_column - $right_column; } }
// stylesheet.sass
@import _mixins.sass
#columns {
.column {
border: 1px solid black;
@include three_columns(300px, 20px, 30px); } }
61. .icon-sprite, .movie_icon {
background: url('../../../../images/compass/icon-s2c4
}
/* line 8, ../sass/screen.scss */
.movie_icon {
height: 20px;
background-position: 0 -22px;
}
@import "icon/*png";
.movie_icon {
height: 20px;
@include icon-sprite(movie); }
65. #columns {
@include column-count(3);
@include column-rule(2px, dashed, #369);
width: 300px; }
66. #columns {
@include column-count(3);
@include column-rule(2px, dashed, #369);
width: 300px; }
#columns_borders {
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
column-count: 3;
-moz-column-rule: 2px dashed #336699;
-webkit-column-rule: 2px dashed #336699;
-o-column-rule: 2px dashed #336699;
column-rule: 2px dashed #336699;
width: 300px; }
67. 1. WALK E T S
C K
RO
2. JOGG
K IN
C
U 3. RUN
. F
4
Hinweis der Redaktion \n \n \n \n \n Popular\nZen Garden\nSimple design\n \n \n \n Mention Rails.... etc.\nImproving on CSS\n \n \n \n \n \n \n \n \n \n \n Simple html example\n Styles the h2 and the header\n second h2 problem\n we scope!\nstupid design flaw.\n \n going into functions\n \n 50% lighter?\n \n \n \n Variables\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Amazing!\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n