14
Sassify your Web Development By: Michelle Marin

Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Sassify yourWeb Development

By: Michelle Marin

Page 2: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

What’s Sass?

Page 3: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Other pre-processors out there

— less

— stylus

Page 4: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Possible Hurdles while CSSing

— search and replace night-mares

— repetition, repition, repition, repition, you get the gist

— omg, where was that one button #hex color?

Page 5: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

How Sass can make a life easier....— organized style sheets

— modularize your css

— use variables to change your color codes once

— more sanity

Page 6: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Using libraries— harness mixins libraries like bourbon.io

— harness responsive grid framework like neat

— all open source

Page 7: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Getting Started with SassDependencies:

— need to have Ruby installed before installing Sass

— You will also need to down-load and install Sass

Page 8: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Installing Sass Sasswith Application:

CodeKit (paid)Compass.app (Paid, open source)Scout (open source)

with Terminal:’gem install sass’

Page 9: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Variables$font-stack: Helvetica, sans-serif; $primary-color: #333;

body { font: 100% $font-stack; color: $primary-color; }

Page 10: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Nestingnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

Page 11: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

MixinsSCSS:@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }

.box { @include border-radius(10px); }

CSS output:.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Page 12: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

WP Starter Themes with SassSome like it neat https://github.com/digisavvy/some-like-it-neat

Genesis Sample https://github.com/gregrickaby/genesis-sample

Matt Banks starter https://github.com/mattbanks/WordPress-Starter-Theme

Page 13: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

Helpful Linkshttp://sass-lang.com/http://bourbon.io/http://sass-lang.com/implementation

Tools:iTerm (if you wish to install with Terminal) https://www.iterm2.com/

Ruby https://www.ruby-lang.org/en/downloads/

Homebrew http://brew.sh/

Node.js https://nodejs.org/en/

Page 14: Sassify your Web Development - WordCamp Miami …...Web Development By: Michelle Marin What’s Sass? Other pre-processors out there — less — stylus Possible Hurdles while CSSing

EndQuestions?