Uncut Daily

Getting Started With SASS/SCSS in 2021

SASS
Sass

Sass stands for Syntactically Awesome Style Sheets (Dart Sass)

Everything about Sass

Sass is a CSS pre-processor that lets you do many things that you cannot do when writing regular CSS. Sass stands for syntactically awesome styling sheets or some call it “super”.

When you create a .scss file, it is not understood by the browser. Instead you would need to compile it into a .css file in order for the browser to read (more on this later). In short here is how it goes down:

You create a style.scss file first and that would map using style.css.map, into the style.css file. Also remember to make the HTML file reference the CSS file.

It is advisable to use scss instead of sass, simply because sass uses no curly brackets and indentation. This could get complicated when first starting out.

If using React or Node.js run:

npm install -g sass

Can also use command below to watch for changes and load the main scss file into the main css file:

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

Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.

You can create multiple scss files in order for you to write for example in the main style.scss file:

@import "login"
@import "partials/variables"
@import "modules/header"

In Sass, you can declare variables.

$color-name: #333;
$unique-font: "Roboto", sans-serif;
body {
     font-family: $unique-font;
     color: $color-name;
}

Sass uses nesting:

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

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

Sass can use Partials,

Partials start with a leading underscore _partial.scss. Helps it know that its just a partial and should not be compiled. They are a great way to modularize your CSS and help keep things easier to maintain.

Sass can use mixins,

where you would define a style, use the @mixin directive. A good use is for vendor prefixes:

@mixin theName($direction, $background) {
flex-direction: $direction;
background: $background;
}
header {
@include theName(column, green);
}
footer {
@include theName(row, blue);
}
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { 
   @include transform(rotate(30deg)); 
}

Sass can use functions,

where you would compute and return a value:

@function myFunction ($var) {
@return
}

body {
font-weight: myFunction ( );
}

Sass uses inheritance:

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Using @extend lets you share a set of CSS properties from one selector to another.

Sass uses operators:

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%; //62.5%
}

Can also use // and /* */ for comments.

Leave a Reply

Your email address will not be published. Required fields are marked *