Contenu connexe Similaire à Sass, Compass and the new tools - Open Web Camp IV (20) Plus de Dirk Ginader (17) Sass, Compass and the new tools - Open Web Camp IV1. Dirk Ginader | Yahoo! Inc.
SASS, Compass &
the new Webdev tools
@ginader
3. “CSS3 is awesome! Browsers
can now do rounded corners
and Everything!”
-- me, about the same time
8. “The Web Developer Wonderland
(a happy land where browsers don't need a
Refresh button)
CSS edits and image changes apply live.
CoffeeScript, SASS, LESS and others just work.”
-- the Livereload website
9. “What does LiveReload do?
LiveReload monitors changes in the file system. As soon
as you save a file, it is preprocessed as needed, and the
browser is refreshed.
Even cooler, when you change a CSS file or an image, the
browser is updated instantly without reloading the page.”
-- the Livereload website
10. writing 9 lines of CSS to
create 1 simple cross
browser gradient is a PITA...
-- everybody, all the time
11. .box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999')";
}
13. well if it’s *THAT* easy
I could as well give
it a try, right?
me, after having seen this toggle countless times...
15. “Sass makes CSS fun again. Sass is an extension of
CSS3, adding nested rules, variables, mixins,
selector inheritance, and more. It’s translated to
well-formatted, standard CSS using the command
line tool or a web-framework plugin.”
-- the Sass Website
21. reusable chunks of code
/* style.scss */
@mixin linear-gradient {
background-image: linear-gradient(top, #444, #999);
}
.box-with-gradient {
@include linear-gradient;
}
.another-box-with-same-gradient {
@include linear-gradient;
}
25. Mixins can have Params
/* style.scss */
@mixin linear-gradient($from, $to) {
background-image: linear-gradient(top, $from, $to);
}
26. /* style.scss */
@mixin linear-gradient($from, $to) {
background-color: $to;
background-image:
-webkit-gradient(linear,left top,left bottom,
color-stop(0, $from),color-stop(1, $to));
background-image:
-webkit-linear-gradient(top, $from, $to);
background-image:
-moz-linear-gradient(top, $from, $to);
background-image:
-ms-linear-gradient(top, $from, $to);
background-image:
-o-linear-gradient(top, $from, $to);
background-image:
linear-gradient(top, bottom, $from, $to);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to'));
}
28. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
29. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
30. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
31. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
32. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
33. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
34. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
35. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
36. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to'); HUH?
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}
37. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to'); HUH?
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";HUH?
}
40. /* style.scss */
@mixin linear-gradient($from, $to) {
background-color: $to;
background-image:
-webkit-gradient(linear,left top,left bottom,
color-stop(0, $from),color-stop(1, $to));
background-image:
-webkit-linear-gradient(top, $from, $to);
background-image:
-moz-linear-gradient(top, $from, $to);
background-image:
-ms-linear-gradient(top, $from, $to);
background-image:
-o-linear-gradient(top, $from, $to);
background-image:
linear-gradient(top, bottom, $from, $to);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#{$from}', endColorstr='#{$to}');
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(
startColorstr='#{$from}', endColorstr='#{$to}'));
}
42. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999')";
}
43. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999')";
}
44. write once and reuse
/* style.scss */
.box-with-gradient {
@include linear-gradient(#444444, #999999);
}
.box-with-another-gradient {
@include linear-gradient(#000, #fff);
}
45. wait - I never have to
write prefixes again?
Ever?
49. no more repetitive
selector writing!
/* style.scss */ /* style.css */
#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px; }
#navbar ul {
ul { list-style-type: none; } list-style-type: none; }
li { #navbar li {
float: left; float: left; }
a { font-weight: bold; } #navbar li a {
} font-weight: bold; }
}
50. even properties
are nestable!
/* style.scss */ /* style.css */
.fakeshadow { .fakeshadow {
border: { border-style: solid;
style: solid; border-left-width: 4px;
left: { border-left-color: #888;
width: 4px; border-right-width: 2px;
color: #888; border-right-color: #ccc; }
}
right: {
width: 2px;
color: #ccc;
}
}
}
52. use the & (parent reference)
i.e. for pseudoclasses
/* style.scss */ /* style.css */
a { a {
color: #ce4dd6; color: #ce4dd6; }
&:hover { color: #ffb3ff; } a:hover {
&:visited { color: #c458cb; } color: #ffb3ff; }
.module &{ a:visited {
!color: red; color: #c458cb; }
} .module a {
} color: red; }
54. define standard settings and
reuse across your project
/* style.scss */ /* style.css */
#navbar {
$main-color: #ce4dd6; border-bottom-color: #ce4dd6;
$style: solid; border-bottom-style: solid; }
#navbar { a {
border-bottom: { color: #ce4dd6; }
color: $main-color; a:hover {
style: $style; border-bottom: solid 1px; }
}
}
a {
color: $main-color;
&:hover {
border-bottom: $style 1px;
}
}
56. modify and transform
/* style.scss */ /* style.css */
$linkcolor: #ce4dd6; a {
color: #ce4dd6; }
a {
a:hover {
color: $linkcolor;
color: #f0c9f3; }
&:hover {
a:active {
color: lighten($linkcolor, 30%);
color: #6b1a70; }
}
&:active {
color: darken($linkcolor, 30%);
}
}
60. the Box Model
content area width
+ left padding
+ right padding
+ left border
+ right border
= total box width
61. calculate the s**t out
of the Box Model!
/* style.scss */ /* style.css */
.box {
$box-width : 100px; margin: 10px;
$box-border : 3px; padding: 10px;
$box-padding : 10px; border: 3px solid black;
$box-margin : 10px; width: 74px; }
.box{
! margin : $box-margin;
! padding : $box-padding;
! border: $box-border solid black;
! width : $box-width
! ! ! - $box-border * 2
! ! ! - $box-padding * 2;
}
65. combine them instead of
loading one after the other!
/* style.scss */ /* style.css */
.box {
@import 'box-model'; width: 74px;
@import 'calculate'; margin: 10px; }
@import 'function';
#navbar {
width: 800px; }
#navbar li {
float: left;
width: 150px; }
a {
color: #ce4dd6; }
a:hover {
color: #f0c9f3; }
a:active {
color: #6b1a70; }
68. “Compass is an open-
source CSS Authoring
Framework.”
-- the Compass website
69. “Compass is an excellent set of
ready made and well documented
CSS3 mixins, functions and helpers
that make SASS more awesome”
-- me
70. $ sudo gem update --system
$ sudo gem install compass
75. CSS3 mixins
• Appearance • Flexbox
• Background Clip • Box Shadow
• Background Origin • Box Sizing
• Background Size • Columns
• Border Radius • Filter
76. CSS3 mixins
• Font Face • CSS Regions
• Hyphenation • Text Shadow
• Gradients • Transform
• Inline Block • Transition
• Opacity
78. /* style.scss */
.box{
$experimental-support-for-svg: true;
@include background-image(
!linear-gradient(
!! left,
!! #2ac363, #cd8c14, #9c4cc2
!)
);
width: 80px;
height: 80px;
}
79. /* style.css */
.box {
background-image: url('data:image/svg
+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2
ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM
+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblV
zZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI
+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0
iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWN
vbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM
+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJ
sKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-
stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2));
background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14,
#9c4cc2);
background-image: -moz-linear-gradient(left, #2ac363, #cd8c14,
#9c4cc2);
background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
background-image: -ms-linear-gradient(left, #2ac363, #cd8c14,
#9c4cc2);
background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
width: 80px;
height: 80px;
}
81. best practices built in
/* style.scss */ /* style.css */
.inline-box{ .inline-box {
! @include inline-block; display: -moz-inline-box;
} -moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
}
.inline-box {
*display: inline;
}
82. best practices built in
/* style.scss */ /* style.css */
.box{ .box {
! @include clearfix; overflow: hidden;
} *zoom: 1;
}
83. best practices built in
/* style.scss */ /* style.css */
.other-box{ .other-box {
! @include pie-clearfix; *zoom: 1;
} }
.other-box:after {
content: "";
display: table;
clear: both;
}
85. did you *EVER* expect
Sprites to be fun?
@import "compass"; .icon-sprite, .icon-mail-attachment,
.icon-mail-delete, .icon-mail-reply {
@import "icon/*.png"; background:
url('../images/icon-s10b2c68b42.png')
@include all-icon-sprites; no-repeat;
}
.icon-mail-attachment {
background-position: -26px -2771px;
}
.icon-mail-delete {
background-position: -27px -2658px;
}
...
90. .attachment{ .attachment {
background: background: url('data:image/
inline-image( png;base64,iVBORw0KGgoAAAANSUh
'icon/mail-attachment.png' EUgAAAA0AAAAOBAMAAAAGUYvhAAAAA
) no-repeat; 3NCSVQICAjb4U/gAAAAHlBMVEX///
} 8AAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAACGjDitAAAACnRSTlMAESIzRF
Vmd4iZu4Nz1gAAAAlwSFlzAAALEgAA
CxIB0t1+/
AAAABR0RVh0Q3JlYXRpb24gVGltZQA
0LzQvMTI1uCR/
AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZS
BGaXJld29ya3MgQ1M0BrLToAAAAFNJ
REFUCJljYAACjWkCIIqpRSwBzDVgLg
BxGwTEA0Bc9sAyMLdMPAHMTSxjhHKb
GBg4DAvLOBQYGNQZ1EFcBg2gEJDLwG
HAAuIyMJangg1nYARTACNTDXDO7nbI
AAAAAElFTkSuQmCC') no-repeat;
}
...
91. li{
! padding-left:
image-width(
'icon/mail-attachment.png'
) + 10;
! background-repeat:no-repeat;
}
94. please welcome
the others:
• Less:
http://lesscss.org
• Stylus:
http://learnboost.github.com/stylus/
95. SASS ultimately won out because it's
the most mature, easiest to find
information and help about, seems
to have the most active and robust
development, and has the least bugs.
-- Chris Coyier, just recently
http://css-tricks.com/musings-on-preprocessing/