DEV Community

loading...

CSS to SASS.....

Ajo Alex
I am a front end developer love to do something
・2 min read

What is SASS ?

Sass stands for Syntactically Awesome Stylesheet. Sass is an extension of CSS, it is a CSS pre-processor & is competely compatible with all version of css.
Sass is free to download and use.

Variables

/*CSS*/

body{
font: 100% Helvetica, sans-serif;
color:#333;
}
Enter fullscreen mode Exit fullscreen mode
/*SCSS*/
$font-stack: Helvetica, sans-serif;
$primary-color:#333;

body{
font:100% $font-stack;
color:$primary-color
}
Enter fullscreen mode Exit fullscreen mode

Nesting

/*CSS*/
nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
nav li{
    display:inline-block
}
nav a{
    display:block;
    padding:6px 12px;
    text-decoration:none;
}
Enter fullscreen mode Exit fullscreen mode

Code is more readable now

/*SCSS*/
nav{
    ul{
        margin: 0;
        padding:0;
        list-style:none;
    }
    li{
        display: inline-block;
    }
    a{
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}
Enter fullscreen mode Exit fullscreen mode

Mixins

/*CSS*/
.box{
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
Enter fullscreen mode Exit fullscreen mode
/*SCSS*/
@mixin transform($property){
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.box{
    @include transform(rotate(30deg));
}
Enter fullscreen mode Exit fullscreen mode

Modules

You don't have to write all your sass in a single file.
you can split it up however you want with the @use rule

/*styles file - styles.scss*/
@use 'base';
.inverse{
    background-color: base.$primary-color;
    color:#0D1117;
}
Enter fullscreen mode Exit fullscreen mode
/*Base file - base.scss*/
$font-stack:Helvetica, sans-serif;
$primary-color:#333;
body{
    font: 100% $font-stack;
    color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

Inheritance

Now this is something really uefull and yes again its DRY code

%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;
}
Enter fullscreen mode Exit fullscreen mode

Functions & For Loop

similar to lightness, SASS has may built in functions which are very useful in large scale application
similarly to @for, SASS have @each, @while, @if @else flow controls

/*Creating our own function*/
@function pow($base,$exponents){
    $result:1;
    @for $_ from 1 through $exponent{
        $result:$result + $base;
    }
    @return $result;
}
.sidebar{
    float: left;
    margin-left: pow(4,3) * 1px;
}

/*Built in function*/
.button{
    $primary-color:red;
    color:$primary-color;
    border: 1px solid color .scale($primary-color, $lightness:20%);
    /*lightness is a built in function*/
}
Enter fullscreen mode Exit fullscreen mode

Operators

Doing math in your css is very helpful. Sass has a handful of standard math operators like +, -, *, / and %

.container{
    width:100%;
}
article[role = "main"]{
    float: left;
    width: 600px / 960px * 100%;
}
aside[role = "complementary"]{
    float: right;
    width: 300px / 960px *100%;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)