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) }