Slide 1
Slide 1 text
@onishiweb
Advanced Sass
& Compass
Slide 2
Slide 2 text
@onishiweb
Slide 3
Slide 3 text
@onishiweb
Photo by Dan Goven: http://flic.kr/p/js7sdf
Slide 4
Slide 4 text
@onishiweb
Slide 5
Slide 5 text
@onishiweb
Slide 6
Slide 6 text
@onishiweb
http://sassnotsass.com/
Slide 7
Slide 7 text
@onishiweb
Syntactically awesome
style sheets
Slide 8
Slide 8 text
@onishiweb
Sass vs LESS
vs whatever
Slide 9
Slide 9 text
@onishiweb
Nesting
Variables
Partials
Importing
Mixins (to a degree)
Slide 10
Slide 10 text
@onishiweb
Compass
Slide 11
Slide 11 text
@onishiweb
Compass vs Bourbon
Slide 12
Slide 12 text
@onishiweb
Sass & Compass
Slide 13
Slide 13 text
@onishiweb
sass input.scss output.css
sass input.scss output.css
Slide 14
Slide 14 text
@onishiweb
sass input.scss output.css
sass --watch app/scss:public/css
Slide 15
Slide 15 text
@onishiweb
sass input.scss output.css
compass init
# or
compass create [project]
Slide 16
Slide 16 text
@onishiweb
/.sass-cache
/sass
/stylesheets
/config.rb
Slide 17
Slide 17 text
@onishiweb
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden
via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions.
Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of
your selectors. Uncomment:
# line_comments = false
@onishiweb
Slide 18
Slide 18 text
@onishiweb
sass input.scss output.css
compass compile
# or
compass watch
Slide 19
Slide 19 text
@onishiweb
sass input.scss output.css
compass watch &
Slide 20
Slide 20 text
@onishiweb
CodeKit
Compass.app
Mixture
Koala
Hammer (Sass & Bourbon)
Slide 21
Slide 21 text
@onishiweb
Grunt
Slide 22
Slide 22 text
@onishiweb
Advanced Sass
Slide 23
Slide 23 text
@onishiweb
@extend
Slide 24
Slide 24 text
@onishiweb
sass input.scss output.css
.foo, .bar {
display:inline-block;
color:#f0f;
}
Slide 25
Slide 25 text
@onishiweb
sass input.scss output.css
.foo {
display:inline-block;
color:#f0f;
}
.bar { @extend .foo; }
Slide 26
Slide 26 text
@onishiweb
sass input.scss output.css
compass watch &
.foo, .bar {
display:inline-block;
color:#f0f;
}
Slide 27
Slide 27 text
@onishiweb
sass input.scss output.css
compass watch &
.button {
display:inline-block;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.article .button {
background-color:green;
}
.product .button {
background-color:blue;
}
Slide 28
Slide 28 text
@onishiweb
.button {
display:inline-block;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.article .button {
background-color:green;
}
.product .button {
background-color:blue;
}
.foo { @extend .button; }
@onishiweb
Slide 29
Slide 29 text
@onishiweb
sass input.scss output.css
compass watch &
.button, .foo {
display: block;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.article .button, .article .foo {
background-color: green;
}
.product .button, .product .foo {
background-color: blue;
}
Slide 30
Slide 30 text
@onishiweb
Placeholders
Slide 31
Slide 31 text
@onishiweb
sass input.scss output.css
compass watch &
%button {
display:inline-block;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
Slide 32
Slide 32 text
@onishiweb
sass input.scss output.css
compass watch &
.button {
display:inline-block;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.article .button {
background-color:green;
}
.product .button {
background-color:blue;
}
Slide 33
Slide 33 text
@onishiweb
.button,
%button {
display:inline-block;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.article .button {
background-color:green;
}
.product .button {
background-color:blue;
}
.foo { @extend %button; }
@onishiweb
Extending Silent Classes in Sass: http://bit.ly/1dT2K9x
Slide 34
Slide 34 text
@onishiweb
sass input.scss output.css
compass watch &
.button,
.foo {
display: block;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.article .button {
background-color: green;
}
.product .button {
background-color: blue;
}
Slide 35
Slide 35 text
@onishiweb
.button,
%button {
display:inline-block;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.article .button {
background-color:green;
}
.product .button {
background-color:blue;
}
.foo { @extend %button; }
@onishiweb
Slide 36
Slide 36 text
@onishiweb
%clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
%hide-text {
display:block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
@onishiweb
Slide 37
Slide 37 text
@onishiweb
Mixins
Slide 38
Slide 38 text
@onishiweb
@onishiweb
@mixin mixin-name( $param, $param ) {
// Code
}
Slide 39
Slide 39 text
@onishiweb
@onishiweb
@mixin border-radius( $radius ) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
Slide 40
Slide 40 text
@onishiweb
@onishiweb
@mixin rem($property, $px-values, $baseline-px: $base-font-size) {
// Convert the baseline into rems
$baseline-rem: $baseline-px / 1rem;
// Create an empty list that we can dump values into
$rem-values: ();
@each $value in $px-values {
// If the value is zero, return 0
$rem-values: append($rem-values, if($value == 0, $value, $value /
$baseline-rem));
}
// Output the property's px and rem values
#{$property}: $px-values;
#{$property}: $rem-values;
}
Ben Scott REM mixin: http://bit.ly/1ka4FYT
Slide 41
Slide 41 text
@onishiweb
@onishiweb
h1 {
@include rem('font-size', 22px);
}
Slide 42
Slide 42 text
@onishiweb
@onishiweb
h1 {
font-size:22px;
font-size:1.375rem;
}
Slide 43
Slide 43 text
@onishiweb
@onishiweb
@mixin content-mixin( $arg ) {
@content;
}
// usage
@include content-mixin( true ) {
h1 {
color:pink;
}
}
Slide 44
Slide 44 text
@onishiweb
Functions
Slide 45
Slide 45 text
@onishiweb
@onishiweb
@function function-name( $arg1, $arg2 ) {
// Code
@return // Something;
}
Slide 46
Slide 46 text
@onishiweb
@onishiweb
@function get-list-value($haystack, $needle) {
@each $haystack-item in $haystack {
@if $needle == nth($haystack-item, 1) {
@return nth($haystack-item, 2);
}
}
@return false;
}
Ben Scott Breakup: https://github.com/bpscott/breakup
Slide 47
Slide 47 text
@onishiweb
Built-in Functions
http://bit.ly/1mFbs1G
Slide 48
Slide 48 text
@onishiweb
Lists
Slide 49
Slide 49 text
@onishiweb
@onishiweb
$empty-list: ();
$spaced-list: 12px 14px 16px;
$comma-list: red, green, blue;
$quoted-list: 'small' 'medium' 'large';
Slide 50
Slide 50 text
@onishiweb
@onishiweb
$breakpoints: (
'small' 25em,
'medium' 35em,
'large' 62.5em
);
Slide 51
Slide 51 text
@onishiweb
@onishiweb
nth( $list, 1 );
length( $list );
index( $list, $item );
append( $list, $item, $separator );
Slide 52
Slide 52 text
@onishiweb
Loops
Slide 53
Slide 53 text
@onishiweb
@onishiweb
@for
@while
@each
Slide 54
Slide 54 text
@onishiweb
@onishiweb
$cols: 4;
@for $i from 1 through $cols {
.cols-#{$i} {
width: ((100 / $columns) * $i) * 1%;
}
}
Slide 55
Slide 55 text
@onishiweb
@onishiweb
$cols: 4;
@for $i from 1 to $cols {
.cols-#{$i} {
width: ((100 / $columns) * $i) * 1%;
}
}
Slide 56
Slide 56 text
@onishiweb
@onishiweb
$cols: 4;
@while $cols > 0 {
.cols-#{$cols} {
width: 10px * $cols;
}
$cols: $cols - 2;
}
Slide 57
Slide 57 text
@onishiweb
@onishiweb
$icons: success error warning;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(/images/icons/
#{$icon}.png);
}
}
Slide 58
Slide 58 text
@onishiweb
Conditionals
Slide 59
Slide 59 text
@onishiweb
@onishiweb
@if $value == true {
// Do something
} @else {
// Do something else
}
Slide 60
Slide 60 text
@onishiweb
@onishiweb
// The if() function
.foo {
width: if($bar, 100%, 50%);
}
Slide 61
Slide 61 text
@onishiweb
Compass
Slide 62
Slide 62 text
@onishiweb
CSS3 Mixins
Slide 63
Slide 63 text
@onishiweb
@onishiweb
.button {
@include border-radius();
@include box-shadow();
@include text-shadow();
@include transition();
}
Slide 64
Slide 64 text
@onishiweb
@onishiweb
.button {
@include border-radius(8px);
@include box-shadow(0 0 5px rgba(#000, 0.5));
@include text-shadow(#ccc 1px 1px 0);
@include transition(color 0.3s ease-out);
}
Slide 65
Slide 65 text
@onishiweb
@onishiweb
@import 'compass/css3';
// OR
@import 'compass/css3/transition';
Slide 66
Slide 66 text
@onishiweb
Fonts
Slide 67
Slide 67 text
@onishiweb
@onishiweb
# Config file
fonts_dir = "assets/fonts"
http_fonts_path = "../fonts"
http_fonts_dir = "../fonts"
Slide 68
Slide 68 text
@onishiweb
@onishiweb
@import "compass/css3";
@include font-face("Blooming Grove", font-
files("examples/bgrove.ttf", "examples/
bgrove.otf"));
Slide 69
Slide 69 text
@onishiweb
@onishiweb
@font-face {
font-family: "Blooming Grove";
src: url('/fonts/examples/bgrove.ttf')
format('truetype'),
url('/fonts/examples/bgrove.otf')
format('opentype');
}
Slide 70
Slide 70 text
@onishiweb
Compass Functions
Slide 71
Slide 71 text
@onishiweb
Colours
Slide 72
Slide 72 text
@onishiweb
@onishiweb
adjust-lightness($color, $amount);
adjust-saturation($color, $amount);
scale-lightness($color, $amount);
scale-saturation($color, $amount);
shade($color, $percentage);
tint($color, $percentage);
Slide 73
Slide 73 text
@onishiweb
Images
Slide 74
Slide 74 text
@onishiweb
@onishiweb
# Config file
images_dir = "assets/images"
http_generated_images_path = "../images"
http_images_path = "../images"
Slide 75
Slide 75 text
@onishiweb
@onishiweb
background-image: image-url('logo.png');
Slide 76
Slide 76 text
@onishiweb
@onishiweb
background-image:url('../images/logo.png');
Slide 77
Slide 77 text
@onishiweb
@onishiweb
.logo {
width: image-width('logo.png');
height: image-height('logo.png');
background-image: image-url('logo.png');
}
Slide 78
Slide 78 text
@onishiweb
Inline images
Slide 79
Slide 79 text
@onishiweb
@onishiweb
.logo {
background-image:inline-image('12devslogo.png');
}
Slide 80
Slide 80 text
@onishiweb
@onishiweb
Slide 81
Slide 81 text
@onishiweb
Sprites
Slide 82
Slide 82 text
@onishiweb
@onishiweb
images/site-icons/new.png
images/site-icons/edit.png
images/site-icons/save.png
images/site-icons/delete.png
Slide 83
Slide 83 text
@onishiweb
@onishiweb
@import "compass/utilities/sprites";
@import "site-icons/*.png";
@include all-site-icons-sprites;
Slide 84
Slide 84 text
@onishiweb
@onishiweb
.site-icons-sprite,
.site-icons-delete,
.site-icons-edit,
.site-icons-new,
.site-icons-save { background: url('/images/site-
icons-s34fe0604ab.png') no-repeat; }
.site-icons-delete { background-position: 0 0; }
.site-icons-edit { background-position: 0 -32px; }
.site-icons-new { background-position: 0 -64px; }
.site-icons-save { background-position: 0 -96px; }
Slide 85
Slide 85 text
@onishiweb
@onishiweb
.site-icons-sprite,
.site-icons-delete,
.site-icons-edit,
.site-icons-new,
.site-icons-save { background: url('/images/site-
icons-s34fe0604ab.png') no-repeat; }
.site-icons-delete { background-position: 0 0; }
.site-icons-edit { background-position: 0 -32px; }
.site-icons-new { background-position: 0 -64px; }
.site-icons-save { background-position: 0 -96px; }
Slide 86
Slide 86 text
@onishiweb
@onishiweb
@import "site-icons/*.png";
.actions {
.new { @include site-icons-sprite(new); }
.edit { @include site-icons-sprite(edit); }
.save { @include site-icons-sprite(save); }
.delete { @include site-icons-sprite(delete); }
}
Slide 87
Slide 87 text
@onishiweb
@onishiweb
.site-icons-sprite,
.site-icons-delete,
.site-icons-edit,
.site-icons-new,
.site-icons-save { background: url('/images/site-
icons-s34fe0604ab.png') no-repeat; }
.site-icons-delete { background-position: 0 0; }
.site-icons-edit { background-position: 0 -32px; }
.site-icons-new { background-position: 0 -64px; }
.site-icons-save { background-position: 0 -96px; }
Slide 88
Slide 88 text
@onishiweb
Example(s)
Slide 89
Slide 89 text
@onishiweb
Media Queries Mixins
Slide 90
Slide 90 text
@onishiweb
@mixin breakpoint($point) {
// Get the width of the query based on the passed $point variable
$width: get-list-value($breakpoints, $point);
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $fix-mqs >= $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media screen and (min-width: $width) {
@content;
}
}
}
@onishiweb
http://jakearchibald.github.io/sass-ie/
Slide 91
Slide 91 text
@onishiweb
@onishiweb
@function get-list-value($haystack, $needle) {
@each $haystack-item in $haystack {
@if $needle == nth($haystack-item, 1) {
@return nth($haystack-item, 2);
}
}
@return false;
}
Ben Scott Breakup: https://github.com/bpscott/breakup
Slide 92
Slide 92 text
@onishiweb
@onishiweb
$breakpoints: (
'small' 25em, // 400px
'medium' 35em, // 560px
'large' 62.5em // 1000px
);
Slide 93
Slide 93 text
@onishiweb
@onishiweb
@include breakpoint(medium) {
// Code
}
Slide 94
Slide 94 text
@onishiweb
@onishiweb
@include old-ie {
// Code for IE only
}
Slide 95
Slide 95 text
@onishiweb
.content-container {
margin-top:50px; // was causing bug on mobile devices
@include breakpoint(large) {
max-width:90em; // 1440px (because the padding is included in
box-sizing) 71.25em;
margin-top:0;
padding:0;
padding-left:300px;
position:relative;
}
@include old-ie {
width:1000px;
padding-left:0;
margin-left:300px;
}
}
@onishiweb
Slide 96
Slide 96 text
@onishiweb
@onishiweb
// style.css
.content-container {
margin-top: 50px;
}
@media screen and (min-width: 62.5em) {
.content-container {
max-width: 90em;
margin-top: 0;
padding: 0;
padding-left: 300px;
position: relative;
}
}
Slide 97
Slide 97 text
@onishiweb
@onishiweb
// ie.css
.content-container {
margin-top: 50px;
max-width: 90em;
margin-top: 0;
padding: 0;
padding-left: 300px;
position: relative;
width: 1000px;
padding-left: 0;
margin-left: 300px;
}
Slide 98
Slide 98 text
@onishiweb
Persil.co.uk
Slide 99
Slide 99 text
@onishiweb
Lists and Loops
Slide 100
Slide 100 text
@onishiweb
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/wp-content/themes/persil"
sass_dir = "build/scss/core"
images_dir = "public/wp-content/themes/persil/images"
javascripts_dir = "build/js"
http_generated_images_path = "images"
http_images_path = "images"
# You can select your preferred output style here (can be overridden via the command
line):
output_style = (environment == :production) ? :compressed : :expanded
#output_style = :compressed :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors.
Uncomment:
line_comments = false
@onishiweb
Slide 101
Slide 101 text
@onishiweb
Slide 102
Slide 102 text
@onishiweb
li.menu-item-pink {
&.current-menu-item a,
&.current-menu-parent a { color:$clr-pink; background-
color:transparent; }
a:hover,
&.current-menu-item > a:hover,
&.current-menu-parent > a:hover,
&.active > a {
color:#fff;
background-color:$clr-pink;
}
.sub-menu li a {
border-top-color:$clr-pink;
background-color:$clr-pink-hover;
&:hover { background-color:$clr-pink-hover; }
}
}
@onishiweb
Slide 103
Slide 103 text
@onishiweb
$navigation-items: (
'menu-item-pink' $clr-pink,
'menu-item-green' $clr-green,
'menu-item-orange' $clr-orange,
);
@each $item in $navigation-items {
$menu-class: nth($item, 1);
$color: nth($item, 2);
.#{$menu-class} {
&.current-menu-item a { color: $color; }
a:hover { color: shade($color, 10%); }
}
}
@onishiweb
Slide 104
Slide 104 text
@onishiweb
MASSIVE refactor upcoming!
Slide 105
Slide 105 text
@onishiweb
Thanks!