본문 바로가기
  • purple-whale
SASS(SCSS)

SCSS 연산자

by purple-whale 2021. 1. 22.

scss에서는 연산이 가능합니다. ( +, -, *, / , % )

 

h1의 가로 값은 변수wrapW에서 3을 나눈 값으로 넣어주고

#gnb의 가로 값은 변수wrapW에서 2을 나눈 값으로 넣어주고

header {
    height: 200px;
    background: $green;
    display: flex; justify-content: space-between;
    h1 {
        width: $wrapW/3;
    }
    #gnb {
        width: $wrapW/2;
        height: 100px;
        background: $tomato;
        li {
            float: left;
        }
        a {
            display: block;
            &:hover {
                color: $tomato;
            }
        }
    }
}

'SASS(SCSS)' 카테고리의 다른 글

웹 아이콘, 웹 폰트 사용하기  (0) 2021.01.25
SCSS 주석 넣기  (0) 2021.01.22
SCSS - @import 하기  (0) 2021.01.22
SCSS : @mixin - @include 사용하기  (0) 2021.01.22
SCSS 작성 하기  (0) 2021.01.22

댓글