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

SCSS 작성 하기

by purple-whale 2021. 1. 22.

형제 선택하기 :

name { &형제name {명령문} }

.sec-g {
    &.sec-sns{
        h2 {
            font-size: 30px;
            color:$green;
        }
    }

마우스 오버 했을때 효과 넣기 : 

name {&:hover {명령문}}

a {
     display: block;
     &:hover {
              color: #dddddd;
     }
}

자신의 명령어는 중괄호안에 바로 작성,

붙어있는 명령어는 중괄호안에 '&'을 앞에 써준후 작성

 

가상클래스 넣기 :

텍스트 하단에 밑줄을 추가하는 등의 경우 가상클래스로 처리 가능

name { &::가상클래스name {명령어} }

 h2 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 5px;

        &::after {
            border-bottom: 3px solid $tomato;
        }
    }

 

 

 

 

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

SCSS - @import 하기  (0) 2021.01.22
SCSS : @mixin - @include 사용하기  (0) 2021.01.22
SCSS 변수  (0) 2021.01.21
SCSS란?  (0) 2021.01.21
SASS 컴파일 하기 (window)  (0) 2021.01.21

댓글