SCSS Variable

SCSS

$global-small-margin: 10px !default;
$global-margin: 20px !default;
$global-default-margin: 30px !default;
$global-medium-margin: 40px !default;
$global-large-margin: 70px !default;

$global-small-padding: 10px !default;
$global-padding: 40px !default;
$global-default-padding: 20px !default;
$global-medium-padding: 25px !default;
$global-large-padding: 50px !default;

$global-color: #222 !default;
$global-muted-background: #edeff1 !default;
$global-primary-background: #092e43 !default;
$global-muted-color: #999 !default;
$global-background: #fff !default;
$global-secondary-background: #e13133 !default;
$global-success-background: #32d296 !default;
$global-warning-background: #faa05a !default;
$global-danger-background: #f0506e !default;

$global-link-color: #222 !default;
$global-link-hover-color: $global-secondary-background !default;

$global-small-gutter: 15px !default;
$global-gutter: 30px !default;
$global-medium-gutter: 40px !default;

$global-font-family: 'Noto Sans TC','PingFang TC','微軟正黑體',Arial, sans-serif;

$breakpoint-small: 640px !default;
$breakpoint-medium: 960px !default;
$breakpoint-large: 1200px !default;
$breakpoint-xlarge: 1600px !default;

$container-max-width: 1280px !default;
$container-xsmall-max-width: 750px !default;
$container-small-max-width: 900px !default;
$container-large-max-width: 1400px !default;
$container-xlarge-max-width: 1600px !default;

$pink: #F38C9D;
$green: #71BB66;
$blue: #55BFF2;
$purple: #B771B4;
$iceblue: #f1f5f7;
$yellow: #fcd127;

body {
  position: relative;
  font-family: $global-font-family;
  color: $global-color;
  display: flex;
  flex-direction: column;
  background: $global-muted-background!important;
}

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Media query mixin

SCSS

@mixin mq-s() {
  @media all and (max-width: $breakpoint-small) {
    @content;
  }
}
@mixin mq-m() {
  @media all and (max-width: $breakpoint-medium) {
    @content;
  }
}
@mixin mq-l() {
  @media all and (max-width: $breakpoint-large) {
    @content;
  }
}
@mixin mq-xl() {
  @media all and (max-width: $breakpoint-xlarge) {
    @content;
  }
}
@mixin mq($size){
  @media all and (max-width: rem($size)) {
    @content;
  }
}

@mixin mq-min($size){
  @media all and (min-width: rem($size)) {
    @content;
  }
}

@mixin mq-range($size1,$size2){
  @media all and (max-width: rem($size1)) and (min-width: rem($size2)) {
    @content;
  }
}

// example
@include mq-s(){ div {display: none;} }

Position mixin

SCSS

@mixin pos-a($top,$right,$bottom,$left,$width,$height,$zindex){
  position: absolute;
  @if($top != ''){
    top: rem($top)
  }
  @if($left != ''){
    left: rem($left)
  }
  @if($bottom != ''){
    bottom: rem($bottom)
  }
  @if($right != ''){
    right: rem($right)
  }
  @if($width != ''){
    width: rem($width)
  } @else {
    width: auto
  }
  @if($height != ''){
    height: rem($height)
  }
  @if($zindex != ''){
    z-index: $zindex;
  }
}

@mixin pos-f($top,$right,$bottom,$left,$width,$height,$zindex){
  position: fixed;
  @if($top != ''){
    top: rem($top)
  }
  @if($left != ''){
    left: rem($left)
  }
  @if($bottom != ''){
    bottom: rem($bottom)
  }
  @if($right != ''){
    right: rem($right)
  }
  @if($width != ''){
    width: rem($width)
  } @else {
    width: auto
  }
  @if($height != ''){
    height: rem($height)
  }
  @if($zindex != ''){
    z-index: $zindex;
  }
}

// example
div { @include pos-a(0,0,'','',100px,100px,5) }

Rem unit calculator

SCSS

$browser-context: 16;
@function pct($value,$base) {
  @return $value / $base * 100%;
}
@function is-percentage($value) {
  @return is-number($value) and unit($value) == '%';
}
@function rem($pixels, $context: $browser-context) {
  @if(is-percentage($pixels)){
    @return $pixels;
  }
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return $pixels / $context * 1rem;
}

// sample
div { width: rem(100px) }