Reusable snippets.
Sass Mixins
@mixin my-custom-mixin {	
border: 1px solid $color;	
padding: $padding;	
}	
!
// Use your m...
Useful Mixins
@mixin font-primary {	
font-family: “Hip Web Font”, Arial, sans-serif;	
font-weight: 400;	
}	
!
// Use the m...
Useful Mixins + Variables
$color-primary: #FFCC00;	
@mixin font-primary {	
font-family: “Hip Web Font”, Arial, sans-serif;...
Sass/SCSS #framework
‣ First Sass-based framework
‣ Provides tons of mixins
‣ Supports plugins
4
I now can stop repeating myself. I now can stop repeating myself.
Compass Mixins
@include border-radius(...);	
@include bo...
Full of Sass.
Compass Modules
‣ CSS3
• Effects, Fonts, Content
‣ Typography
• Test, Links, Lists
‣ Utilities
• Sprites, Co...
7
Web Browser and/or Terminal Shell required
Debugging
// Debug compiled CSS w/Firefox + Firebug + FireSass	
environment = :...
Good looks are subjective.
Formatting
.standard {	
color: $dark;	
background-color: $light;	
}	
!
.spacey {	
color : $dark...
Shorthand code is harder to read.
Shortcuts
@mixin pretty-text {	
color: $dark;	
}	
!
a {	
@include light;	
}	
!
=pretty-t...
Upcoming SlideShare
Loading in …5
×

Sassy CSS (part 2) (Drupal Camp LA 2013)

194
-1

Published on

Sass for CSS

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
194
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sassy CSS (part 2) (Drupal Camp LA 2013)

  1. 1. Reusable snippets. Sass Mixins @mixin my-custom-mixin { border: 1px solid $color; padding: $padding; } ! // Use your mixin over and over again .element { @include my-custom-mixin; } 1
  2. 2. Useful Mixins @mixin font-primary { font-family: “Hip Web Font”, Arial, sans-serif; font-weight: 400; } ! // Use the mixin over and over again .element { @include font-primary; } 2
  3. 3. Useful Mixins + Variables $color-primary: #FFCC00; @mixin font-primary { font-family: “Hip Web Font”, Arial, sans-serif; font-weight: 400; } ! // Use the mixin over and over again .element { @include font-primary; color: $color-primary; } 3
  4. 4. Sass/SCSS #framework ‣ First Sass-based framework ‣ Provides tons of mixins ‣ Supports plugins 4
  5. 5. I now can stop repeating myself. I now can stop repeating myself. Compass Mixins @include border-radius(...); @include box-shadow(...); @include text-shadow(...); @include scale(...); @include rotate(...); @include transform2d(...); @include transform3d(...); 5
  6. 6. Full of Sass. Compass Modules ‣ CSS3 • Effects, Fonts, Content ‣ Typography • Test, Links, Lists ‣ Utilities • Sprites, Color, Print, Tables ‣ Layout* ‣ Reset* 6 CSS Compass Sass
  7. 7. 7
  8. 8. Web Browser and/or Terminal Shell required Debugging // Debug compiled CSS w/Firefox + Firebug + FireSass environment = :development firesass = true ! // Debug dynamic Sass using @debug function div { @debug $anything + 1px; } 8
  9. 9. Good looks are subjective. Formatting .standard { color: $dark; background-color: $light; } ! .spacey { color : $dark; background-color : $light; } 9
  10. 10. Shorthand code is harder to read. Shortcuts @mixin pretty-text { color: $dark; } ! a { @include light; } ! =pretty-text { color: $dark; } ! a { +light; } 10

×