Simple sass base for my personal projects

_matt.scss

/**
 * matt.scss - v0.3.0
 *
 * Matt is a simple sass declaration file which aims to provides a solid foundation
 * for BEM based stylesheets by providing variables with semantic names.
 *
 *  You may also link the Roboto font and material icons:
 *  - <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
 *  - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 *
 * by Julien LEICHER
 *
 * Section title generated with http://patorjk.com/software/taag/#p=display&f=Ogre&t=
 */

/**
 __      _   _   _                 
/ _\ ___| |_| |_(_)_ __   __ _ ___ 
\ \ / _ \ __| __| | '_ \ / _` / __|
_\ \  __/ |_| |_| | | | | (_| \__ \
\__/\___|\__|\__|_|_| |_|\__, |___/
                         |___/   

 */

$theme: dark !default;

/**
   ___      _                
  / __\___ | | ___  _ __ ___ 
 / /  / _ \| |/ _ \| '__/ __|
/ /__| (_) | | (_) | |  \__ \
\____/\___/|_|\___/|_|  |___/

 */

$dark-text-primary: rgba(0, 0, 0, 0.87) !default;
$dark-text-secondary: rgba(0, 0, 0, 0.54) !default;
$dark-text-disabled: rgba(0, 0, 0, 0.38) !default;
$dark-text-dividers: rgba(0, 0, 0, 0.12) !default;

$light-text-primary: rgba(255, 255, 255, 1) !default;
$light-text-secondary: rgba(255, 255, 255, 0.7) !default;
$light-text-disabled: rgba(255, 255, 255, 0.5) !default;
$light-text-dividers: rgba(255, 255, 255, 0.12) !default;

$dark-icons-active: rgba(0, 0, 0, 0.54) !default;
$dark-icons-inactive: rgba(0, 0, 0, 0.38) !default;

$light-icons-active: rgba(255, 255, 255, 1) !default;
$light-icons-inactive: rgba(255, 255, 255, 0.5) !default;

$dark-bg-status: #000000 !default;
$dark-bg-bar: #212121 !default;
$dark-bg: #303030 !default;
$dark-bg-dialogs: #424242 !default;

$light-bg-status: #E0E0E0 !default;
$light-bg-bar: #F5F5F5 !default;
$light-bg: #FAFAFA !default;
$light-bg-dialogs: #FFFFFF !default;

$white: #ffffff !default;
$black: #000000 !default;

/**
 __ _                 ___       ___      _     _ 
/ _(_)_______  ___   ( _ )     / _ \_ __(_) __| |
\ \| |_  / _ \/ __|  / _ \/\  / /_\/ '__| |/ _` |
_\ \ |/ /  __/\__ \ | (_>  < / /_\\| |  | | (_| |
\__/_/___\___||___/  \___/\/ \____/|_|  |_|\__,_|
                                                                    
 */

@function dp($value) {
  @return $value * 1px;
}

$component-grid: dp(8) !default;
$icons-grid: dp(4) !default;
$type-grid: dp(4) !default;

/**
   ___           _       
  / __\__  _ __ | |_ ___ 
 / _\/ _ \| '_ \| __/ __|
/ / | (_) | | | | |_\__ \
\/   \___/|_| |_|\__|___/
                         
 */

$body-font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$headings-font: $body-font !default;

@mixin font-display-4() {
  font: $headings-font;
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

@mixin font-display-3() {
  font: $headings-font;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

@mixin font-display-2() {
  font: $headings-font;
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;
}

@mixin font-display-1() {
  font: $headings-font;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
}

@mixin font-headline() {
  font: $headings-font;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;
}

@mixin font-title() {
  font: $headings-font;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

@mixin font-subhead() {
  font: $headings-font;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
}

@mixin font-subhead-2() {
  font: $headings-font;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.04em;
}

@mixin font-body-2() {
  font-family: $body-font;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
}

@mixin font-body-1() {
  font-family: $body-font;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

@mixin font-caption() {
  font-family: $body-font;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

/**
   _   _ _           
  /_\ | (_) __ _ ___ 
 //_\\| | |/ _` / __|
/  _  \ | | (_| \__ \
\_/ \_/_|_|\__,_|___/
                    
 */

$text-primary: $light-text-primary; 
$text-secondary: $light-text-secondary;
$text-disabled: $light-text-disabled;
$text-dividers: $light-text-dividers; 

$icons-active: $light-icons-active;
$icons-inactive: $light-icons-inactive;

$bg-status: $dark-bg-status;
$bg-bar: $dark-bg-bar;
$bg: $dark-bg;
$bg-dialogs: $dark-bg-dialogs;

@if $theme == light {
  $text-primary: $dark-text-primary; 
  $text-secondary: $dark-text-secondary;
  $text-disabled: $dark-text-disabled;
  $text-dividers: $dark-text-dividers; 

  $icons-active: $dark-icons-active;
  $icons-inactive: $dark-icons-inactive;

  $bg-status: $light-bg-status;
  $bg-bar: $light-bg-bar;
  $bg: $light-bg;
  $bg-dialogs: $light-bg-dialogs;
}

/**
   __           
  /__\ ____   __
 /_\| '_ \ \ / /
//__| | | \ V / 
\__/|_| |_|\_/  
                
  Settings
  ---
  theme: #{$theme}

  Colors
  ---
  text-primary: #{$text-primary}
  text-secondary: #{$text-secondary}
  text-disabled: #{$text-disabled}
  text-dividers: #{$text-dividers}
  icons-active: #{$icons-active}
  icons-inactive: #{$icons-inactive}
  bg-status: #{$bg-status}
  bg-bar: #{$bg-bar}
  bg: #{$bg}
  bg-dialogs: #{$bg-dialogs}

  Grid
  ---
  component-grid: #{$component-grid} 
  icons-grid: #{$icons-grid} 
  type-grid: #{$type-grid}

  Fonts
  ---
  body font: #{$body-font}
  headings font: #{$headings-font}
 */

https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm