SCSS Helper

Some Helper Function

/*unit helper*/
@function tranformREM($px) {
    @return ($px/($rootSize/1px))+rem
}


@function get-vw($target) {
    $vw-context: ($windowWidth*.01) * 1px;
    @return ($target/$vw-context) * 1vw;
}

@function get-vh($target) {
    $vw-context: ($windowHeight*.01) * 1px;
    @return ($target/$vw-context) * 1vh;
}

Minin

$rootSize: 16px;
$windowWidth: 1920;
$windowHeight: 1080;

$fullWidth: 100vw;
$fullHeight: 100vh;

$width100: 100%;
$height100: 100%;

$height100p: 100px;

$paddingTop60: 60px;
$paddingTop40: 40px;
$paddingBottom50: 50px;
$paddingBottom40: 40px;

/*center helper*/
@mixin center-flex($align, $direction: row) {
    display: flex;
    -ms-flex-direction: $direction;
    -webkit-flex-direction: $direction;
    flex-direction: $direction;
    justify-content: $align;
}

@mixin center-absolute() {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*padding helper*/

@mixin paddingL($paddingLeft) {
    padding-left: get-vw($paddingLeft);
}

@mixin paddingR($paddingRight) {
    padding-right: get-vw($paddingRight);
}

@mixin paddingT($paddingTop) {
    padding-top: get-vw($paddingTop);
}

@mixin paddingB($paddingBottom) {
    padding-bottom: get-vw($paddingBottom);
}


/*margin helper*/

@mixin marginL($marginLeft) {
    margin-left: get-vw($marginLeft);
}

@mixin marginR($marginRight) {
    margin-right: get-vw($marginRight);
}

@mixin marginB($marginBottom) {
    margin-bottom: get-vw($marginBottom);
}

@mixin marginT($marginTop) {
    margin-top: get-vw($marginTop);
}


@mixin collapseAnimation() {
    margin-top: 0;
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
}

Color / Font

@import "helper";
$brandPink: #d81262;
$brandBlue: #10abbb;
$brandWhite: #ebebeb;
$brandBlack: #000000;
$brandGrey1: #4d4d4d;
$brandGrey2: #888888;
$brandGrey3: #272727;

$whiteOpacity50: rgba(255, 255, 255, 0.5);
$whiteOpacity100: rgba(255, 255, 255, 1);
$whiteOpacity30: rgba(255, 255, 255, 0.3);
$whiteOpacity20: rgba(255, 255, 255, 0.2);
$blackOpacity30: rgba(0, 0, 0, 0.3);
$blackOpacity50: rgba(0, 0, 0, 0.5);
$blackOpacity70: rgba(0, 0, 0, 0.7);
$blackOpacity90: rgba(0, 0, 0, 0.9);

$fontSize72: 72px;
$fontSize64: 64px;
$fontSize42: 42px;
$fontSize36: 36px;
$fontSize32: 32px;
$fontSize28: 28px;
$fontSize24: 24px;
$fontSize145: 145px;


@mixin latoRegular-font($fontSize) {
    font-family: 'latoregular';
    font-size: get-vw($fontSize);
}

@mixin arialRegular-font($fontSize) {
    font-family: 'arialregular';
    font-size: get-vw($fontSize);
}

@mixin arialItalic-font($fontSize) {
    font-family: 'arialitalic';
    font-size: get-vw($fontSize);
}

@mixin arialBold-font($fontSize) {
    font-family: 'arialbold';
    font-size: get-vw($fontSize);
}