basic-sass How to install: Using npm: npm install basic-sass -S Using yarn: yarn add basic-sass Start using sass: @import "basic-sass"; mixin media query @include phone {} @include handheld {} @include tablet {} @include laptop {} @include desktop {} @include mobile {} @include pc {} icon @include arrow-tip ($position, $width: 2px, $size: 7px, $color: #ccc) {} @include arrow ($position, $width: 2px, $size: 16px, $color: #484848) {} @include pseudoArrow ($position, $width: 2px, $size: 7px, $color: #ccc) {} @include cross ($size: 20px, $bold: 2px, $color: gray, $bgColor: transparent) {} @include add ($size: 14px, $bold: 2px, $color:#fc5832) {} @include menu ($width: 18px, $bold: 2px, $color:#FFFFFF) {} @include exclamatory ($width, $height, $color, $inclination: 0.1) {} @include triangle ($direction, $width, $color, $inclination: 0.5) {} @include ring ($radius, $bold, $color) {} @include pseudoRing ($width: 16px, $height: $width, $color: #ff3737 ) {} hook ($width: 8px, $height: 4px, $rotateDeg: -45deg, $color: #ff3737) {} ringHook ($top: 0, $left: 0) {} layout @include clearfix {} @include centralize-pseudo {} @include centralize-translate($position: 'vh') {} @include centralize-margin($position: 'vh') {} @include ellipsis {} @include ellipsis-line($line: 2) {} font @include font-opensans {} @include font-montserrat {} @include force-font ($fontSize: 12) {} variable screen size $screen-xs: 320px; $screen-sm: 576px; $screen-md: 768px; $screen-lg: 1024px; $screen-xl: 1440px; $screen-xxl: 1600px; z-index $zindex-toast-download: 10; $zindex-form: 99; $zindex-footer: 99; $zindex-header: 100; $zindex-header-crumb: 101; $zindex-menu: 101; $zindex-player: 900; $zindex-dropdown: 901; $zindex-mask: 999; $zindex-toast: 1000; $zindex-loading: 9999; $zindex-highest: 99999;