aryan's SCSS Complete guide 🧡
Tags: css, javascript, react, scss
Published: 2024-06-23 11:38:45

`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](https://dev.to/aryan015/aryans-scss-complete-guide-part-2-1p1i)
[three](https://dev.to/aryan015/3-finale-of-complete-sass-longer-2gpe)
## SCSS 
SCSS (Syntatically Awesome Stylesheet) is CSS pre-processor. It uses `*.scss` extension. Based on Ruby 💎.

## Installation [(install)](https://sass-lang.com/install/)
### using node package manager
```sh
npm install -g sass
```
### using Extension in VSCODE (easier guide)
You might this on preffered IDE too.  
`glenn2223.live-sass`
```sh
# the above code is for extension name live-sass compiler
```
## compilation
```sh
# 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

```sh
$variableName:value;
```
`code`
```sh
$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.)🧡
```css
body{
    font-famly:$myFont;
}
```
after compilation
```css
body{
    font-famly:Helvetica, sans-serif;;
}
```

### variaible scoping
They are available only where {} are defined.
```css
$myColor: red;

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

p {
  color: $myColor;
}
```
compilation
```css
h1 {
  color: green;
}

p {
  color: red;
}
```
### `!global`
The default behavior for variable scope can be overridden by using the `!global` switch.
```css
$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.
```css
nav{
    li{
        list-style:none;
    }
    p{
        color:red; /*set color to red*/
    }
}
```
after compilation
```css
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.
```css
@import "variables";
@import "reset";
```

## SCSS NESTED HACK
```css
font: {
  family: Helvetica, sans-serif;
}

text: {
  align: center;
}
```
```css
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
```scss
$myGreen:green;
```
main.scss
```scss
@import "colors";
body{
    color:$myGreen;
}
```

## Part two
[link](https://google.com)
if the link is going to google means second has not been uploaded🧡. Might need atleast 5 stars ⭐ on this post.🤣 (just kidding)

[🔗linkedin](https://www.linkedin.com/in/aryan-khandelwal-779b5723a/)

## learning resources
[🧡Scaler - India's Leading software E-learning](www.scaler.com)
[🧡w3schools - for web developers](www.w3school.com)