SASS – style with attitude – Run commands through Compass

View Github Repository Open presentation in a new window

imjared

See all presentation from imjared

SASS – style with attitude – Run commands through Compass

0 0

sass-training

cause you don't want to be writing CSS anymore. trust me.

On Github imjared / sass-training

SASS

style with attitude

Why do we need a preprocessor?

  • CSS is getting cooler but it's still not a language
  • Editing styles.css doesn't scale Git history, stylesheet bloat, ⌘ + f isn't fun
  • Add logic
  • Easily minify
  • Delegate maintenance responsibilities

How to install

SASS is just a Ruby gem

$ gem install sass
$ gem install compass

Easy, right?

Run commands through Compass

$ compass create <projectname>

Configuration

/config.rb is the control panel for compass settings

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Additional Configuration

Compass offers a ton of of settings for you to configure: http://compass-style.org/help/tutorials/configuration-reference

Use variables in your SCSS

$red: #b75548;
a {
    color: $red;
}

compiles to:

a {
    color: #b75548;
}

functions rule, math sucks!

instead of pulling out your calculator...

$baseFont: 16;

body {
    font-size: 16px;
}

.content p {
    font-size: 0.8125em; /* 13px / 16px */
}
@function em($value, $context:$baseFont) {
    @return ($value / $context) * 1em;
}

.content p {
    font-size: em(13);
}

compiles to:

.content p {
    font-size: 0.8125em;
}

mixins

Sometimes (oftentimes) you want to repeat a set of styles

.content p {
    font-family: "Goudy Old Style", Garamond,
                 "Big Caslon", "Times New Roman", serif;
}

yeah, no thanks

$goudy: "Goudy Old Style", Garamond,
        "Big Caslon", "Times New Roman", serif;
@mixin fontSerif($weight:normal) {
    font-family: $goudy;
    font-weight: $weight;
}
.content p {
    @include fontSerif(700);
}

compiles to:

.content p {
    font-family: "Goudy Old Style", Garamond,
                 "Big Caslon", "Times New Roman", serif;
    font-weight: 700;
}

extends

.square {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
}

.circle {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
    border-radius: 100%;
}

extends continued... stay DRY

.square {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
}

.circle {
    @extend .square;
    border-radius: 100%;
}

compiles to:

.square, .circle {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
}

.cricle {
    border-radius: 100%;
}

silent extends

what if there's css we don't need?

.button {
    padding: 5px 20px;
    border: 1px solid #fff;
    font-family: "Helvetica", arial, sans-serif;
}

.button-orange {
    @extend .button;
    background: #ffbb6b;
}
%button {
    padding: 5px 20px;
    border: 1px solid #fff;
    font-family: "Helvetica", arial, sans-serif;
}

.button-orange {
    @extend %button;
    background: #ffbb6b;
}

let's get boss status

environments

configure compass output based on your environment needs

if environment == :development
  line_comments = true
  output_style = :expanded
  line_comments = false
end

if environment == :production
  line_comments = true
  output_style = :compressed
end

then fire off your compass task

compass compile -e production --force

partials

know what's not fun? http requests

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

also not fun? browsing 6,000 lines of css to edit one line

enter partials

no more imports, file lengths are manageable & names are descriptive. no css in sceen.scss

sass
├── component
│   ├── _columns.scss
│   └── _signup.scss
├── lib
│   ├── _animation.scss
│   ├── _carousel.scss
│   ├── _mediaQueries.scss
│   └── _normalize.scss
├── screen.scss
└── section
    ├── _faq.scss
    ├── _feedback.scss
    ├── _footer.scss
    └── _sidebar.scss
// utility / helper
@import "compass";
@import "modules/_defaults";
@import "modules/_helpers";

// libraries
@import "lib/_mediaQueries";
@import "lib/_normalize";

// components
@import "component/_layout";
@import "component/_navigation";

SASS helper functions

a {
    color: pink;
    a &:hover {
        color: darken(pink, 20%);
    }
}

did i mention?

i hate doing math

// layout
$siteWidth: 1000px;
$mainColumnWidth: 665px;
$mainColumnSpacing: 20px;

%column-left-of-two {
  width: $mainColumnWidth;
  padding: 0 $mainColumnSpacing 0 0;
  float: left;
}

// sidebar
%column-right-of-two {
  width: $siteWidth - ($mainColumnWidth + $mainColumnSpacing );
  float: left;
  padding: 0 0 0 $mainColumnSpacing;
}

flexible variables

don't be afraid to be verbose

$red: #ff0000;
a {
    color: $red;
}
.button {
    color: $red;
}
.container {
    border: 1px solid $red;
}

instead

// colors
$red: #ff0000;

// color reference
$mainAccent: $red;
a {
    color: $mainAccent;
}
.button {
    color: $mainAccent;
}
.container {
    border: 1px solid $mainAccent;
}

reference: http://sachagreif.com/sass-color-variables/

source maps

debugging can be awesome

recap

  • extensible
  • does work for you
  • constantly under development
  • use what you already know- can integrate nicely into existing workflow