A

1. JS DAY -VERONA - May 14th 2014
AndreaVerlicchi @verlok www.andreaverlicchi.eu
Agile CSS Development with
/ SASS

2. About me
• AndreaVerlicchi!
• Front-end architect
(also PHP developer)!
• www.andreaverlicchi.eu
twitter: @verlok

3. Let's talk about CSS

4. CSS can become messy
• Many site sections
home, landings, products, etc.!
• Many page sections
header, footer, main, etc.!
• Many devices
desktop, tablet, smartphone, etc.!
• Many screen resolutions!
• Many colors, fonts, helpers, etc.

5. CSS can become messy
• Not a unique author!
• Not a unique coding style

6. CSS can become looong
• long CSS file vs split CSS file
we could split the code into more CSS files,
but it would result in less performing websites
(more HTTP requests)!
• long CSS file vs code readability
code is less readable if files are very long, especially
when you first look to someone else's code

7. CSS can be repetitive
• Sandboxed rules!
article header {...}
article h1 {...}
article p {...}
article footer {...}
article .author {...}!
• Rules that share styles!
button { background-color: #BADA55 }
a { color: #BADA55 }
body { border-bottom: 5px solid #BADA55 }

8. CSS is not a complete
language
• No variables (yet)!
• No extensibility!
• No math (yet)!
• Just a few functions (rgb, rgba, ...)

9. What if all this
could CHANGE?

10. What if we could use...

11. What if we could use...
Variables?Nesting?
Functions? Math?

12. Partials?
Variables?Nesting?
Functions? Math?

13. SASS
Sass is the most mature, stable, and powerful
professional grade CSS extension language in the
world.!
http://sass-lang.com

14. HOW IT WORKS - DEV
YOU WRITE SASS / SCSS
IT CREATES CSS
IT WATCHES!
FOR CHANGES

15. HOW IT WORKS - PROD
YOU WRITE SASS / SCSS
COMPILE
IT CREATES CSS

16. NESTING
!
!
article li {
margin-right: 1em;
}
!
article a {
color: white;
background: red;
display: block;
}
!
article a:hover {
color: red;
background: white;
}
article {
!
li {
margin-right: 1em;
}
!
a {
color: white;
background: red;
display: block;
!
&:hover {
color: red;
background: white;
}
}
}

17. !
!
button {
background: #CE4DD6;
}
!
a {
color: #CE4DD6;
}
!
header {
border-bottom: 3px;
border-color: #CE4DD6;
}
$mainColor: #CE4DD6;
!
button {
background: $mainColor;
}
!
a {
color: $mainColor;
}
!
header {
border-bottom: 3px;
border-color: $mainColor;
}
VARIABLES

18. FUNCTIONS
button {
color: #CE4DD6;
}
!
button:hover {
color: #D76DDE;
}
button {
color: $mainColor;
}
!
button:hover {
color: saturate($mainColor, 10%);
}

19. MATH
!
!
#side {
width: 23.95833%;
margin: 2.08333%;
}
!
#main {
width: 47.91667%;
margin: 2.08333%;
}
!
#more {
width: 23.95833%;
}
$width: 960px;
!
#side {
width: percentage(230px / $width);
margin: percentage(10px / $width);
}
!
#main {
width: percentage(460px / $width);
margin: percentage(10px / $width);
}
!
#more {
width: percentage(230px / $width);
}

