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