SlideShare a Scribd company logo
k o m mu n ik at ion & sys teme




Sass & Compass
    Eine kurze Vorstellung
ko mm u n i k ati o n & s ys te m e




                                                   Sass.
                                      Syntactically Awesome Stylesheets




                                             Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                      •       Ein „CSS Compiler“Sass.
                      • Erweitert CSS mit dem was uns fehlt
                      • Verbessert Wart- und Lesbarkeit
                      • Bietet zwei verschiedene Syntaxen

                                          Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                      Installation und Benutzung
                                      $ gem update --system
                                      $ gem install sass

                                      $ mv style.css style.scss

                                      $ sass --watch style.scss:style.css




                                               Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                        2 Syntaxen
                       Sassy CSS (.scss)                           Indented Syntax (.sass)

                   .content-navigation {                                 .content-navigation
                       border-color: #3bbfce;                                border-color: #3bbfce
                       color: #2ca2af;                                       color: #2ca2af
                   }
                                                                         .border
                   .border {                                                 padding: 8px
                       padding: 8px;                                         margin: 8px
                       margin: 8px;                                          border-color: #3bbfce
                       border-color: #3bbfce;
                   }



                                        Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                                Variablen
                                      scss                                                    css
                       $blue: #3bbfce;                                              .content-navigation {
                       $margin: 16px;                                                   border-color: #3bbfce;
                                                                                    }
                       .content-navigation {
                           border-color: $blue;                                     .border {
                       }                                                                padding: 8px;
                                                                                        margin: 8px;
                       .border {                                                        border-color: #3bbfce;
                           padding: $margin / 2;                                    }
                           margin: $margin / 2;
                           border-color: $blue;
                       }


                                             Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                      Verschachtelungen
                                      scss                                                    css
                       table.hl {                                                   table.hl {
                         margin: 2em 0;                                               margin: 2em 0;
                         td.ln {                                                    }
                           text-align: right;                                       table.hl td.ln {
                         }                                                            text-align: right;
                       }                                                            }

                       li {                                                         li {
                         font: {                                                      font-family: serif;
                            family: serif;                                            font-weight: bold;
                            weight: bold;                                             font-size: 1.2em;
                            size: 1.2em;                                            }
                         }
                       }
                                             Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                               Vererbung
                                      scss                                                     css
                       .error {                                                      .error, .badError {
                         border: 1px #f00;                                             border: 1px #f00;
                         background: #fdd;                                             background: #fdd;
                       }                                                             }
                       .error.intrusion {
                         font-size: 1.3em;                                           .error.intrusion,
                         font-weight: bold;                                          .badError.intrusion {
                       }                                                               font-size: 1.3em;
                                                                                       font-weight: bold;
                       .badError {                                                   }
                         @extend .error;
                         border-width: 3px;                                          .badError { border-width: 3px; }
                       }
                                              Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                      Mixins & Funktionen
                                      scss                                                    css
                       @mixin table-base {                                          #data {
                         th {                                                         color: #2ca2af;
                           text-align: center;                                      }
                           Font-weight: bold;                                       #data th {
                         }                                                            text-align: center;
                         td, th {padding: 2px}                                        font-weight: bold;
                       }                                                            }
                                                                                    #data td, #data th {
                       #data {                                                        padding: 2px;
                         color: darken(#3bbfce, 9%);                                }
                         @include table-base;
                       }


                                             Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                      Kontrollstrukturen
                                      scss                                                    css
                       @for $i from 1 through 3 {                                   .item-1 {
                         .item-#{$i} {                                                width: 2em;
                           width: 2em * $i;                                         }
                         }                                                          .item-2 {
                       }                                                              width: 4em;
                                                                                    }
                                                                                    .item-3 {
                                                                                      width: 6em;
                                                                                    }




                                             Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                              An open source CSS Authoring Framework




                                        Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                      • Basiert auf SASS
                      • Bringt eine Menge Mixins mit
                      • Erweitert SASS mit einer Plugin-Schnittstelle
                      • Definierte Konfiguration eines Projektes

                                      Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                      Installation und Benutzung
                    $ gem update --system
                    $ gem install compass

                    $ compass create <myproject> --using blueprint

                    $ compass --watch




                                      Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                Konfiguration: config.rb
                                # Get the directory that this configuration file exists in
                                dir = File.dirname(__FILE__)

                                # Compass configurations
                                sass_path = dir
                                css_path = File.join(dir, "..", "public", "styles")
                                environment = :production
                                output_style = :compressed




                                                Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                  Einzeiler: Runde Ecken
                                      scss                                                    css
                                                                                    .content-box {
                  .content-box {
                                                                                      -webkit-border-radius: 4px;
                      @include border-radius(4px);
                                                                                      -moz-border-radius: 4px;
                  }
                                                                                      -o-border-radius: 4px;
                                                                                      -ms-border-radius: 4px;
                                                                                      -khtml-border-radius: 4px;
                                                                                      border-radius: 4px;
                                                                                    }




                                             Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                          Compass Module Imports

                      • CSS Reset
                              @import "compass/reset"


                      • Sticky Footer
                              @import "compass/layout/sticky-footer"

                              @include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-
                              footer")




                                               Einstieg SVN – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                       Sprites generieren
                                  dateien                                                     css
                  public/images/icon/edit.png                        .icon-edit, .icon-delete {
                  public/images/icon/delete.png                        background: url('/images/icon-s34f.png');
                                                                       background-repeat: no-repeat;
                                                                     }

                                                                     .icon-delete {
                                      scss                           }
                                                                       background-position: 0 0;

                                                                     .icon-edit {
                  @import "icon/*.png";
                                                                       background-position: 0 -32px;
                  @include all-icon-sprites;
                                                                     }



                                             Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                      Viel Spass!



                                      Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                      Slides online ansehen




                                      http://slidesha.re/nVbwel
                                           Sass & Compass – ©2011 Michael van Engelshoven
