SASS 사용하기 (문법)

SASS를 사용하기 위해 SASS에 문법에 대해 알아보도록 하죠.

* SASS는 마크업에서만 사용되는 언어로서

공유나 실서비스에 표출되는 것이 아니기 때문에 파일을 여러개 나누어 Import해도 되며, 변수명도 축약어로 사용하지 않아도 됩니다.

1. compail

만약 SCSS 를 작성하였다면 CSS파일로 변환(Compile)해 주어야 합니다.

CMD창을 scss파일이 있는 폴더에서 열어 아래와 같이 명령어를 작성해 주어야 하는데 방법은 여러가지 입니다.

• 기본방식 - 작성후 한번만 Compile 해줍니다.

 
sass (작성된)파일명.scss (변환될)파일명.css
 

우리는 더욱 간편한 css 작성을 위해 scss 사용하는것인데 scss 작성 후 저장할때마다 위의 명령어를 작성하면 안되겠죠?!

한번 선언하면 자동적으로 Compile 해주는 명령어를 알려드리겠습니다. --watch 명령어를 이용하면 됩니다. --watch 말고도 기타 설정을 해주는 명령어도 있으니 같이 작성해 보도록 하겠습니다.

// 작성방법
sass --watch --style 스타일종류명 -E utf-8 파일명.scss:./css/파일명.css
 
// 작성 예시
sass --watch -E utf-8 --style compact style.scss:./css/style.css
 
sass -w -E utf-8 -t compact style.scss:./css/style.css (함축형)

위의 내용을 간단히 설명하자면

• --watch : 파일을 저장하면 자동으로 컴파일을 실행해 줍니다.
• --style 스타일 종류명 :  어떠한 방식으로 컴파일 할지 설정해 줍니다.
• -E : 입력파일에 기본 인코딩을 지정합니다.(왜냐하면 영어가 아닌 한글이 들어갈 경우 오류가 남. 전 utf-8 로 설정하였습니다.
  @charset "utf-8"; 이 css 파일에 입력 됩니다.)
• 다음은 scss 파일이 변환될 css 파일의 경로를 설정해 주었습니다. scss 와 css 의 경계는 콜론(:)을 꼭 명시해 주어야 오류가 안납니다.

2. SASS 작성방법

2-1. Variables - 변수

- 작성방법 : $변수명 : 속성값;

SCSS

 
$d-block:block;
$cr-red:red;
 
.box{display:$d-block; color:$cr-red;}
 

CSS

.box {
  display: block;
  color: red; }
 

2-2. Nesting - 중첩

SCSS

 
.box{
    color:#888;
    &:after{
        content:"";
        display:block;
        clear:both;
    }
    .top-box{
        height:100px;
    }
    .foot-box{
        height:200px;
    }
}
 

CSS

.box {
  color: #888; }
.box:after {
    content: "";
    display: block;
    clear: both; }
.box .top-box {
    height: 100px; }
.box .foot-box {
    height: 200px; }
 

2-3. Mixin

- 작성방법 : 

• 선언 : @mixin mixin명{}
• 호출 : @include mixin명;

Mixin은 아래 보는 것과 같이 css 작성 함에 있어 자주 사용되고 중복되어지는 부분을 

상단에 한번의 선언으로 인하여 여러번 작성할 필요가 없이 mixin을 include 로 변경하여 적은 내용으로 긴내용의 css 를 적용할 수 있습니다.

또한

border-radius 속성같은 경우 속성의 값이 여러가지로 변경 되어지는 부분이므로 변수명을 인자값으로 넣어 

적용되어지는 스타일에 유동적으로 값을 변경할 수 있도록 설정해 주면 됩니다.

SCSS

@mixin cf{
    &:after{
        content:"";
        display:block;
        clear:both;
    }
}

@mixin bd_radius($bdr_size:3px){
    -webkit-border-radius:$bdr_size;
    -moz-border-radius:$bdr_size;
    border-radius:$bdr_size;
}

.box{
    @include cf;
    @include bd_radius($bdr_size:3px);
}
 

CSS

.box {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.box:after {
    content: "";
    display: block;
    clear: both;
}
 

2-4. Extend

- 작성방법 : 

• @extend .클래스명; or
• @extend %클래스명;

extend는 어떠한 클래스가 정의되어 있다면 그 클래스를 다시 재활용할 수 있게 만들어 줍니다.

다시 사용하려는 클래스를 @extend 를 선언하고 뒤에 클래스 명이나 %클래스명을 붙여주고 사용하면 됩니다.

아래의 예제를 보시면 이해하시는데 도움이 될 것 입니다.

개인적인 견해로 볼때 extend는 extend로 어떠한 클래스나 %를 사용하여 컴파일하면 콤마(,)로 묶는 경향이 있습니다. 

추후 작업시 scss 파일이 있다면 상관없지만 없다고 가정하였을 시 css로는 각각 묶여있는 상태이기 때문에 

본래의 내용을 유지하여 변형하기는 힘들다는 생각이 드는군요.,

SCSS

.skip{
    display:none;
}

%hidden{
    overflow:hidden;
}


.box_01{
    color:red;
    @extend .skip;
    @extend %hidden;
}

.box_02{
    color:blue;
    @extend .skip;
    @extend %hidden;
}

CSS

.skip, .box_01, .box_02 {
    display: none;
}

.box_01, .box_02 {
    overflow: hidden;
}

.box_01 {
    color: red;
}

.box_02 {
    color: blue;
}

이상으로 SASS 사용법을 정리하며 다른 추가적인 내용이 있다면 정리하겠습니다.

참고하시는 분들도 확인 후 잘못된 점이 있다면 코멘트 부탁드립니다. ^^