SASS( SCSS )가 궁금해서 찾아봤다냥

css 전처리기 ?

- 웹에서는 스타일을 css 밖에 처리하지 못한다. 그래서 직접 동작하지 못하는 문법을 Sass와 같은 전처리기로 작성하고 css 로 컴파일 시켜 동작시킨다. Sass 뿐만 아니라 Less, Stylus 등이 있다.

 

기존 css의 문제점

- 불필요한 selector 과용

- 연산기능의 한계

- statement의 부재

 

이러한 문제점들은 프로젝트가 커질 수록 단점이 부각된다. 위를 보완하기 위해 굳이 순수 css 보다 전처리기를 통해 스타일링하는 것이다.

 

SCSS?

SCSS는 css와 흡사한 문법으로 Sass 기능을 지원한다. css 의 상위 집합이라고 생각하면 된다.

Sass와 SCSS의 문법적 차이점

Sass:

들여쓰기로 구분하며 세미콜론(;)과 중괄호({}) 를 사용하지 않는다.

.box
  width: 300px
  p
    color: red

 

SCSS:

세미콜론과 중괄호를 사용해 구분한다.

.box {
	width: 300px;
    
    	p {
    	color: red;
    	}
}

 

보통 css 와 문법이 비슷한 SCSS를 많이 사용한다.

 

Nesting

Sass는 중첩기능이 가능하다. 상위 선택자의 반복을 피해 코드를 더 간결하게 짤 수 있는 것이 장점이다.

 

- 셀렉터 네스팅

css : 

.div p {
	color : #fff;
}

SCSS :

.div {
	p{
    	color: #fff;
    }
}

- 속성 네스팅

css :

.div p {
	font-size : 10px;
    font-weight: lighter;
}

SCSS:

.div {
	p {
    	font: {
        	size : 10px;
            weight: lighter;
        }
    }
}

 

- 상위요소 치환

셀렉터 치환 )

css :

a {
	color: black;
}

a:hover {
	color: red;
}

SCSS :

a {
	color: black;
    &:hover {
    	color: red;
    }
}

클래스 치환 )

css :

.box_red {
	background-color: red;
}

.box_blue {
	background-color: blue;
}

.box_green {
	background-color: green;
}

SCSS:

.box {
	&_red {
    	background-color: red;
    }
    &_blue {
    	background-color: blue;
    }
    &_green {
    	background-color: green;
    }
}

 

문자열의 치환

#{...}를 사용하면, 다른 변수의 내용으로 치환이 가능하다.

$class_name: box;

p{
	&.#{class_name} {
    	color: blue;
    }
}

 

sass 공부를 하며 내가 필요하다고 생각되는 기능들만 정리해보았다. 더 깊게 들어간다면 기능들은 무수히 많으니 더 열심히 파보아야게따.

 

참조: https://heropy.blog/2018/01/31/sass/