ko mm u n i k ati o n & s ys te m e




                                                               Quellen

                      •       SASS – Syntactically Awesome Stylesheets
                              http://sass-lang.com/

                      •       Compass is an open-source CSS Authoring Framework
                              http://compass-style.org/

                      •       Using Compass and Sass for CSS in your Next Project
                              http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/




                                                         Sass & Compass – ©2011 Michael van Engelshoven

More Related Content

Viewers also liked

Медицинская клиника
Медицинская клиникаМедицинская клиника
Медицинская клиника
Ingenium Бизнес
 
Lak13: Observing Media Literacies in Facebook Data
Lak13: Observing Media Literacies in Facebook DataLak13: Observing Media Literacies in Facebook Data
Lak13: Observing Media Literacies in Facebook Data
June Ahn
 
Facebook101 presentation
Facebook101 presentationFacebook101 presentation
Facebook101 presentation
marketingdivaz
 
Sokol 2010
Sokol 2010Sokol 2010
Sokol 2010
jannaa
 
Analyses of the Watershed Transform
Analyses of the Watershed TransformAnalyses of the Watershed Transform
Analyses of the Watershed Transform
CSCJournals
 
ANSYS Performance on Xeon E5-2600 v3
ANSYS Performance on Xeon E5-2600 v3ANSYS Performance on Xeon E5-2600 v3
ANSYS Performance on Xeon E5-2600 v3
Ansys
 
My first tvOS
My first tvOSMy first tvOS
My first tvOS
toyship
 
8 марта
8 марта 8 марта
8 марта
Evgeny Shakurov
 
інформаційна безпека в бездротових мережах Wi fi
інформаційна безпека в бездротових мережах Wi fiінформаційна безпека в бездротових мережах Wi fi
інформаційна безпека в бездротових мережах Wi fi
Evgeny Shakurov
 
watchOS2 tips
watchOS2 tipswatchOS2 tips
watchOS2 tips
Motoki Narita
 
Stages of fea in cad environment
Stages of fea in cad environmentStages of fea in cad environment
Stages of fea in cad environment
rashmi322
 
Restaurent
RestaurentRestaurent
Restaurent
Yueh-shu Li
 
The Blockchain and JavaScript
The Blockchain and JavaScriptThe Blockchain and JavaScript
The Blockchain and JavaScript
Portia Burton
 
InfluxDataのTICK Stack on DockerでNW監視
InfluxDataのTICK Stack on DockerでNW監視 InfluxDataのTICK Stack on DockerでNW監視
InfluxDataのTICK Stack on DockerでNW監視
Akihiko Horiuchi
 
