Styling with SASS

Transcript

1. Building on CSS Tuesday, May 15, 12

2. www.sayan.ee code . explorer . speaker Tuesday, May 15, 12

3. code is poetry Tuesday, May 15, 12

4. code is poetry fast flexible fun Tuesday, May 15, 12

5. .css .sass .scss meta languages Tuesday, May 15, 12

6. .css .sass .scss meta languages .border { padding: 8px; margin:

   8px; } .border padding: $margin/2 margin: $margin/2 .border{ padding: $margin/ 2; margin: $margin/2; } Tuesday, May 15, 12

7. install ruby pre-installed ruby installer pre-installed rubygems download Tuesday, May

   15, 12

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

   sass Tuesday, May 15, 12

9. Tuesday, May 15, 12

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

    style.scss:style.css Tuesday, May 15, 12

11. code is poetry fast flexible fun Tuesday, May 15, 12

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

    no code indentation Tuesday, May 15, 12

13. fast nesting parenting operations Tuesday, May 15, 12

14. nesting header{ width:100%; clear:both; margin: 10px auto; background-color: #ABDAD4; }

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

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

    scale(0.7); -moz-transform: scale(0.7); } li{ float:left; margin:30px; &:nth-child(odd) { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); } } .css .scss Tuesday, May 15, 12

16. operations: + - / * % .main{ width:100%; } .sidebar{

    width:30%; } $length:100%; .main{ width: $length; } .sidebar{ width:$length*0.3; } .css .scss Tuesday, May 15, 12

17. flexible variables mixin import Tuesday, May 15, 12

18. variables .main{ background-color: #ABDAD4; } .main h1{ color: #007674; }

    .sidebar{ background-color: #ABDAD4; } .sidebar h2{ color: #007674; } $darkcolor:#007674; $lightcolor:#ABDAD4; .main{ background-color: $lightcolor; h1{ color: $darkcolor; } } .sidebar{ background-color: $lightcolor; h2{ color: $darkcolor; } } .css .scss Tuesday, May 15, 12

19. mixin header{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } @mixin

    rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } header{ @include rounded(10px); } .css .scss Tuesday, May 15, 12

20. import #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;

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

21. fun checking extensions compatibility Tuesday, May 15, 12

22. creating error messages change detection checking Tuesday, May 15, 12

23. creating error messages change detection checking Tuesday, May 15, 12

24. extensions Tuesday, May 15, 12

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

    Tuesday, May 15, 12

26. compatibility .scss .css pass on just the created .css file

    to any developer Tuesday, May 15, 12

27. :before 133 lines of code 25 lines of repeated code

    no code indentation :after 110 lines of code 0 lines of repeated code .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 Tuesday, May 15, 12

28. Resources - Install 1. gem install sass 2. windows ruby

    installer 3. install rubygems Resources - Sass 1. sass website 2. online editor 3. tutorial 4. documentation 5. compass with sass 6. the sass way - latest buzz 7. python compiler for scss 1. less css framework 2. scss vs. less wrangl 3. sass/less comparison 4. wrangl sass vs less Resources - Less css Tuesday, May 15, 12

29. Q? Tuesday, May 15, 12

30. @sayanee_ slides + codes Tuesday, May 15, 12