2023/06/21

Sass

프로젝트가 커질 수록 코드가 지저분해지는 CSS의 단점을 보완하기 위해 사용한다.

환경 설정

1. npm init -y
2. npm i sass

명령어

컴파일

• (npx) sass 파일이름.scss 파일이름.css
  => 지정한 scss 파일을 지정한 이름의 css 파일로 컴파일
• (npx) sass scss의폴더이름:css의폴더이름
  => 지정한 scss 폴더를 지정한 이름의 css 폴더로 컴파일
  => 파일이름은 동일하게 컴파일

자동 컴파일

컴파일 명령어 뒤에 --watch를 붙인다.
=> scss 파일을 저장할 때마다 css 파일로 자동으로 컴파일

압축된 css 파일로 컴파일

컴파일 명령어 뒤에 --style=compressed를 붙인다.
=> 배포 환경에서 사용

소스맵 없이 컴파일

컴파일 명령어 뒤에 --no-source-map를 붙인다.
=> 소스맵은 유지보수에는 용이하나 배포 환경에선 불필요하므로 배포 환경에서 사용한다

단축어 설정

1. package.json 파일 내에 scripts 영역에 "단축어": "명령어"를 추가
2. 터미널창에 npm run 단축어를 실행해서 사용

중복 명령어 줄이기

=> 명령어에 중복 명령어의 단축어를 앞에 추가하고 --를 사이에 넣는다
=> "단축어": "중복명령어의단축어 -- 추가할명령어"

폴더 삭제하기

rimraf 패키지를 설치하고 명령어에 rimraf 폴더이름을 사용하면 쉽게 삭제할 수 있다.

중첩 규칙

중첩을 사용하여 중복된 선택자를 더 쉽게 사용할 수 있다.

• 상위 선택자의 {} 안에 선언 구조를 추가하면 중첩된 구조를 사용할 수 있다

ul {
    li {
    }
}

위의 중첩된 구조는 아래와 같다.

ul li {
}

=> 중첩이 많아질수록 가독성이 떨어지기 때문에 가급적 2단계로 하자

@at-root 지시자를 선언하면 선택자가 중첩되지 않는다.

• &를 사용하여 공통된 클래스이름을 재사용할 수 있다.
  => & 뒤에 텍스트를 추가하면 공통된 클래스이름에 해당 텍스트가 이어지는 클래스이름이 된다

button {
	&:hover {
  	}
}

위는 아래와 같다.

button:hover {
}

모듈(modules)

자주 사용되는 속성과 값을 별도의 파일에 분리해서 관리하고 필요할 때 불러와서 사용할 수 있는데, 그때의 분리된 파일을 모듈이라고 한다.

모듈 불러오기

@import와 같은 방식으로 @use를 사용해서 모듈을 불러올 수 있다.
=> 확장자이름은 생략할 수 있고, 해당하는 별칭(namespace)을 같이 써야 해당 모듈을 사용할 수 있다.

@use "경로/폴더(파일)이름" as 별칭 

• 별칭을 생략할 경우에는 폴더(파일) 이름이 별칭이 된다
• 별칭을 *로 하면 별칭을 붙이지 않고 모듈을 사용할 수 있다

모듈의 변수를 사용하기

변수이름 앞에 해당 별칭을 붙인다
=> 별칭.변수이름

모듈 내보내기

@forward를 사용하여 반복적인 @use의 사용을 줄일 수 있도록 모듈의 묶음을 만들 때 사용한다.

• 사용방법은 모듈을 불러오는 방식과 같다
• _와 같이 파일 이름의 index도 생략할 수 있어서 파일 이름이 _index인 모듈로 합치고 폴더 이름을 호출하는 방식을 사용할 수 있다
• forward 할 때 cascading 되기 때문에 선언 순서도 고려해야 한다.

파셜(partials)

scss파일들을 css파일로 컴파일하는 과정에서, 컴파일할 필요가 없는 파일들을 파셜이라고 한다.

=> 파일 이름 앞에 _를 붙이면 변환에서 제외시킬 수 있다
=> 모듈을 불러올 때는, 파일 이름에 _를 넣지 않아도 불러올 수 있다

변수

Sass에서는 변수 이름의 -와 _를 구분하지 않는다.
$변수이름: 값

Interpolation(보간법)

변수의 연산이나 값이 아닌, 변수의 이름을 그대로 출력이 필요할 때 사용한다.

#{변수이름}은 변수이름으로 출력된다.

@each in

javascript의 for in문과 같다.

믹스인(mixin)

코드의 반복을 줄이기 위해 모듈뿐만 아니라 믹스인을 사용할 수 있다.

믹스인 정의하기

@mixin_믹스인이름{
코드
}

해당 코드들을 정의한 이름의 믹스인 안에 담는다.

믹스인 사용하기

ul {
  @include_믹스인이름;
}

선언부에 해당 믹스인의 모든 코드가 삽입된다.

매개변수를 이용해서 믹스인 사용하기

믹스인을 정의할 때 믹스인이름 뒤에 () 안에 $로 시작하는 매개변수 이름을 설정하고 코드에서 변수가 될 부분에 삽입한다.

@mixin_믹스인이름($변수이름: 기본값)

• 변수를 설정할 때 기본값을 설정할 수 있다
• 변수를 2개 이상인 믹스인을 사용할 때는 정의된 변수의 순서를 지켜야 하고, 순서를 지키지 않으려면 변수 이름과 값을 같이 넣어줘야 한다

  코드에서 #{매개변수이름}으로 사용하면 변수 이름의 텍스트를 그대로 값으로 할 수 있다

연산자

Sass에서는 기본적인 계산기능을 제공한다.
=> 계산기능을 사용하기 위한 내장함수 @use 'sass:math'를 먼저 선언해야 한다.

• 곱하기를 제외하고는 단위가 같아야만 계산된다
  => 단위가 다를 때는 calc() 함수를 사용하자
  => 곱하기를 사용할 때는 단위는 한 쪽만 적어준다
• 나누기는 / 대신 math.div(분자, 분모)를 사용한다

컨텐츠 블록(contents block)

믹스인을 정의할 때 코드를 삽입하지 않고, 믹스인을 사용할 때 코드를 삽입하고자 할 경우에, 해당 코드 부분을 컨텐츠 블록이라고 한다.

• 믹스인을 정의할 때
  => 컨텐츠 블록을 사용할 부분에 @content를 삽입한다
• 믹스인을 사용할 때
  => 믹스인 이름 뒤에 {}를 추가하고 안에 코드를 삽입한다

함수(function)

믹스인과는 다르게 계산해서 코드를 내보낼 때 사용한다.

@function 함수이름(변수이름) {
	@return 변수와연산의내용
}

• 연산을 할 경우에는 단위가 같아야 한다
  => 단위를 생략할 경우에는 한 쪽의 단위를 따라간다
• 나누기 연산을 할 때 인수의 단위가 같으면 단위가 제거된다
  => 함수를 중첩해서 단위를 변환하는 함수를 만들 수 있다

절대경로

이미지 등의 파일을 삽입한 scss 파일을 컴파일하는 과정에서 scss 파일과 css 파일의 경로가 서로 다를 때 불러올 수 없는 상황을 방지하기 위해 사용한다.
=> 일반적으로 사용하는 상대경로와 달리 '/'로 시작하며, 루트 디렉토리부터 경로를 작성한다.

주석

/*내용*/은 컴파일된다.
//내용은 컴파일되지 않는다.