Basic intro SASS

Sass basics

  • Syntactically Awesome StyleSheets
  • Invented in 2006 by Hampton Catlin
  • A CSS extension language that compiles into plain CSS
  • First modern transcompiler language
    • CoffeeScript
    • LESS

.sass or .scss?

  • Sass has 2 main syntaxes
    • SCSS (Sassy CSS, .scss)
    • SASS syntax (.sass)
  • SCSS is more like CSS and JavaScript
  • SASS is more terseness
    • Instead of brackets and semicolons, it uses the indentation of lines to specify blocks

.sass or .scss?

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2;
}
/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Sass is for developers and CSS for browsers

SASS

Compiler

CSS

The basics

  • Nesting
  • Variables
  • Mixins
  • Importing files

Nesting

  • CSS will be nested the same as HTML
  • More readable
  • Selectors are nested inside
     
  •  Bad practice: Overly nest, hard to maintain (max 4)

Nesting

/* CSS EXAMPLE */

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
/* SCSS EXAMPLE */

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Variables

  • D.R.Y
  • A placeholder for values
  • Written with a $ in front of it
  • Can combine it with math

Variables

/* CSS EXAMPLE */

body {
    background-color: #fff;
    font-size: 12px;
}

div {
    color: #fff;
    background-color: #333;
    margin: 20px auto;
    width: 50%;
}

p {
    margin: 5px;
    padding: 5px;
    color: #333;
    line-height: 21px;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    margin: 5px 0 0 10px;
    text-decoration: underline;
}

/* SCSS EXAMPLE */
$primary-color: #fff;
$secondary-color: #333;
$margin: 5px;
$padding: $margin;
body {
    background-color: $primary-color;
    font-size: 12px;
}
div {
    color: $primary-color;
    background-color: $secondary-color;
    margin: 20px auto;
    width: 50%;
}
p {
    margin: $margin;
    padding: $margin * 1.5;
    color: $secondary-color;
    line-height: 21px;
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    margin: $margin 0 0 10px;
    text-decoration: underline;
}

Mixins

  • Lets you group CSS declarations to reuse
  • Good use for vendor prefixes
  • Possible to pass in values for flexibility

Mixins

/* SCSS - Using Mixins */

@mixin corners {
	border-radius: 5px;
 	border-top-right-radius: 10px;
 	border-bottom-left-radius: 10px;
}

@mixin yellow_links {
    a {
      color: yellow;
	  &:hover {
	    color: orange;
	  }
    }
    h2 {
        color: green;
    }
}

.block1 {
    @include corners;
    @include yellow_links;
}

.block2 {
    @include corners;
    background: #ccc;
}
/* OUTPUT */

.block1 {
    border-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px; 
}

.block1 a {
	color: yellow; 
}

.block1 a:hover {
	color: orange; 
}

.block1 h2 {
	color: green; 
}

.block2 {
    border-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #ccc; 
}

Import files

  • Sass builds on top of the current CSS
  • Won't require an HTTP request
  • Combines the files so you have a single CSS file for the browser.
  • @import 'filename';

Let's go :-)

Clone:

git@gitlab.competa.com:training/basic-sass.git

or
https://gitlab.competa.com/training/basic-sass.git

 

And read the README.md

Assignments

  • Read the README.md
  • Install the site
  • Run the CLI "grunt" command
  • Create your wireframe with SCSS
  • Use mixins, variables, importfiles etc.etc.

Happy Hunting!

SASS Basics

By CodePamoja

Made with Slides.com

SASS Basics

In this presentation we will show and learn you the basics of SASS. Combined with interactive moments to learn it yourself.

  • 27

More from CodePamoja