Using Sass - Building on CSS

1,720 views
1,546 views

Published on

Using Sass to code CSS

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,720
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Using Sass - Building on CSS

    1. 1. Building on CSS
    2. 2. www. sayan.ee code . explorer . speaker
    3. 3. code is poetry
    4. 4. code is poetry fast flexible fun
    5. 5. meta languages.css .sass .scss
    6. 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. 7. install pre-installed ruby installer pre-installed ruby downloadrubygems
    8. 8. install pre-installed ruby installer pre-installed ruby downloadrubygems gem
install
sass
    9. 9. $
cd
stylesheet‐folder‐or‐path$
mv
style.css
style.scss
$
sass
‐‐watch
style.scss:style.css
    10. 10. code is poetry fast flexible fun
    11. 11. :before 133 lines of code 25 lines of repeated code no code indentation
    12. 12. fastnesting parenting operations
    13. 13. 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; } } }
    14. 14. 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); } } }
    15. 15. operations: + - / * % .css .scss .main{ $length:100%; width:100%; } .main{ width: $length; .sidebar{ } width:30%; } .sidebar{ width:$length*0.3; }
    16. 16. flexiblevariables mixin import
    17. 17. 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; } } }
    18. 18. mixin .css .scssheader{ @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); }
    19. 19. 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); }
    20. 20. funchecking extensions compatibility
    21. 21. checking change detection error messages creating
    22. 22. checking change detection error messages creating
    23. 23. extensions
    24. 24. compatibility .scss .css every valid CSS3 stylesheet is valid SCSS
    25. 25. compatibility .scss .css pass on just the created .css file to any developer
    26. 26. :before :after133 lines of code 110 lines of code25 lines of repeated code 0 lines of repeated codeno 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
    27. 27. Resources - Install Resources - Sass1. gem install sass 1. sass website2. windows ruby installer 2. online editor3. 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
    28. 28. Q?
    29. 29. @sayanee_ slides + codes

    ×