Compass & sass
Upcoming SlideShare
Loading in...5
×
 

Compass & sass

on

  • 418 views

All you need to know about Compass and Sass.

All you need to know about Compass and Sass.

Statistics

Views

Total Views
418
Views on SlideShare
418
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Compass & sass Compass & sass Presentation Transcript

  • Compass & Sass What’s that?
  • Contents • Why I have to use Compass and Sass? • Sass & Scss • Controle directives • Rules and directives • Mixin directives • Function directives • Configuration file • Good practices • Foundation • Bottom
  • Why I need to use Compass? • Framework CSS • CSS3 • Browsers compatibility • Cleaner markup • Best reusable patterns View slide
  • Sass & Scss Sass (old) $blue: #3bbfce ! .content-navigation border-color: $blue color: darken($blue, 9%) Scss (new) $blue: #3bbfce; ! .content-navigation { border-color: $blue; color: darken($blue, 9%); } View slide
  • Controle directives • @for • @if • @each • @while
  • Rules and directives • @media • @screen • @extend • @debug • @warn
  • Mixin directives • Compass mixins • Create your own mixins • Rewrite a compass mixin
  • Function directives • Create your own function like a mixin but with a return value
  • Configuration file • Output style (output_style) • • :nested (default) • :compressed • • :expanded :compact Directories • • css_dir • sass_dir • images_dir • • http_path javascripts_dir Line comments (line_comments) • true • false
  • Good practices • Files structure • Write your own custom mixins • Nest selectors, but not too much
  • Files structure /projectname /sass /projectname /components _header.scss _section.scss _footer.scss _mixins.scss _settings.scss app.scss /images /stylesheets /javascripts app.scss @import “projectname/header”, “projectname/section”, “projectname/footer”;
  • Write your own custom mixins @mixin button($backgroundColor, $color){ background-color: $backgroundColor; color: $color; margin: 0; padding: 0; @include border-radius(5px); }
  • Nest selectors, but not too much • Up to 5 • On per wrap component
  • Foundation • Front-End Framework • Compass project • Concurrent to Bootstrap • Easy to use • Design • Javascript components
  • Bottom • Three days of development • Using compass • NPM Package • Command Line Interface • https://github.com/tonymx227/bottom