[HTML/CSS] - Sass 도입

HTML&CSS 강의

sass/scss --> 사스는 문법이 2개 sass문법, scss문법 (둘다 sass! 어떤 문법을 쓰느냐에 따라 달라짐)

Dart Sass를 최근 많이 씀

node-sass 대신 수업은 Dart Sass로 진행

sass:math
math:div(12px, 2);

package.json

{
  "scripts": {
    "start": "npm run watch",
    "sass": "sass sass:css",
    "watch": "npm run sass -- --watch"
  },
  "devDependencies": {
    "sass": "^1.38.0"
  }
}

script는 명령어를 설정하는 부분(start를 실행하는 경우 그냥 run을 안쓰고 npm start만으로도 실행이 가능, 다른 것들은 run키워드가 필요함!), devDependencies는 npm으로 설치한 패키지들의 목록을 나타냄.
watch 부분의 --는 구분해주기 위해 하나 앞에 더 붙임.

개발할 때 style.css.map 파일 꼭 필요! (소스 맵)

 npm i -D rimraf
 

rimraf 패키지 설치

@use './base';
@use './color';

dart scss --> @import 대신 @use를 사용!

_functions.scss

// 루트 요소 기본 단위 --------------------------------------------------------------- /
$root-value: 16px !default;

// 단위 제거 함수 ------------------------------------------------------------------ /
@function removeUnit($value){
  @return ($value / ($value * 0 + 1));
}

// px을 rem 단위로 변경하는 함수 ------------------------------------------------------- /
@function rem($value, $base: $root-value){
  @return (removeUnit($value / $base)) * 1rem;
}

// px을 em 단위로 변경하는 함수 ------------------------------------------------------- /
@function em($value, $base: $root-value){
  @return (removeUnit($value / $base)) * 1em;
}

input요소의 크로스 브라우징을 위한 css

.form-input::-ms-clear, .form-input::-webkit-search-cancel-button, .form-input::-webkit-search-results-button {
  display: none;
}
.form-input::-ms-reveal {
  display: none;
}
.form-input::placeholder, .form-input::-ms-input-placeholder {
  color: #BDBDBD;
}

apperance: none; --> 요소내장구성요소제거

.form-group [class$="__label"]

input.scss

@use './base' as *;
@use './color' as *;
@use './function' as *;

// 입력 서식 기본 스타일 및 아웃라인 제거
.form-input__input {
    appearance: none;

    &:focus {
        outline: none;
    }
}

.form-input {
    //  중첩 패턴을 쓰면서도 명시도 점수를 낮출 수 있음
    &__label {
        display: block;
        color: $form-text-color;
        font-weight: 500;
        font-size: rem(14px);
    }

    &__input {
        display: block;
        padding: 0 rem(16px);
        width: 100%;
        height: rem(48px);
        border: 1px solid $form-border-color;
        color: $form-text-color;
        font-size: rem(14px);

        &::-ms-clear, 
        &::-webkit-search-cancel-button,
        &::-webkit-search-results-button {
            display: none;
        }
    
        &::-ms-reveal {
            display: none;
        }
    
        &::placeholder,
        &::-ms-input-placeholder {
            color: $form-placeholder-color;
        }


        // :not() 선택자의 경우 IE11 이하를 지원하지 않음.
        // &:not(:read-only):not([readonly]):not(:disabled) {
        // }
        
        &:hover {
            border-color: $form-border-hover-color;
        }
        &:focus {
            border-color: $form-border-focus-color;
        }


        &:read-only,
        &[readonly]  {
            background-color: $form-bg-readonly-color;
            cursor: default;
        }

        &:disabled {
            background-color: $form-bg-disabled-color;
            color: $form-text-disabled-color;
            cursor: not-allowed;
        }

        &:read-only:hover,
        &[readonly]:hover,
        &:disabled:hover,
        &:read-only:focus,
        &[readonly]:focus,
        &:disabled:focus {
            border-color: $form-border-color;
        }

    }

    &__input--error + .error-message {
        display: block;
    }

    @at-root .error-message {
        font-size: rem(14px);
        color: $form-error-color;
        margin-top: rem(8px);
        display: none;
    }

}

textarea.scss

@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;


.form-textarea__textarea {
    &:focus {
        outline: none;
    }

    &::-webkit-scrollbar {
        width: 4px;
    }
  
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background-color: rgba(#f00, 0.5);
    }
}

.form-textarea {
    &__textarea {
        display: block;
        padding: 0 rem(16px);
        width: 100%;
        height: auto;
        min-height: 80px;
        border: 1px solid $form-border-color;
        color: $form-text-color;
        font-size: rem(14px);
        resize: none;
    }

}

checkbox.scss

@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;

.icon {
    display: inline-block;
    font-size: 0;
    line-height: 0;
    overflow: hidden;

    &-checkbox--square {
        position: absolute;
        top: 0;
        left: 0;
        width: rem(18px);
        height: rem(18px);
        background-image: url(./../assets/sprite-checkbox-square.png);
        background-repeat: no-repeat;
    }
}

.form-checkbox {
    position: relative;
    
    &__checkbox {
        position: absolute;
        top: 0;
        left: 0;
        width: rem(18px);
        height: rem(18px);
        cursor: pointer;
    }

    &__checkbox:checked + &__label .icon-checkbox--square {
        background-position: -20px 0;
    }

    &__checkbox:disabled + &__label .icon-checkbox--square {
        background-position: -40px 0;
    }

    &__checkbox:checked:disabled + &__label .icon-checkbox--square {
        background-position: -60px 0;
    }



    &__label {
        position: relative;
        height: rem(18px);
        line-height: rem(18px);
        padding-left: rem(22px);
    }
}

switch.scss

@use "sass:math";
@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;


.form-switch {
    display: inline-block;
    position: relative;
    vertical-align: top;

    &__switch {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin-right: 80px;
        cursor: pointer;
    }

    &__switch:checked + &__label:after {
        transform: translateX(rem(16px));
    }

    &__switch:checked + &__label:before {
        background-color: $form-switch-bg-color;
    }

    &__label {
        $h: 24px;
        position: relative;
        height: $h;
        line-height: $h;
        padding-left: rem(50px);

        &::before, &::after {
            content: "";
            position: absolute;
        }
    
        &::before {
            width: rem(40px);
            top: 0;
            left: 0;
            height: 100%;
            border-radius: math.div($h, 2);
            background-color: $gray6;
        }

        &::after {
            top: rem(4px);
            left: rem(4px);
            width: rem(16px);
            height: rem(16px);
            border-radius: 50%;
            background: $form-switch-button-color;
            transition: all 300ms;
        }
    }

}

button.scss

@use "sass:math";
@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;

.button {
    box-sizing: border-box;
    display: inline-flex;
    padding: rem(8px) rem(16px);
    border: 0;
    outline: 0;
    font-size: rem(14px);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -1px;
    text-decoration: none;
    color: inherit;
    border-radius: rem(6px);

    &:hover,
    &:focus {
        box-shadow: 0 0 1px 1px rgba($button-shadow-color, 0.3);
        background-color: darken($button-default-color, 15%);
    }
}

[class*="button-fill--"] {
    color: $button-white-color;
}

.button-fill {
    &--default {
        background-color: $button-default-color;
    }
    &--primary {
        background-color: $button-primary-color;

        &:hover,
        &:focus {
            box-shadow: 0 0 1px 1px rgba($button-shadow-color, 0.3);
            background-color: darken($button-primary-color, 15%);
        }
    }
    &--warning {
        background-color: $button-warning-color;

        &:hover,
        &:focus {
            box-shadow: 0 0 1px 1px rgba($button-shadow-color, 0.3);
            background-color: darken($button-warning-color, 15%);
        }
    }
}

오늘은 저번 SecretCode 과제들을 sass를 설치하고 sass문법으로 다시 만들며 익숙해지는 시간이었다.

강의시간에 나온 사이트 & 찾아볼 것들

• Sass: Dart Sass
• rimraf - npm

강의자료에 나와있는 2개 동영상 보기(use & forward)