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

Adam Onishi - Advanched Sass & Compass

Hey! Presents
February 27, 2014

Adam Onishi - Advanched Sass & Compass

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

Hey! Presents

February 27, 2014
Tweet

More Decks by Hey! Presents

Other Decks in Technology

Transcript

  1. @onishiweb
    Advanced Sass
    & Compass

    View Slide

  2. @onishiweb

    View Slide

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

    View Slide

  4. @onishiweb

    View Slide

  5. @onishiweb

    View Slide

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

    View Slide

  7. @onishiweb
    Syntactically awesome
    style sheets

    View Slide

  8. @onishiweb
    Sass vs LESS
    vs whatever

    View Slide

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

    View Slide

  10. @onishiweb
    Compass

    View Slide

  11. @onishiweb
    Compass vs Bourbon

    View Slide

  12. @onishiweb
    Sass & Compass

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. @onishiweb
    Grunt

    View Slide

  22. @onishiweb
    Advanced Sass

    View Slide

  23. @onishiweb
    @extend

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  30. @onishiweb
    Placeholders

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  37. @onishiweb
    Mixins

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. @onishiweb
    Functions

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  48. @onishiweb
    Lists

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. @onishiweb
    Loops

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. @onishiweb
    Conditionals

    View Slide

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

    View Slide

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

    View Slide

  61. @onishiweb
    Compass

    View Slide

  62. @onishiweb
    CSS3 Mixins

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. @onishiweb
    Fonts

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  70. @onishiweb
    Compass Functions

    View Slide

  71. @onishiweb
    Colours

    View Slide

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

    View Slide

  73. @onishiweb
    Images

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  78. @onishiweb
    Inline images

    View Slide

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

    View Slide

  80. @onishiweb
    @onishiweb

    View Slide

  81. @onishiweb
    Sprites

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. @onishiweb
    Example(s)

    View Slide

  89. @onishiweb
    Media Queries Mixins

    View Slide

  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/

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  98. @onishiweb
    Persil.co.uk

    View Slide

  99. @onishiweb
    Lists and Loops

    View Slide

  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

    View Slide

  101. @onishiweb

    View Slide

  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

    View Slide

  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

    View Slide

  104. @onishiweb
    MASSIVE refactor upcoming!

    View Slide

  105. @onishiweb
    Thanks!

    View Slide