markdown SCSS

Posted 2021-05-05

# Notes
There are two syntaxes available for Sass. 
* SCSS (Sassy CSS) is an extension of the syntax of CSS. Files using this syntax have the .scss extension.
* Sass (older syntax) uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

## Nesting
```scss
.parent-class {
	background-color: #color-white;

	&__element {
		font-size: 20px;
	}
}
```

## Variables
```scss
$variable-name: 'value';
```

## Mixins
```scss
@mixin demo($parameter: default-value, $next) {
	border-radius: $parameter;
}

// Usage
@include demo(15px); // border-radius: 15px;
```

## Conditionals
```scss
@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}
```

## Loops
### @for
There are two different loops:
* start `through` end. // Includes the end number.
* start `to` end. // Excludes the end number.

```scss
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
```

### @each
On each iteration, the variable gets assigned to the current value from the list or map.

#### List
```scss
@each $color in blue, red, green {
  .#{$color}-text {
	color: $color;
  }
}
```

#### Map
```scss
$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {
	color: $color;
  }
}
```

### @each Output
```scss
.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}
```

### @while
```scss
$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}
```

## Partials
* `_example-file.scss`
* Use `@import 'example-file';` in the main.scss file to import partials.

## Extend
I don't recommend extending because its hard to know when a class is being extended.
```scss
.panel {
  background-color: gray;
  border: 2px solid black;
}

.panel--blue {
	@extend .panel;
	
	color: blue;
}
```

## CSS Loader
Import css files from `node_modules` with the tilda.  
Example: `@import '~package/path/to/css.css';` rather than `@import '../../../node_modules/package/path/to/css.css';`