0
Compass & Sass
What’s that?
Contents
•

Why I have to use Compass and Sass?

•

Sass & Scss

•

Controle directives

•

Rules and directives

•

Mixin...
Why I need to use
Compass?
•

Framework CSS

•

CSS3

•

Browsers compatibility

•

Cleaner markup

•

Best reusable patte...
Sass & Scss
Sass (old)

$blue: #3bbfce

!

.content-navigation
border-color: $blue
color: darken($blue, 9%)

Scss (new)

$...
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

Director...
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...
Write your own custom
mixins
@mixin button($backgroundColor, $color){
background-color: $backgroundColor;
color: $color;
m...
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

•

Javascrip...
Bottom
•

Three days of development

•

Using compass

•

NPM Package

•

Command Line Interface

•

https://github.com/to...
Upcoming SlideShare
Loading in...5
×

Compass & sass

331

Published on

All you need to know about Compass and Sass.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "Compass & sass"

  1. 1. Compass & Sass What’s that?
  2. 2. 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
  3. 3. Why I need to use Compass? • Framework CSS • CSS3 • Browsers compatibility • Cleaner markup • Best reusable patterns
  4. 4. 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%); }
  5. 5. Controle directives • @for • @if • @each • @while
  6. 6. Rules and directives • @media • @screen • @extend • @debug • @warn
  7. 7. Mixin directives • Compass mixins • Create your own mixins • Rewrite a compass mixin
  8. 8. Function directives • Create your own function like a mixin but with a return value
  9. 9. 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
  10. 10. Good practices • Files structure • Write your own custom mixins • Nest selectors, but not too much
  11. 11. 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”;
  12. 12. Write your own custom mixins @mixin button($backgroundColor, $color){ background-color: $backgroundColor; color: $color; margin: 0; padding: 0; @include border-radius(5px); }
  13. 13. Nest selectors, but not too much • Up to 5 • On per wrap component
  14. 14. Foundation • Front-End Framework • Compass project • Concurrent to Bootstrap • Easy to use • Design • Javascript components
  15. 15. Bottom • Three days of development • Using compass • NPM Package • Command Line Interface • https://github.com/tonymx227/bottom
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×