20. PARTIALS
// === site.scss ===
!
@import "normalize";
@import "fonts";
@import "mixins";
@import "headerFooter";
@import "helpers";
@import "forms";
…
…
…
@import "whatever";
(very long CSS file)
!html {
line-height:1;
}
!ol,ul {
list-style:none;
}
!table {
border-collapse:collapse;
border-spacing:0;
}
!caption,th,td {
text-align:left;
font-weight:400;
vertical-align:middle;
}
!q,blockquote {
quotes:none;
}
!q:before,q:after,blockquote:before,blockquote:after {
content:none;
}
!a img {
border:none;
}
!body {
font-family:Tahoma, sans-serif;
font-size:87.5%;
-webkit-text-size-adjust:none;
}
!h1,h2,h3,h4,h5,h6,#payoff {
line-height:1.5em;
}
!p {
margin-bottom:6px;
line-height:1.5em;
}
!abbr,acronym {
border-bottom:1px dotted #690;
cursor:help;
}
!#language,#loginMessage {
position:absolute;
}
!#content {
position:relative;
}
!#accountZone {
display:none;
float:right;
border-radius:10px;
}
!#accountZone li {
display:block;
float:left;
}
!#accountZone a {
display:block;
padding:8px 10px;
}
!#accountZone form,#accountZone #regeneratePwd {
float:left;
}
!#loginForm form {
padding:6px 10px 5px;
}
!#loginForm button {
font-size:91.66667%;
border:0;
background:#eee;
height:18px;
text-align:center;
width:auto;
box-shadow:inset 0 -2px 5px rgba(0,0,0,0.3);
margin:0;
}
!#loginForm input {
width:76px;
height:18px;
border:none;
font-size:100%;
outline:none;
box-shadow:inset 0 2px 5px rgba(0,0,0,0.3);
padding:0 2px;
}
!…
…
…
…
…

21. SASS 3 does all this
(and lots more)

22. It allows you to do
powerful operations!
using Mixins

23. It allows to choose the
output CSS style,
including Compressed

24. It can remove
comments you don't
want to publish
// this is a shameful hack

25. However, some
developers still don't like
it...

26. ...hard to debug?

27. COMPASS
Compass is an open-source CSS Authoring Framework.
Compass uses SASS.!
http://compass-style.org

28. COMPASS extends SASS
+ it gives you some
interesting features

29. Click on the file name:line to
view the CSS file inspector
to get the original SASS/SCSS
file name and line
1. IT'S EASY TO DEBUG!
Inspect the element you
want to debug
to get the CSS rules in
the inspector

30. 2. IT'S LOADED WITH
LOTS OF HELPERS &
PATTERNS
CSS3,Typography, Utilities (Reset,
Clearfix), Sticky Footer, and more

31. You just add the images, it
generates the sprite + gives you a
helper to use your images
3. IT MAKES CSS SPRITES

32. 3. IT MAKES CSS SPRITES
@import "compass/utilities/sprites";
!
@import “sponsors/*.png”; // windowsAzure.png, appDynamics.png …
!
#sponsor_section {
.sponsor1 {
@include sponsors-sprite(windowsAzure, true);
}
!
.sponsor2 {
@include sponsors-sprite(appDynamics, true);
}
}

33. #sponsor_section .sponsor1,
#sponsor_section .sponsor2,
#sponsor_section .sponsor3 {
background: url('../img/sponsors-s69e070e3f8.png') no-repeat;
}
!
#sponsor_section .sponsor1 {
background-position: 0 0;
height: 171px;
width: 457px;
}
!
#sponsor_section .sponsor2 {
background-position: 0 -356px;
height: 95px;
width: 373px;
}
3. IT MAKES CSS SPRITES

34. Resume

35. SASS
• Nesting!
• Variables!
• Functions!
• Math!
• Partials

36. • Easy debugging!
• Easy spriting!
• Lots of helpers
COMPASS

37. ORGANIZATION
• Better code organization!
• No code repetition (DRY)!
• Shorter files to manage!
• Much speeder coding

38. HOW TO INSTALL
• Download Ruby
rubyinstaller.org!
• Command prompt:
gem install compass
• Download Ruby
ruby-lang.com!
• Terminal:
sudo gem install
compass

39. HOW TO SETUP
• in terminal / command prompt
go to your project folder
cd {your/project/path}!
• create the scaffolding
compass install compass!
• start watching changes / creating CSS
compass watch

40. HOW TO START
• SCSS format is CSS compliant!
• You can start writing SCSS as if you were
writing CSS / Rename your CSS files in
SCSS!
• Start using variables and nesting!
• Organize your CSS code in partials!
• Do more complex things using mixins, etc.

41. SOME ADVICE
• Keep in mind that you’re still writing CSS,
always figure how your CSS will become!
• Avoid unnecessary nesting
(a maximum of 3 levels is often enough)!
• In continuous integration environments,
always run compass clean before compass
compile (especially if you use branches)

42. GIVE IT A TRY !
• It takes no more than 30 minutes to be
installed and learned!
• It's used by more and more front-end
developers and companies!
• It would improve your technical skills

43. twitter: verlok!
www.andreaverlicchi.eu

44. Q&A
@verlok #jsday