HRACC 5 Star Hotel Design Requirements,India
HRACC 5 Star Hotel Design Requirements,IndiaHRACC 5 Star Hotel Design Requirements,India
HRACC 5 Star Hotel Design Requirements,India
Abdur Rahman M S
 
Anchal presentation
Anchal presentationAnchal presentation
Anchal presentation
memymyself
 

Viewers also liked (16)

Медицинская клиника
Медицинская клиникаМедицинская клиника
Медицинская клиника
 
Lak13: Observing Media Literacies in Facebook Data
Lak13: Observing Media Literacies in Facebook DataLak13: Observing Media Literacies in Facebook Data
Lak13: Observing Media Literacies in Facebook Data
 
Facebook101 presentation
Facebook101 presentationFacebook101 presentation
Facebook101 presentation
 
Sokol 2010
Sokol 2010Sokol 2010
Sokol 2010
 
Analyses of the Watershed Transform
Analyses of the Watershed TransformAnalyses of the Watershed Transform
Analyses of the Watershed Transform
 
ANSYS Performance on Xeon E5-2600 v3
ANSYS Performance on Xeon E5-2600 v3ANSYS Performance on Xeon E5-2600 v3
ANSYS Performance on Xeon E5-2600 v3
 
My first tvOS
My first tvOSMy first tvOS
My first tvOS
 
8 марта
8 марта 8 марта
8 марта
 
інформаційна безпека в бездротових мережах Wi fi
інформаційна безпека в бездротових мережах Wi fiінформаційна безпека в бездротових мережах Wi fi
інформаційна безпека в бездротових мережах Wi fi
 
watchOS2 tips
watchOS2 tipswatchOS2 tips
watchOS2 tips
 
Stages of fea in cad environment
Stages of fea in cad environmentStages of fea in cad environment
Stages of fea in cad environment
 
Restaurent
RestaurentRestaurent
Restaurent
 
The Blockchain and JavaScript
The Blockchain and JavaScriptThe Blockchain and JavaScript
The Blockchain and JavaScript
 
InfluxDataのTICK Stack on DockerでNW監視
InfluxDataのTICK Stack on DockerでNW監視 InfluxDataのTICK Stack on DockerでNW監視
InfluxDataのTICK Stack on DockerでNW監視
 
HRACC 5 Star Hotel Design Requirements,India
HRACC 5 Star Hotel Design Requirements,IndiaHRACC 5 Star Hotel Design Requirements,India
HRACC 5 Star Hotel Design Requirements,India
 
Anchal presentation
Anchal presentationAnchal presentation
Anchal presentation
 

