Day21. Sass - Scss 정리

히진로그·2022년 4월 26일

멋쟁이 사자처럼 프론트엔드 스쿨 2기

목록 보기

13/22

💡CSS 전처리기 Post processor

기존 CSS syntax보다 좀 더 간편한 문법을 사용해서 개발해나가는 것
변수를 설정할 수 있고, 부모선택자 안에 자식 선택자를 중첩해서 사용할 수도 있다.
모듈별로 나누어 관리할 수도 있다.
쉬운 방법으로 개발하다가 배포 전에는 순수CSS로 변환해준다.

💡Sass

Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다. 브라우저가 직접 Sass를 로딩하는 것이 아니고 개발을 Sass로 한 다음, CSS로 export하는 과정을 거친다.

Sass 기술방식 2가지 .sass .scss

Scss는 CSS와 동일하게 중괄호를 사용하는 방식이다. 일반적으로 CSS와 좀 더 유사한 Scss를 사용한다.

Vscode에서 아래 extension을 다운받고 .scss파일을 만든 후 하단 상태바에서 Watch Sass를 클릭해주면 사용할 수 있다.

💡 Sass 시작하기

* 아래 내용은 강의를 보고 정리한 내용입니다.

기본적으로 CSS에서 쓸 수 있는 문법은 Sass에서도 사용가능하다.

* Sass에서 작성한 내용은 자동으로 CSS파일로 컴파일된다.
Sass에 코드를 적어나갈 때마다 CSS파일에 자동으로 overwrite중복작성 된다.

📎 Variable

CSS에서도 변수를 사용할 수 있고 브라우저와 90% 호환된다.

Sass에서는 --대신에 $사인이 변수를 선언한다는 표시다.

CSS로 컴파일 된 것을 보면 실제 값이 들어간 것을 볼 수 있다.

Sass로 변수를 설정해 관리해주면 유지 보수를 할 때에도 변수 값만 변경해주면 되기 때문에 쉽게 할 수 있다는 장점이 있다.

📎 Maps

자바스크립트를 안다면 좀 더 익숙하게 다가올 수 있는 개념이다.
Maps는 key와 value로 짝지어진 리스트이다.
color나 다른 속성들을 Maps을 이용해 리스트로 정의해서 쓸 수 있다.

Maps 리스트를 만들 때는 ()를 열고 "key": value 형태로 적어주면된다.
요소에 MAPS를 사용할 때는 map-get(variable, "key"); 이렇게 사용해 줄 수 있다.
+ key부분의 ""는 생략해도 된다. 잘나온다.

📎 Nesting 중첩

정말 좋은 속성이지만 프로젝트의 규모에 따라 조심히 써야한다.

보통 CSS를 작성하는 경우라면 위 방식처럼 써주겠지만, 중첩 속성을 이용하면 좀 더 간편하게 작성할 수 있다.

CSS에서도 잘나온 것을 확인 가능하다.

마크업 구조가 이렇게 되어있고 다시 Sass에서 중첩속성을 사용할 때,
부모클래스 이름을 또 적어주지 않는 방법이 있다. 바로 & 사용이다.

그런데 CSS를 확인해보면 우리가 원하는 대로 나오지 않았다. 이 부분을 고쳐주기 위해서 &를 #{&} 이렇게 작성해 주면 된다.

그러면 이렇게 잘나온당!

📎 Partial (파일 나누기)

큰 프로젝트나 협업을 하는 경우 모듈화하는 것이 유지보수에 좋다.
파일 앞에 "_"를 붙여서 저장해줘야 한다. 붙이지 않으면 분할된 파일 모두 컴파일 되기 때문이다. "_"붙여서 저장하면 Sass가 분리된 파일임을 알고 해당파일은 CSS로 컴파일하지 않고 main파일 안에서 @import로 동작한다.
* Sass에서 분리된 파일을 import할 때는 url없이 파일명만 작성할 수 있다.

나눠진 파일을 main Sass파일에 import하면 컴파일러에 의해 자동으로 벤더 프리픽스가 붙는다.

📎 function

자바스크립트 function을 알고 있다면 Sass의 function에도 익숙할 것이다.

@function 함수이름($매개변수) {
	// 실행 코드
	@return 값
}

Scss에서 함수는 위와 같이 작성할 수 있다.
앞에서 Maps을 공부할 때 요소에서 Maps리스트를 불러오기 위해
font-weight: map-get($font-weights, bold);이렇게 작성했었는데,
함수를 만들어 깔끔하게 적어볼 수 있다.

Maps리스트를 불러오기 위한 weight함수를 만들고 map-get()부분을 함수 리턴 값으로 주고, 매개변수를 설정해주어 요소에서 주는 인수를 받아 Maps리스트에서 값을 받아올 수 있도록 했다.

지금 요소에서 font-weight에 weight함수 인자로 bold를 전달하고 있다.
weight함수의 매개변수인 $weight-name이 전달된 bold를 받아서 리턴 값의 map-get($font-weight, bold)로 전달되어 Maps리스트의 bold값인 700을 최종적으로 font-weight: 700; 이렇게 전달해주는 것이다.

📎 mixin

mixin은 function과 비슷하다.
요소에 display: flex;를 주고 정렬값인 justify-content: center; align-items: center;를 준다고 했을 때 매번 적어주기 귀찮다. 이걸 mixin으로 만들어보자.

만든 mixin을 @include를 이용해 요소에 넣어줄 수 있다.

function과 비슷하게 mixin에도 인수를 전달해줄 수 있다.

flex의 방향 값을 인수로 전달받는 매개변수 $direction을 만들고 flex-direction에 전달한다.

그리고 요소에 위와 같이 써줄 수 있다. 전달된 인수 column은 매개변수 $direction이 받아서 flex-direction의 값으로 전달된다.

function과 mixin이 비슷하지만 다른점!

function은 계산된 값과 리턴 값을 사용한다.
mixin은 스타일을 정의한다.

📎 extend

extend는 선택된 요소에 모든 속성값을 inherit 상속받도록 할 때 사용할 수 있다.

형제 요소로 작성된 두 p태그가 있다. main__paragraph1의 속성 값을 main__paragraph2가 모두 상속받도록 할때 extend를 써줄 수 있다.

이렇게 써주면 main__paragraph1에 적용된 font-weight과 호버되었을 때 폰트 컬러를 main__paragraph2도 똑같이 가지게 된다.