[SASS] 변수와 함수 작성

기본 작성법

        dl{
            margin:0;
            padding: 0;
            dt{
                margin:0;
                padding:0;
            }
            dd{
                margin:0;
                padding:0;
            }
        }
 

태그를 작성하고 그 안에 대한 css 속성을 작성하며, 그 하위의 경우는 위의 소스와 마찬가지로 중괄호 안에 새로 그 태그에 대한 속성을 지정해준다. 

위의 소스를 컴파일 하면 아래와 같이 작성된다.

dl{margin:0;padding:0}
dl dt{margin:0;padding:0}
dl dd{margin:0;padding:0}

부모참조선택 작성

SASS에서는 &는 부모참조 선택자라 하여 부모선택자를 참조 할 수있다. &선택자를 사용할때는 중괄호안에 해당 태그의 스타일과 동일선상에 써주면 된다.

.a_tag{
    color: $fontColor;
    text-decoration: none;
    &:hover{
        text-decoration: none;
    }
    &__span{
        color:red;
    }
}

위의 소스를 보면 a_tab의 클래스를 가진 태그의 hover에 css를 추가했다. 부모참조선택자의 확장성은 그 아래의 소를 보면 알 수 있다. "&__span" 의 의미는 ".a_tag" 클래스의 자식태그 중 클래스명 "a_tag__span"에 css 속성을 부여했다. 아래 컴파일 된 소스를 보면 좀 더 쉽게 이해를 할 수 있다.

.a_tag{color:#000;text-decoration:none}
.a_tag:hover{text-decoration:none}
.a_tag__span{color:red}
 

SCSS 임포트

@import "layout";

scss 파일을 임포트할 경우에는 파일 확장자명 "scss"는 생략해도 된다. 

[작성법] http://wit.nts-corp.com/2015/01/09/2936

[문법] http://soooprmx.com/wp/archives/5059