Sass und Compass

  • 1. k o m mu n ik at ion & sys teme Sass & Compass Eine kurze Vorstellung
  • 2. ko mm u n i k ati o n & s ys te m e Sass. Syntactically Awesome Stylesheets Einstieg SVN – ©2011 Michael van Engelshoven
  • 3. ko mm u n i k ati o n & s ys te m e • Ein „CSS Compiler“Sass. • Erweitert CSS mit dem was uns fehlt • Verbessert Wart- und Lesbarkeit • Bietet zwei verschiedene Syntaxen Einstieg SVN – ©2011 Michael van Engelshoven
  • 4. ko mm u n i k ati o n & s ys te m e Installation und Benutzung $ gem update --system $ gem install sass $ mv style.css style.scss $ sass --watch style.scss:style.css Einstieg SVN – ©2011 Michael van Engelshoven
  • 5. ko mm u n i k ati o n & s ys te m e 2 Syntaxen Sassy CSS (.scss) Indented Syntax (.sass) .content-navigation { .content-navigation border-color: #3bbfce; border-color: #3bbfce color: #2ca2af; color: #2ca2af } .border .border { padding: 8px padding: 8px; margin: 8px margin: 8px; border-color: #3bbfce border-color: #3bbfce; } Sass & Compass – ©2011 Michael van Engelshoven
  • 6. ko mm u n i k ati o n & s ys te m e Variablen scss css $blue: #3bbfce; .content-navigation { $margin: 16px; border-color: #3bbfce; } .content-navigation { border-color: $blue; .border { } padding: 8px; margin: 8px; .border { border-color: #3bbfce; padding: $margin / 2; } margin: $margin / 2; border-color: $blue; } Sass & Compass – ©2011 Michael van Engelshoven
  • 7. ko mm u n i k ati o n & s ys te m e Verschachtelungen scss css table.hl { table.hl { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right; } } li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; font-size: 1.2em; size: 1.2em; } } } Sass & Compass – ©2011 Michael van Engelshoven
  • 8. ko mm u n i k ati o n & s ys te m e Vererbung scss css .error { .error, .badError { border: 1px #f00; border: 1px #f00; background: #fdd; background: #fdd; } } .error.intrusion { font-size: 1.3em; .error.intrusion, font-weight: bold; .badError.intrusion { } font-size: 1.3em; font-weight: bold; .badError { } @extend .error; border-width: 3px; .badError { border-width: 3px; } } Sass & Compass – ©2011 Michael van Engelshoven
  • 9. ko mm u n i k ati o n & s ys te m e Mixins & Funktionen scss css @mixin table-base { #data { th { color: #2ca2af; text-align: center; } Font-weight: bold; #data th { } text-align: center; td, th {padding: 2px} font-weight: bold; } } #data td, #data th { #data { padding: 2px; color: darken(#3bbfce, 9%); } @include table-base; } Sass & Compass – ©2011 Michael van Engelshoven
  • 10. ko mm u n i k ati o n & s ys te m e Kontrollstrukturen scss css @for $i from 1 through 3 { .item-1 { .item-#{$i} { width: 2em; width: 2em * $i; } } .item-2 { } width: 4em; } .item-3 { width: 6em; } Sass & Compass – ©2011 Michael van Engelshoven
  • 11. ko mm u n i k ati o n & s ys te m e An open source CSS Authoring Framework Sass & Compass – ©2011 Michael van Engelshoven
  • 12. ko mm u n i k ati o n & s ys te m e • Basiert auf SASS • Bringt eine Menge Mixins mit • Erweitert SASS mit einer Plugin-Schnittstelle • Definierte Konfiguration eines Projektes Einstieg SVN – ©2011 Michael van Engelshoven
  • 13. ko mm u n i k ati o n & s ys te m e Installation und Benutzung $ gem update --system $ gem install compass $ compass create <myproject> --using blueprint $ compass --watch Einstieg SVN – ©2011 Michael van Engelshoven
  • 14. ko mm u n i k ati o n & s ys te m e Konfiguration: config.rb # Get the directory that this configuration file exists in dir = File.dirname(__FILE__) # Compass configurations sass_path = dir css_path = File.join(dir, "..", "public", "styles") environment = :production output_style = :compressed Einstieg SVN – ©2011 Michael van Engelshoven
  • 15. ko mm u n i k ati o n & s ys te m e Einzeiler: Runde Ecken scss css .content-box { .content-box { -webkit-border-radius: 4px; @include border-radius(4px); -moz-border-radius: 4px; } -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } Sass & Compass – ©2011 Michael van Engelshoven
  • 16. ko mm u n i k ati o n & s ys te m e Compass Module Imports • CSS Reset @import "compass/reset" • Sticky Footer @import "compass/layout/sticky-footer" @include sticky-footer(54px, "#my-root", "#my-root-footer", "#my- footer") Einstieg SVN – ©2011 Michael van Engelshoven
  • 17. ko mm u n i k ati o n & s ys te m e Sprites generieren dateien css public/images/icon/edit.png .icon-edit, .icon-delete { public/images/icon/delete.png background: url('/images/icon-s34f.png'); background-repeat: no-repeat; } .icon-delete { scss } background-position: 0 0; .icon-edit { @import "icon/*.png"; background-position: 0 -32px; @include all-icon-sprites; } Sass & Compass – ©2011 Michael van Engelshoven
  • 18. ko mm u n i k ati o n & s ys te m e Viel Spass! Sass & Compass – ©2011 Michael van Engelshoven
  • 19. ko mm u n i k ati o n & s ys te m e Slides online ansehen http://slidesha.re/nVbwel Sass & Compass – ©2011 Michael van Engelshoven
  • 20. ko mm u n i k ati o n & s ys te m e Quellen • SASS – Syntactically Awesome Stylesheets http://sass-lang.com/ • Compass is an open-source CSS Authoring Framework http://compass-style.org/ • Using Compass and Sass for CSS in your Next Project http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/ Sass & Compass – ©2011 Michael van Engelshoven