SaSS basics to advanced: Give superpower to your CSS

1. 
   Rahulism

   Owner

SASS is CSS with superpowers.

SASS is CSS with superpowers. So, as front-end developer and learner I researched about LESS which was great but very soon I changed to SASS because of using pre/post processor you can write CSS more programmatically and can help you develop robust systems.

Nonetheless, I regularly find that individuals just know a couple of fundamentals of SASS like settling and factors when there is a lot more it can do. So today I figured I would share a boost to the fundamentals of SASS.

Intro

SASS stands for Syntactically Awesome Style Sheets - it’s CSS with superpowers. SASS is the most popular CSS pre-processor. It allows you to write SASS/SCSS which gets compiled into plain CSS for the browser to read. SASS vs SCSS

The only difference between SASS and SCSS is the syntax. SCSS is most similar to standard CSS and uses curly braces and semi colons while SASS uses indentation instead.

NESTING

Nested styles will compile into chained selectors. You can also use and operator which represents the current selector.

SCSS:

.container {
    min-width: 400px;
    max-width: 1024px;
}

.container a {
    color: #blue;
}

.container.padding-small {
    padding: 5px;
}

.container__heading {
    font-size: 1.5rem;
}

COMPILED CSS

.container {
    min-width: 400px;
    max-width: 1024px;

 a {
    color: blue;
 }
 &.padding-small {
    padding: 5px;
 } 

 &__heading {
    font-size: 1.5rem;
 }
}

Calculations

Execute calculations directly in the stylsheet that will output as the calculated value. Keep in mind you can’t mix units and this is not the same as the Calc() function which works in plain CSS.

SCSS

.sidebar {
    width: 390px;
}
.half-column {
    width: 50%;
}

Compiled CSS

.sidebar {
    width: 132px + 258px;
}

.half--column {
    width: 100/2 * 1%;
}

Variables

Use variables to store re-usable values throughout your project. Useful for consistent clours and spacing units.

SCSS

$primary: #ff01b1;
$spacing-unit: 10px;

.button {
    background-color: $primary;
    padding: $spacing-unit;
    margin: 0 0 $spacing-unit *2;
}

Compiled CSS

.button {
    background-color: #ff01b1;
    padding: 10px;
    margin: 0 0 20px; 
}

Placeholders

Blocks of reusable CSS that helps gets compiled into comma separated selectors.

SCSS

%container {
    border-readius: 5px;
    border: 1px solid #ff01b1;
    padding: 10px;
}

.article {
    @extend %container; 
    margin: 0 0 26px;
}
.card {
    @extend %container; 
}

Compiled CSS

.article, 
.card {
    border-radius: 5px;
    border: 1px solid #ff01b1;
    padding: 10px;
}
.article {
    margin: 0 0 20px;
}

Mixins

Blocks of reusable CSS you can pass values to. You can set a default that will be used if no value is set.

SCSS

@mixins square($size: 100px) {
    height: $size;
    width: $size;
}
.avatar {
    @include square(); 
}
.featured-image {
    @include square(400px); 
}

Compiiled CSS

.avatar {
    height: 100px;
    width: 100px;
}

.featured-image {
    height: 400px;
    width: 400px;
}

Partials

Ways to split up your CSS into reusbale chunks. partial file names start an underscore.

File structure

• _footer.scss
  • _header.scss
    • _settings.css

Import partials into SCSS file

@import 'scss/settings'; 
@import 'scss/header'; 
@import 'scss/footer'; 

Let’s get into some advanced tutorials.

About Rahulism

I’m a front-end Developer and Blogger. Focused more on User Experience. I’m Passionate about startups