For Newbies

Welsh Frontend Developer

based in Brighton

Hugo Darby-Brown

@darbybrown

What is Sass?

Sass is a CSS pre-processor.

Compiled at build time

Why use Sass?

What advantages are there over using vanilla CSS

Partials

@import "base.scss";
@import "layout.scss";
@import "modules/media.scss";
@import "modules/buttons.scss";

Break down your stylesheets into maintainable partials

Outputs

style.min.css

Variables

$primary: #c0ff1e;
$primary--light:  #e0ff8c;

$class-name: 'header';

$base-gutter: 24px;

$home-banner: '/img/home-banner.jpg';

$helvetica: "Helvetica Neue", Helvetica, sans-serif;

$nested-list: twitter #00acee, facebook #3b5998, pinterest #cb2027;

Usage

.header {
    background: $primary;
}

.#{$class-name}--banner {
    background: url($home-banner);
}

SassScript

.sidebar {
    width: (100% / 3);
}

.main {
    width: (100% / $columns ) * 2;
}

.main2 {
  width: 800px / 1200px * 100%;
}

Numbers

.sidebar {
  width: 33.33333%;
}

.main {
  width: 66.66667%;
}

.main2 {
  width: 66.66667%;
}

Outputs

Colors

.link {
    color: rgba(#ff0, 0.8);
}

.link--dark {
    color: darken(#ff0, 20%);
}

.link--complement {
    color: complement(#f00);
}

.link {
  color: rgba(255, 255, 0, 0.8);
}

.link--dark {
  color: #999900;
}

.link--complement {
  color: cyan;
}

Outputs

Nesting

.nav {
    border-bottom: 1px solid black;

    a {
        color: inherit;
        transition: 0.3s;
    }
}

Output

.nav {
  border-bottom: 1px solid black;
}
.nav a {
  color: inherit;
  transition: 0.3s;
}

.header {
    .nav {
        background: red;

        ul {
            list-style: none;

            li {
                display: inline-block;
                
                a {
                    color: red;
                }
            }
        }
    }
}

.header .nav {
  background: red;
}
.header .nav ul {
  list-style: none;
}
.header .nav ul li {
  display: inline-block;
}
.header .nav ul li a {
  color: red;
}

Outputs

.some-link {
    color: red;
    transition: 0.3s;

    &:hover {
        color: blue;
    }
}

Parent Selector

.some-link {
  color: red;
  transition: 0.3s;
}
.some-link:hover {
  color: blue;
}

Outputs

.item {
    width: 20em;

    .full-width & {
        width: 100%;
    }
}


.btn {
    ...

    & + & {
        margin-left: 1em;
    }
}

.item {
  width: 20em;
}
.full-width .item {
  width: 100%;
}

.btn {
    ...   
}
.btn + .btn {
  margin-left: 1em;
}

Outputs

Nested Media Queries

.element {
    height: 10em;
    width: 100%;

    @media screen and (min-width: 30em) {
        width: 22em;
    }
}

.element {
  height: 10em;
  width: 100%;
}
@media screen and (min-width: 30em) {
  .element {
    width: 22em;
  }
}

Outputs

@Function

@function px-to-ems($pixels, $context: 16) {
    @return  ($pixels / $context) * 1em
}

h1 {
  font-size: px-to-ems(72);
}

h1 {
  font-size: 4.5em;
}

Outputs

@Mixin

@mixin center($width) {
    left: 50%;
    margin-left: -($width / 2);
    position: absolute;
    width: $width;
}

.logo {
    @include center(300px);
}

.logo {
  left: 50%;
  margin-left: -150px;
  position: absolute;
  width: 300px;
}

Outputs

@mixin transform($value) {
    -webkit-tranform: $value;
    -moz-transform: $value;
    -o-transform: $value;
    tranform: $value;
}

.image {
    @include transform(rotate(45deg));
}

.image {
  -webkit-tranform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  tranform: rotate(45deg);
}

Outputs

@Extend

.btn {
    display: inline-block;
    padding: 0.4em 0.8em;
}

.btn--large {
    @extend .btn;
    font-size: 1.5em;
}

.btn, .btn--large {
  display: inline-block;
  padding: 0.4em 0.8em;
}

.btn--large {
  font-size: 1.5em;
}

Outputs

.modal .message--warning {
  color: red;
}

.message--warning {
  font-weight: bold;
}
 
.message-success {
  @extend .message--warning;
  border-color: dark-green;
  color: green;
}

.modal .message--warning, .modal .message-success {
  color: red;
}

.message--warning, .message-success {
  font-weight: bold;
}

.message-success {
  border-color: dark-green;
  color: green;
}

Outputs

%btn {
    display: inline-block;
    padding: 0.4em 0.8em;
}

.btn--large {
    @extend %btn;
    font-size: 1.5em;
}

.btn--large {
  display: inline-block;
  font-size: 1.5em;
  padding: 0.4em 0.8em;
}

Outputs

Loops

Live example time

Have fun with it

Resources

http://sassmeister.com/

http://sass-lang.com

http://twitter.com/darbybrown

http://codepen.io/hugo

http://darbybrown.com