css - SCSS

SCSS

scss는 css를 보다 쉽고 편하게 작성 및 관리를 위해 만들어진 css 전처리기이다.

기본적으로 네스팅 문법을 지원해 코드 작성 및 상속을 보다 쉽게 작성할 수 있다.

 

SCSS 계산

기본적으로 css 내에서 계산을 할 땐, calc(); 를 사용했지만

SCSS에선 height: 100px * 2; 이런 식으로 바로 계산이 가능하다.

import './경로/파일';

SCSS 파일 최상단에 위의 코드를 인입해 다른 경로의 SCSS 파일을 가져올 수 있다.

 

autoPrefix

Live Sass Complier 확장 설정에서 package.json 파일에 들어가면 설정할 수 있다.

-webkit 소스들을 세팅할 수 있다.

"liveSassCompile.settings.autoprefix": [

       

        "> 1%",

        "last 2 versions"

    ],

 

해당 코드를 .json 파일 하단에 넣어주면 Sass 컴파일러가 자동으로 크로스브라우징을 해준다.

flex가 지원되지 않는 IE나 구버전 브라우저들도 해당 컴파일러가 자동으로 -webkit을 설정해 크로스 브라우징을 가능하게 해준다.

(Can I use 홈페이지에서 크로스 브라우징 허용범위 확인 가능 / 97% 이상이면 웬만해선 사용가능)

 

 

format : css 빌드 형식 

- expanded : 확장

- nested : 컴파일 기본 값 / 미지정시 사용

- compact : 줄바꿈 없이 한 줄로 사용 _ex) h1{ margin:0 auto; padding: 0;} 줄바꿈됨

- compressed : 불필요한 공백 모두 제거 _ex) h1{margin:0 auto;padding:0;}h2{margin:...}

 

extensionName : 저장될 확장자

 

savePath : 저장 경로

 

generateMap : map 파일 설정

 

_mixin.scss

일단 설명에 앞서 파일명 앞에 _가 붙은 파일들은 컴파일러에 읽히지 않는다.

그래서 읽히지 않고 작동만 하면 되는 css 파일들을 생성할 때 _를 붙인다.

 

mixin이란 SCSS 환경에서 코드를 모듈화시켜 사용할 수 있는 방법이다.

@mixin($line: 1) {
    overflow: hidden;
    white-space: nowrap;
    
    @if($line > 1) {
    	display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
    @else {
    	text-overflow: ellipsis;
    }
}

 

사용법은 위의 코드와 같다.

또한 SCSS에선 JS와 같이 if문도 사용이 가능하다.

 

@extend

extend는 상속이다.

_preset.scss 나 다른 파일에서 상속시킬 .a라는 클래스의 css 속성들을 작성했다고 치자.

main{
    > div{
    	@extend .a;
    }
}

 

이런 식으로 코드를 작성하면 main 과 바로 하윗단의 div들은 .a의 css 속성들을 상속받는다.