Advanced Sass & Compass

@onishiweb Advanced Sass & Compass

@onishiweb

@onishiweb Photo by Dan Goven: http://flic.kr/p/js7sdf

@onishiweb

@onishiweb http://sassnotsass.com/

@onishiweb Syntactically awesome style sheets

@onishiweb Sass vs LESS vs whatever

@onishiweb Nesting Variables Partials Importing Mixins (to a degree)

@onishiweb Compass

@onishiweb Compass vs Bourbon

@onishiweb Sass & Compass

@onishiweb sass input.scss output.css sass input.scss output.css

@onishiweb sass input.scss output.css sass --watch app/scss:public/css

@onishiweb sass input.scss output.css compass init # or compass create
[project]

@onishiweb /.sass-cache /sass /stylesheets /config.rb

@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

@onishiweb sass input.scss output.css compass compile # or compass watch

@onishiweb sass input.scss output.css compass watch &

@onishiweb CodeKit Compass.app Mixture Koala Hammer (Sass & Bourbon)

@onishiweb Grunt

@onishiweb Advanced Sass

@onishiweb @extend

@onishiweb sass input.scss output.css .foo, .bar { display:inline-block; color:#f0f; }

@onishiweb sass input.scss output.css .foo { display:inline-block; color:#f0f; } .bar
{ @extend .foo; }

@onishiweb sass input.scss output.css compass watch & .foo, .bar {
display:inline-block; color:#f0f; }

@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; }

@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

@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; }

@onishiweb Placeholders

@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); }

@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; }

@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

@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; }

@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

@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

@onishiweb Mixins

@onishiweb @onishiweb @mixin mixin-name( $param, $param ) { // Code
}

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

@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

@onishiweb @onishiweb h1 { @include rem('font-size', 22px); }

@onishiweb @onishiweb h1 { font-size:22px; font-size:1.375rem; }

@onishiweb @onishiweb @mixin content-mixin( $arg ) { @content; } //
usage @include content-mixin( true ) { h1 { color:pink; } }

@onishiweb Functions

@onishiweb @onishiweb @function function-name( $arg1, $arg2 ) { // Code
@return // Something; }

@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

@onishiweb Built-in Functions http://bit.ly/1mFbs1G

@onishiweb Lists

@onishiweb @onishiweb $empty-list: (); $spaced-list: 12px 14px 16px; $comma-list: red,
green, blue; $quoted-list: 'small' 'medium' 'large';

@onishiweb @onishiweb $breakpoints: ( 'small' 25em, 'medium' 35em, 'large' 62.5em
);

@onishiweb @onishiweb nth( $list, 1 ); length( $list ); index(
$list, $item ); append( $list, $item, $separator );

@onishiweb Loops

@onishiweb @onishiweb @for @while @each

@onishiweb @onishiweb $cols: 4; @for $i from 1 through $cols
{ .cols-#{$i} { width: ((100 / $columns) * $i) * 1%; } }

@onishiweb @onishiweb $cols: 4; @for $i from 1 to $cols
{ .cols-#{$i} { width: ((100 / $columns) * $i) * 1%; } }

@onishiweb @onishiweb $cols: 4; @while $cols > 0 { .cols-#{$cols}
{ width: 10px * $cols; } $cols: $cols - 2; }

@onishiweb @onishiweb $icons: success error warning; @each $icon in $icons
{ .icon-#{$icon} { background-image: url(/images/icons/ #{$icon}.png); } }

@onishiweb Conditionals

@onishiweb @onishiweb @if $value == true { // Do something
} @else { // Do something else }

@onishiweb @onishiweb // The if() function .foo { width: if($bar,
100%, 50%); }

@onishiweb Compass

@onishiweb CSS3 Mixins

@onishiweb @onishiweb .button { @include border-radius(); @include box-shadow(); @include text-shadow();
@include transition(); }

@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); }

@onishiweb @onishiweb @import 'compass/css3'; // OR @import 'compass/css3/transition';

@onishiweb Fonts

@onishiweb @onishiweb # Config file fonts_dir = "assets/fonts" http_fonts_path =
"../fonts" http_fonts_dir = "../fonts"

@onishiweb @onishiweb @import "compass/css3"; @include font-face("Blooming Grove", font- files("examples/bgrove.ttf", "examples/
bgrove.otf"));

@onishiweb @onishiweb @font-face { font-family: "Blooming Grove"; src: url('/fonts/examples/bgrove.ttf') format('truetype'),
url('/fonts/examples/bgrove.otf') format('opentype'); }

@onishiweb Compass Functions

@onishiweb Colours

@onishiweb @onishiweb adjust-lightness($color, $amount); adjust-saturation($color, $amount); scale-lightness($color, $amount); scale-saturation($color, $amount);
shade($color, $percentage); tint($color, $percentage);

@onishiweb Images

@onishiweb @onishiweb # Config file images_dir = "assets/images" http_generated_images_path =
"../images" http_images_path = "../images"

@onishiweb @onishiweb background-image: image-url('logo.png');

@onishiweb @onishiweb background-image:url('../images/logo.png');

@onishiweb @onishiweb .logo { width: image-width('logo.png'); height: image-height('logo.png'); background-image: image-url('logo.png');
}

@onishiweb Inline images

@onishiweb @onishiweb .logo { background-image:inline-image('12devslogo.png'); }

@onishiweb @onishiweb

@onishiweb Sprites

@onishiweb @onishiweb images/site-icons/new.png images/site-icons/edit.png images/site-icons/save.png images/site-icons/delete.png

@onishiweb @onishiweb @import "compass/utilities/sprites"; @import "site-icons/*.png"; @include all-site-icons-sprites;

@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; }

@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); } }

@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; }

@onishiweb Example(s)

@onishiweb Media Queries Mixins

@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/

@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

@onishiweb @onishiweb $breakpoints: ( 'small' 25em, // 400px 'medium' 35em,
// 560px 'large' 62.5em // 1000px );

@onishiweb @onishiweb @include breakpoint(medium) { // Code }

@onishiweb @onishiweb @include old-ie { // Code for IE only
}

@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

@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; } }

@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; }

@onishiweb Persil.co.uk

@onishiweb Lists and Loops

@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

@onishiweb

@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

@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

@onishiweb MASSIVE refactor upcoming!

@onishiweb Thanks!

Advanced Sass & Compass

Advanced Sass & Compass

More Decks by Adam Onishi

Other Decks in Programming

Featured

Transcript