aryan's SCSS Complete guide 🧡

note: I will not always show CSS version of my code.
note: It is a three part series. (if link are taking you at the same blog then links are not updated yet. waiting...)
two
three

SCSS

SCSS (Syntatically Awesome Stylesheet) is CSS pre-processor. It uses *.scss extension. Based on Ruby 💎.

Installation (install)

using node package manager

npm install -g sass

using Extension in VSCODE (easier guide)

You might this on preffered IDE too.

glenn2223.live-sass

# the above code is for extension name live-sass compiler

compilation

# after installtion run this command it will com
# pile index.scss to index.css
sass source/stylesheets/index.scss build/stylesheets/index.css
# sass package is prerequisite

variables

With Sass, you can store information in variables, like:

• strings
• numbers
• colors
• booleans
• lists
• nulls

$variableName:value;

code

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;h

in scss you dont have to use var() method to use variables. (that'a why i prefer it.)🧡

body{
    font-famly:$myFont;
}

after compilation

body{
    font-famly:Helvetica, sans-serif;;
}

variaible scoping

They are available only where {} are defined.

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

compilation

h1 {
  color: green;
}

p {
  color: red;
}

!global

The default behavior for variable scope can be overridden by using the !global switch.

$myColor:red;
h1{
    $myColor:green !global; /*it will replace red to green use with caution*/
    color:$myColor; /*green*/
}
p{
    color:$myColor; /*green*/
}

note: avoid using global you might never know what causing your varible a different color. 🧡

SCSS nesting

Another reason I use SCSS pre-processor that it support nesing.

nav{
    li{
        list-style:none;
    }
    p{
        color:red; /*set color to red*/
    }
}

after compilation

nav li{
    list-style:none;
}
nav p{
    color:red;
}

Because you can nest properties in Sass, it is cleaner and easier to read than standard CSS. At the end I will show you a scss hake.

@Import

Scss keeps the CSS code DRY (Don't Repeat Yourself).You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. (extension is optional). You might required it in big apps.

@import "variables";
@import "reset";

SCSS NESTED HACK

font: {
  family: Helvetica, sans-serif;
}

text: {
  align: center;
}

p {
    font-family:helvetica, sans-serif;
    text-align:center;
}

SCSS partials

It let transpiler know that it sould not translate this file to .scss. Syntax is __colors.scss. Import does not require __ in the name.
__colors.scss

$myGreen:green;

main.scss

@import "colors";
body{
    color:$myGreen;
}

Part two

link
if the link is going to google means second has not been uploaded🧡. Might need atleast 5 stars ⭐ on this post.🤣 (just kidding)

🔗linkedin

learning resources

🧡Scaler - India's Leading software E-learning
🧡w3schools - for web developers

Comments

[aryan015]

please subscritbe my blog