DEV Community

aryan015
aryan015

Posted on • Edited on

aryan's SCSS Complete guide 🧡

#css #javascript #react #scss

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

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

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

variables

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

  • strings
  • numbers
  • colors
  • booleans
  • lists
  • nulls 
$variableName:value;
Enter fullscreen mode Exit fullscreen mode

code

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

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

body{
    font-famly:$myFont;
}
Enter fullscreen mode Exit fullscreen mode

after compilation

body{
    font-famly:Helvetica, sans-serif;;
}
Enter fullscreen mode Exit fullscreen mode

variaible scoping

They are available only where {} are defined.

$myColor: red;

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

p {
  color: $myColor;
}
Enter fullscreen mode Exit fullscreen mode

compilation

h1 {
  color: green;
}

p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

!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*/
}
Enter fullscreen mode Exit fullscreen mode

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*/
    }
}
Enter fullscreen mode Exit fullscreen mode

after compilation

nav li{
    list-style:none;
}
nav p{
    color:red;
}
Enter fullscreen mode Exit fullscreen mode

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

SCSS NESTED HACK 

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

text: {
  align: center;
}
Enter fullscreen mode Exit fullscreen mode 
p {
    font-family:helvetica, sans-serif;
    text-align:center;
}
Enter fullscreen mode Exit fullscreen mode

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

main.scss

@import "colors";
body{
    color:$myGreen;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
aryan015 profile image
aryan015 •

please subscritbe my blog

Read next

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

cookiemonsterdev profile image

How to style active Nav links in server components in Next.js

Mykhailo Toporkov 🇺🇦 -

griseduardo profile image

Testes e2e em React com Cypress

Eduardo Henrique Gris -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -