Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Using Sass - Building on CSS

Using Sass to code CSS

  • Identifiez-vous pour voir les commentaires

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

×