Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adam Onishi - Advanched Sass & Compass

37c9be2b8243603ba229f59947cb50b5?s=47 Hey! Presents
February 27, 2014

Adam Onishi - Advanched Sass & Compass

Presented at Hey!Stac #7 on 25th February, 2014.

37c9be2b8243603ba229f59947cb50b5?s=128

Hey! Presents

February 27, 2014
Tweet

More Decks by Hey! Presents

Other Decks in Technology

Transcript

  1. @onishiweb Advanced Sass & Compass

  2. @onishiweb

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

  4. @onishiweb

  5. @onishiweb

  6. @onishiweb http://sassnotsass.com/

  7. @onishiweb Syntactically awesome style sheets

  8. @onishiweb Sass vs LESS vs whatever

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

  10. @onishiweb Compass

  11. @onishiweb Compass vs Bourbon

  12. @onishiweb Sass & Compass

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

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

  15. @onishiweb sass input.scss output.css compass init # or compass create

    [project]
  16. @onishiweb /.sass-cache /sass /stylesheets /config.rb

  17. @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
  18. @onishiweb sass input.scss output.css compass compile # or compass watch

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

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

  21. @onishiweb Grunt

  22. @onishiweb Advanced Sass

  23. @onishiweb @extend

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

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

    { @extend .foo; }
  26. @onishiweb sass input.scss output.css compass watch & .foo, .bar {

    display:inline-block; color:#f0f; }
  27. @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; }
  28. @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
  29. @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; }
  30. @onishiweb Placeholders

  31. @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); }
  32. @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; }
  33. @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
  34. @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; }
  35. @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
  36. @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
  37. @onishiweb Mixins

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

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

    $radius; border-radius: $radius; }
  40. @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
  41. @onishiweb @onishiweb h1 { @include rem('font-size', 22px); }

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

  43. @onishiweb @onishiweb @mixin content-mixin( $arg ) { @content; } //

    usage @include content-mixin( true ) { h1 { color:pink; } }
  44. @onishiweb Functions

  45. @onishiweb @onishiweb @function function-name( $arg1, $arg2 ) { // Code

    @return // Something; }
  46. @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
  47. @onishiweb Built-in Functions http://bit.ly/1mFbs1G

  48. @onishiweb Lists

  49. @onishiweb @onishiweb $empty-list: (); $spaced-list: 12px 14px 16px; $comma-list: red,

    green, blue; $quoted-list: 'small' 'medium' 'large';
  50. @onishiweb @onishiweb $breakpoints: ( 'small' 25em, 'medium' 35em, 'large' 62.5em

    );
  51. @onishiweb @onishiweb nth( $list, 1 ); length( $list ); index(

    $list, $item ); append( $list, $item, $separator );
  52. @onishiweb Loops

  53. @onishiweb @onishiweb @for @while @each

  54. @onishiweb @onishiweb $cols: 4; @for $i from 1 through $cols

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

    { .cols-#{$i} { width: ((100 / $columns) * $i) * 1%; } }
  56. @onishiweb @onishiweb $cols: 4; @while $cols > 0 { .cols-#{$cols}

    { width: 10px * $cols; } $cols: $cols - 2; }
  57. @onishiweb @onishiweb $icons: success error warning; @each $icon in $icons

    { .icon-#{$icon} { background-image: url(/images/icons/ #{$icon}.png); } }
  58. @onishiweb Conditionals

  59. @onishiweb @onishiweb @if $value == true { // Do something

    } @else { // Do something else }
  60. @onishiweb @onishiweb // The if() function .foo { width: if($bar,

    100%, 50%); }
  61. @onishiweb Compass

  62. @onishiweb CSS3 Mixins

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

    @include transition(); }
  64. @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); }
  65. @onishiweb @onishiweb @import 'compass/css3'; // OR @import 'compass/css3/transition';

  66. @onishiweb Fonts

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

    "../fonts" http_fonts_dir = "../fonts"
  68. @onishiweb @onishiweb @import "compass/css3"; @include font-face("Blooming Grove", font- files("examples/bgrove.ttf", "examples/

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

    url('/fonts/examples/bgrove.otf') format('opentype'); }
  70. @onishiweb Compass Functions

  71. @onishiweb Colours

  72. @onishiweb @onishiweb adjust-lightness($color, $amount); adjust-saturation($color, $amount); scale-lightness($color, $amount); scale-saturation($color, $amount);

    shade($color, $percentage); tint($color, $percentage);
  73. @onishiweb Images

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

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

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

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

    }
  78. @onishiweb Inline images

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

  80. @onishiweb @onishiweb

  81. @onishiweb Sprites

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

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

  84. @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; }
  85. @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; }
  86. @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); } }
  87. @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; }
  88. @onishiweb Example(s)

  89. @onishiweb Media Queries Mixins

  90. @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/
  91. @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
  92. @onishiweb @onishiweb $breakpoints: ( 'small' 25em, // 400px 'medium' 35em,

    // 560px 'large' 62.5em // 1000px );
  93. @onishiweb @onishiweb @include breakpoint(medium) { // Code }

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

    }
  95. @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
  96. @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; } }
  97. @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; }
  98. @onishiweb Persil.co.uk

  99. @onishiweb Lists and Loops

  100. @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
  101. @onishiweb

  102. @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
  103. @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
  104. @onishiweb MASSIVE refactor upcoming!

  105. @onishiweb Thanks!