Styling with SASS

Transcript

1. Building on CSS
   Tuesday, May 15, 12
   

   View Slide

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

   View Slide

3. code is poetry
   Tuesday, May 15, 12
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

8. install
   ruby
   pre-installed ruby installer pre-installed
   rubygems
   download
   gem install sass
   Tuesday, May 15, 12
   

   View Slide

9. Tuesday, May 15, 12
   

   View Slide

10. $ cd stylesheet-folder-or-path
    $ mv style.css style.scss
    $ sass --watch style.scss:style.css
    Tuesday, May 15, 12
    

    View Slide

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

    View Slide

12. :before
    133 lines of code
    25 lines of repeated code
    no code indentation
    Tuesday, May 15, 12
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. extensions
    Tuesday, May 15, 12
    

    View Slide

25. compatibility
    .scss
    .css
    every valid CSS3 stylesheet is valid SCSS
    Tuesday, May 15, 12
    

    View Slide

26. compatibility
    .scss .css
    pass on just the created .css file to any developer
    Tuesday, May 15, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. Q?
    Tuesday, May 15, 12
    

    View Slide

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

    View Slide