scss variables file code example

Example 1: import mixin from another file

@import "../../../theme/main.scss"

Example 2: scss variables

$base-color: #c6538c;

Example 3: sass @use not working

As of 8/2020 @use is only compatible with Dart Sass. 
Check compatibility with documentation.
https://sass-lang.com/documentation/at-rules/use

Example 4: scss variables

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Example 5: Sass @import and Partials

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

reset.scss

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Example 6: how to make a scss variable

$variableName = item

$gray = #404040

body{
	background:$gray; 
}