Tweet
Tweet

Slide 1

Slide 1 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. SASS & COMPASS: NEVER WRITE REGULAR CSS AGAIN by Trevor Davis at RefreshDC on July , 

Slide 2

Slide 2 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. @trevor_davis HI! I’M I work as a Front-End Developer at Viget. TREVOR DAVIS

Slide 3

Slide 3 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. I. What are Sass & Compass II. How to install III. How to get started IV. Sass Syntax V. Compass Features WHAT WE WILL COVER

Slide 4

Slide 4 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. A QUICK MESSAGE ABOUT OTHER CSS “GENERATORS”

Slide 5

Slide 5 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. I WAS INITIALLY VERY OPPOSED TO SASS

Slide 6

Slide 6 text

arrestedstills.tumblr.com CREDITS I’VE MADE A HUGE MISTAKE.

Slide 7

Slide 7 text

WHAT ARE SASS & COMPASS

Slide 8

Slide 8 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Ruby gems ‎ Sass is a CSS preprocessor ‎ Compass is a framework that uses Sass ‎ Generates regular CSS files WHAT ARE SASS & COMPASS

Slide 9

Slide 9 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. HOW DO THEY WORK

Slide 10

Slide 10 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ "Watch" for changes to a file or folder ‎ If anything changes, regenerates new CSS file(s) HOW DO THEY WORK

Slide 11

Slide 11 text

HOW TO INSTALL

Slide 12

Slide 12 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ As long as your system has Ruby installed, very simple: gem install sass gem install compass HOW TO INSTALL

Slide 13

Slide 13 text

HOW TO GET STARTED

Slide 14

Slide 14 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Almost no reason to not use Sass on every project that requires CSS. ‎ Almost no reason to use Sass and not Compass. Compass adds additional functionality without any downside. ‎ Rails project vs non-rails project HOW TO GET STARTED

Slide 15

Slide 15 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. STANDALONE PROJECTS

Slide 16

Slide 16 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ compass create ‎ Creates all the files and folders you need ‎ config.rb ‎ sass ‎ stylesheets STANDALONE PROJECTS

Slide 17

Slide 17 text

# config.rb http_path = "/" css_dir = "stylesheets/" sass_dir = "compile/sass" images_dir = "images/" © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 18

Slide 18 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Create a sass or scss file in your sass_dir. ‎ compass watch on the command line ‎ Add CSS to this file, and it will auto generate a CSS file in your css_dir STANDALONE PROJECTS

Slide 19

Slide 19 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. LIVERELOAD

Slide 20

Slide 20 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. CODEKIT

Slide 21

Slide 21 text

SASS SYNTAX

Slide 22

Slide 22 text

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

Slide 23

Slide 23 text

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Slide 24

Slide 24 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. NESTING

Slide 25

Slide 25 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ I used to hate nesting, but I have learned to really love it. ‎ It's not something you HAVE to use. ‎ Be careful that you don't go too far because the code can get sloppy and hard to read. NESTING

Slide 26

Slide 26 text

.nav  background: #000; li  float: left;  a  color: #fff;   © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 27

Slide 27 text

