원하는 태그만 선택적으로 reset.scss 만들기

무거운 reset.css의 나열이 아닌 필요한 태그들만 사용할 수 있다면 어떨까 ??

보통 마크업 작업을 할 때 생각보다 쓰는 태그들은 한정되어 있는데 

reset.css는 필요없는 태그와 스타일들이 훨씬 많다.

scss의 placeholder와 mixin 그리고 문법을 최대한 활용하여 필요한 태그만 선택가능하게 만들어 보면 어떨까 하는 생각에서 시작되었다.

 

reset.scss를 원하는 스타일만 사용하도록 분기 처리하여 불필요한 스타일 제거로 응답 속도 향상에 기여하도록 만들어보자

 

scss Docs : https://sass-lang.com/documentation

@charset "UTF-8";
%border-style{
    border: 0;
}
%box-style{
    margin: 0;
    padding: 0;
}
%block-style{
    display: block;
}
%list-style{
    list-style: none;
}
//body에 배경색이 있을 때
@mixin mw-background($color) {
    @at-root #{if(&, 'body#{&}', 'body')} {
        background-color: $color;
        -webkit-text-size-adjust:none;
    }
}
//font style 선언
@mixin font-style($size: false, $color: false, $weight: false,$style: false, $lh: false) {
    font-family: 'Malgun Gothic',Helvetica,'Apple SD Gothic Neo',Dotum,sans-serif;
    @if $size { font-size: $size; }
    @if $color { color: $color; }
    @if $weight { font-weight: $weight; }
    @if $style { font-style: $style; }
    @if $lh { line-height: $lh; }
}

//박스 outline 설정
@mixin reset-box-outline{
    border: 0;
    outline:0;
}
//폰트 리셋
@mixin reset-font {
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

@mixin apply_style($reset-style...){
    @each $styles in $reset-style{
        @extend %#{$styles};
    }
}
@mixin other-reset($tag...){
    @each $value in $tag {
        #{$value} {
            @if $value == html{
                height: 100%;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
            @else if $value == body{
                height: 100%;
                background: #f1f1f1;
                -webkit-text-size-adjust:none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                @include apply_style("box-style");
                @include font-style(87.5%,null,400,normal,null);
            }
            @else if ($value == img) or ($value == fieldset){
                @include apply_style("border-style");
            }
            @else if ($value == li) or ($value == ol) or ($value == ul){
                @include apply_style("box-style","list-style");
            }
            @else if $value == blockquote{
                quotes:none;
            }
            @else if $value == a{
                color:#000;text-decoration:none;text-overflow:ellipsis;
                &:active,&:hover,&:link{
                    text-decoration:none
                }
            }
            @else if $value == textarea{
                resize: none;-webkit-appearance:none;-webkit-border-radius:0;
                @include apply_style("box-style");
                &:focus{
                    outline: 0;
                }
            }
            @else if $value == table{
                border-spacing:0;border-collapse:collapse;table-layout:fixed;
                @include apply_style("box-style");
            }
            @else if ($value == button) or ($value == input){
                appearance: none;
                -webkit-border-radius: 0;
                border-radius: 0;
                border-width: 0;
                background: 0 0;
                outline: 0;
                @include apply_style("box-style");
                @include font-style(null,null,400,normal,null);
                &:focus{
                    outline: 0;
                }
            }
            @else if $value == h{
                @at-root %font_style{
                    @include font-style(null,null,null,normal,null);
                }
                $list:h1,h2,h3,h4,h5,h6;
                @each $tag in $list{
                    @at-root #{$tag}{
                        @extend %font_style;
                        @include apply_style("box-style");
                    }
                }
            }
            @else if $value == article{
                @include apply_style("box-style","block-style");
            }
            @else if $value == aside{
                @include apply_style("box-style","block-style");
            }
            @else if $value == audio{
                @include apply_style("box-style");
            }
            @else if $value == canvas{
                @include apply_style("box-style");
            }
            @else if $value == detail{
                @include apply_style("box-style","block-style");
            }
            @else if ($value == dl) or ($value == dt) or ($value == dd){
                @include apply_style("box-style");
            }
            @else if $value == p{
                @include apply_style("box-style");
            }
            @else if $value == fieldset {
                @include apply_style("box-style");
            }
            @else if $value == figcaption {
                @include apply_style("box-style","block-style");
            }
            @else if $value == footer {
                @include apply_style("box-style","block-style");
            }
            @else if $value == header {
                @include apply_style("box-style","block-style");
            }
            @else if $value == form {
                @include apply_style("box-style");
            }
            @else if $value == hgroup{
                @include apply_style("box-style","block-style");
            }
            @else if $value == legend{
                @include apply_style("box-style");
            }
            @else if $value == menu{
                @include apply_style("box-style","block-style");
            }
            @else if $value == figure{
                @include apply_style("box-style","block-style");
            }
            @else if $value == nav{
                @include apply_style("box-style","block-style");
            }
            @else if $value == section{
                @include apply_style("box-style","block-style");
            }
            @else if $value == video{
                @include apply_style("box-style","block-style");
            }
            @else if ($value == th) or ($value == td){
                @include apply_style("box-style");
            }
            @else if $value == address{
                @include apply_style("box-style","block-style");
            }
            @else if ($value == address) or ($value == caption) or ($value == cite) or ($value == code) or ($value == dfn) or ($value == em) or ($value == var) or ($value == i){
                @include font-style(null,null,400,normal,null);
            }
        }
    }
}
.blind,.skip {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    z-index: -1;
    opacity: 0;
}

//필요한 해당 태그가 있다면 아래와 같이 추가합니다. 각 태그 별로 reset 스타일 노출
//원하는 리셋이 없다면 @mixin other-reset 원하는 태그 넣어서 만들어줍니다.
//h1~h6은 "h"로 통일한다.
@include other-reset("html","body","div","h","em","button","dl","dt","dd","p","img","ul","ol","li","a","caption","hr","legend","textarea","table","input","article","aside","footer","header","menu","nav","section","form","address");