Using Sass to code CSS

1. Building on CSS

2. www. sayan.ee
code . explorer . speaker

3. code is poetry

4. code is poetry
fast flexible fun

5. meta languages
.css .sass .scss

6. meta languages
.css .sass .scss
.border { .border .border{
padding: 8px; padding: $margin/2 padding: $margin/2;
margin: 8px; margin: $margin/2 margin: $margin/2;
} }

7. install
pre-installed ruby installer pre-installed
ruby
download
rubygems

8. install
pre-installed ruby installer pre-installed
ruby
download
rubygems
gem install sass

10. $ cd stylesheet‐folder‐or‐path
$ mv style.css style.scss
$ sass ‐‐watch style.scss:style.css

11. code is poetry
fast flexible fun

12. :before
133 lines of code
25 lines of repeated code
no code indentation

13. fast
nesting parenting operations

14. nesting
.css .scss
header{ header{
width:100%; width:100%;
clear:both; clear:both;
margin: 10px auto; margin: 10px auto;
background-color: #ABDAD4; background-color: #ABDAD4;
}
h1{
header h1{ text-align: center;
text-align: center; line-height:100px;
line-height:100px; color:#007674;
color:#007674; }
} }

15. parenting for pseudo-classes
.css .scss
li{ li{
float:left; float:left;
margin:30px; margin:30px;
}
&:nth-child(odd) {
li:nth-child(odd) { -webkit-transform: scale(0.7);
-webkit-transform: scale(0.7); -moz-transform: scale(0.7);
-moz-transform: scale(0.7); }
} }

16. operations: + - / * %
.css .scss
.main{ $length:100%;
width:100%;
} .main{
width: $length;
.sidebar{ }
width:30%;
} .sidebar{
width:$length*0.3;
}

17. flexible
variables mixin import

18. variables
.css .scss
.main{ $darkcolor:#007674;
background-color: #ABDAD4; $lightcolor:#ABDAD4;
}
.main{
.main h1{ background-color: $lightcolor;
color: #007674; h1{
} color: $darkcolor;
}
.sidebar{ }
background-color: #ABDAD4;
} .sidebar{
background-color: $lightcolor;
.sidebar h2{ h2{
color: #007674; color: $darkcolor;
} }
}

19. mixin
.css .scss
header{ @mixin rounded($radius){
-webkit-border-radius: 10px; -webkit-border-radius: $radius;
-moz-border-radius: 10px; -moz-border-radius: $radius;
border-radius: 10px; border-radius: $radius;
} }
header{
@include rounded(10px);
}

20. import
.css .scss
#navbar li { /* _rounded.scss */
border-top-radius: 10px;
-moz-border-radius-top: 10px; @mixin rounded($side, $radius: 10px) {
-webkit-border-top-radius: 10px; } border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
#footer { -webkit-border-#{$side}-radius: $radius;
border-top-radius: 5px; }
-moz-border-radius-top: 5px;
-webkit-border-top-radius: 5px; }
/* style.scss */
#sidebar {
border-left-radius: 8px; @import "rounded";
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px; } #navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

21. fun
checking extensions compatibility

22. checking
change detection
error messages
creating

23. checking
change detection
error messages
creating

24. extensions

25. compatibility
.scss
.css
every valid CSS3 stylesheet is valid SCSS

26. compatibility
.scss .css
pass on just the created .css file to any developer

27. :before :after
133 lines of code 110 lines of code
25 lines of repeated code 0 lines of repeated code
no code indentation .css automatic code indentation
.css file for future development
_partial.scss for future code reuse
faster code changes with dynamism
.scss compatible with .css codes

28. Resources - Install Resources - Sass
1. gem install sass 1. sass website
2. windows ruby installer 2. online editor
3. install rubygems 3. tutorial
4. documentation
5. compass with sass
6. the sass way - latest buzz
7. python compiler for scss
Resources - Less css
1. less css framework
2. scss vs. less wrangl
3. sass/less comparison
4. wrangl sass vs less

29. Q?

30. @sayanee_
slides + codes