.nav { background: #000; } .nav li { float: left; } .nav a { color: #fff; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 28

Slide 28 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. WITH GREAT POWER COMES GREAT RESPONSIBILITY.

Slide 29

Slide 29 text

.nav { ul { li { a { span { color: #fff } } } } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 30

Slide 30 text

.nav ul li a span { color: white; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 31

Slide 31 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. PARENT REFERENCES

Slide 32

Slide 32 text

a { color: red; &:hover { color: blue; text-decoration: underline; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 33

Slide 33 text

a { color: red; } a:hover { color: blue; text-decoration: underline; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 34

Slide 34 text

img { display: block; .lte7 & { -ms-interpolation-mode: bicubic; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 35

Slide 35 text

img { display: block; } .lte7 img { -ms-interpolation-mode: bicubic; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 36

Slide 36 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. VARIABLES

Slide 37

Slide 37 text

$linkColor: #ce4dd6; a { color: $linkColor; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 38

Slide 38 text

a { color: #ce4dd6; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 39

Slide 39 text

$side: top; .bordered-#{$side} { border-#{$side}: 1px solid green; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 40

Slide 40 text

.bordered-top { border-top: 1px solid green; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 41

Slide 41 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. OPERATIONS

Slide 42

Slide 42 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ The standard math operations (+, -, *, /, and %) are supported for numbers, even those with units. ‎ For colors, there are all sorts of useful functions for changing the lightness, hue, saturation, and more. OPERATIONS

Slide 43

Slide 43 text

$col: 100px; .main { width: $col * 6; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 44

Slide 44 text

.main { width: 600px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 45

Slide 45 text

.box { background: rgba(#000, 0.5); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 46

Slide 46 text

.box { background: rgba(0, 0, 0, 0.5); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 47

Slide 47 text

a { color: #000; &:hover { color: lighten(#000, 30%); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 48

Slide 48 text

a { color: #000; } a:hover { color: #4d4d4d; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 49

Slide 49 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. MIXINS

Slide 50

Slide 50 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Functions ‎ Reuse styles without having to duplicate. ‎ Make your code DRY. MIXINS

Slide 51

Slide 51 text

@mixin box-highlight() { background: green; border: 1px solid red; padding: 20px; width: 100%; } .call-out { @include box-highlight(); color: yellow; } .special-box { @include box-highlight(); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 52

Slide 52 text

.call-out { background: green; border: 1px solid red; padding: 20px; width: 100%; color: yellow; } .special-box { background: green; border: 1px solid red; padding: 20px; width: 100%; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 53

Slide 53 text

@mixin section($background: #000, $color: #fff, $radius: 10px) { background: $background; border-radius: $radius; color: $color; padding: 20px; } .section-1 { @include section(); } .section-2 { @include section(#cecece, #000, 5px); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 54

Slide 54 text

.section-1 { background: black; border-radius: 10px; color: white; padding: 20px; } .section-2 { background: #cecece; border-radius: 5px; color: black; padding: 20px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 55

Slide 55 text

@mixin shadowed() { overflow: hidden; position: relative; h2 { font-size: 36px; } &:before { box-shadow: 0 0 10px rgba(#000, 0.5); content: ""; height: 20px; left: 10px; position: absolute; right: 10px; top: -20px; } } .section { @include shadowed(); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 56

Slide 56 text

.section { overflow: hidden; position: relative; } .section h2 { font-size: 36px; } .section:before { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); content: ""; height: 20px; left: 10px; position: absolute; right: 10px; top: -20px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 57

Slide 57 text

@mixin respond-to($media) { @if $media == small-and-under { @media only screen and (max-width: 479px) { @content; } } @else if $media == medium { @media only screen and (min-width: 480px) and (max-width: 767px) { @content; } } @else if $media == full { @media only screen and (min-width: 1000px) { @content; } } } .some-thing { width: 800px; @include respond-to(medium) { width: 100%; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 58

Slide 58 text

.some-thing { width: 800px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .some-thing { width: 100%; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 59

Slide 59 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. EXTEND

Slide 60

Slide 60 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Kinda like mixins, but also kinda not. ‎ Replacement for mixins with no parameters. ‎ Extend only works for single elements ‎ Not possible: @extend .nav a EXTEND

Slide 61

Slide 61 text

.box-highlight { background: green; border: 1px solid red; padding: 20px; width: 100%; } .highlight { @extend .box-highlight; color: yellow; } .another-highlight { @extend .box-highlight; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 62

Slide 62 text

.box-highlight, .highlight, .another-highlight { background: green; border: 1px solid red; padding: 20px; width: 100%; } .highlight { color: yellow; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 63

Slide 63 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. “SILENT” EXTENDS

Slide 64

Slide 64 text

%font-georgia { color: #666; font-family: Georgia; font-style: italic; } .heading { @extend %font-georgia; } .footnote { @extend %font-georgia; font-style: normal; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 65

Slide 65 text

.heading, .footnote { color: #666; font-family: Georgia; font-style: italic; } .footnote { font-style: normal; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 66

Slide 66 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. LOOPS

Slide 67

Slide 67 text

$col: 100px; $gutter: 20px; @for $i from 1 through 5 { .span-#{$i} { width: ($i * $col) + ($gutter * ($i - 1)); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 68

Slide 68 text

.span-1 { width: 100px; } .span-2 { width: 220px; } .span-3 { width: 340px; } .span-4 { width: 460px; } .span-5 { width: 580px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 69

Slide 69 text

@each $service in twitter, facebook, linkedin, flickr { .#{$service} { background-image: url(/images/icons/#{$service}.png); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 70

Slide 70 text

.twitter { background-image: url(/images/icons/twitter.png); } .facebook { background-image: url(/images/icons/facebook.png); } .linkedin { background-image: url(/images/icons/linkedin.png); } .flickr { background-image: url(/images/icons/flickr.png); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 71

Slide 71 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. IMPORT

Slide 72

Slide 72 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Break your css into multiple files ‎ Sass combines into a single file ‎ No extra HTTP requests IMPORT

Slide 73

Slide 73 text

# _forms.scss input { background: #dedede; border: 1px solid #000; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 74

Slide 74 text

# _buttons.scss button { background: #000; color: #fff; padding: 5px 10px; text-transform: uppercase; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 75

Slide 75 text

# all.scss @import "forms"; @import "buttons"; © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 76

Slide 76 text

# all.css input { background: #dedede; border: 1px solid #000; } button { background: #000; color: #fff; padding: 5px 10px; text-transform: uppercase; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 77

Slide 77 text

COMPASS FEATURES

Slide 78

Slide 78 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Compass gives you a whole bunch of prebuilt mixins to use. ‎ Import all of the CSS3 mixins ‎ @import "compass/css3"; ‎ Then you can use those mixins just like you would any other mixin. COMPASS FEATURES

Slide 79

Slide 79 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. BUILT-IN MIXINS

Slide 80

Slide 80 text

.rounded-box { @include border-radius(10px); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 81

Slide 81 text

.rounded-box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 82

Slide 82 text

.gradient { @include background-image(linear-gradient(#fff, #ccc)); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 83

Slide 83 text

.gradient { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff ), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(#ffffff, #cccccc); background-image: -moz-linear-gradient(#ffffff, #cccccc); background-image: -o-linear-gradient(#ffffff, #cccccc); background-image: -ms-linear-gradient(#ffffff, #cccccc); background-image: linear-gradient(#ffffff, #cccccc); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 84

Slide 84 text

.rotate-me { @include rotate(30deg); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 85

Slide 85 text

.rotate-me { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 86

Slide 86 text

.three-columns { @include column-count(3); @include column-rule(1px dotted #000); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 87

Slide 87 text

.three-columns { -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; column-count: 3; -webkit-column-rule: 1px dotted black; -moz-column-rule: 1px dotted black; -o-column-rule: 1px dotted black; column-rule: 1px dotted black; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 88

Slide 88 text

.transition-me { background: red; @include transition(background 0.5s ease-in-out); &:hover { background: green; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 89

Slide 89 text

.transition-me { background: red; -webkit-transition: background 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out; -ms-transition: background 0.5s ease-in-out; -o-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; } .transition-me:hover { background: green; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 90

Slide 90 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ box-shadow ‎ font-face ‎ background-size ‎ and many more! ‎ compass-style.org/reference/compass/css3/ MANY MORE MIXINS

Slide 91

Slide 91 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. SPRITING

Slide 92

Slide 92 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Compass can automatically combine images, create sprites, and update your CSS. ‎ It's pretty amazing. SPRITING

Slide 93

Slide 93 text

$icons-spacing: 20px; @import "icons/*.png"; .twitter @include icons-sprite(twitter); } .facebook @include icons-sprite(facebook); } .linkedin @include icons-sprite(linkedin); } .flickr @include icons-sprite(flickr); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 94

Slide 94 text

$icons-spacing: 20px; @import "icons/*.png"; @each $service in twitter, facebook, linkedin, flickr { .#{$service} { @include icons-sprite(#{$service}); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 95

Slide 95 text

.icons-sprite, .twitter, .facebook, .linkedin, .flickr { background: url('/images/icons-s589c2b097f.png') no-repeat; } .twitter { background-position: 0 -75px; } .facebook { background-position: 0 -223px; } .linkedin { background-position: 0 0; } .flickr { background-position: 0 -149px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 96

Slide 96 text

$icons-spacing: 20px; @import "icons/*.png"; @each $service in twitter, facebook, linkedin, flickr { .#{$service} { @include icons-sprite(#{$service}, $offset-x: 10px, $offset-y: 10px); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 97

Slide 97 text

.twitter { background-position: 10px -65px; } .facebook { background-position: 10px -213px; } .linkedin { background-position: 10px 10px; } .flickr { background-position: 10px -139px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.

Slide 98

Slide 98 text

DEMO TIME CREDITS arrestedstills.tumblr.com

Slide 99

Slide 99 text

© Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. Sass: sass-lang.com Compass: compass-style.org Github Repo: git.io/5piz6Q LiveReload: livereload.com Codekit: incident57.com/codekit web: trevordavis.net twitter: @trevor_davis Thanks! Let’s Connect Resources