SASS

css가 몇천줄이 넘어가기 시작한다면 css관리 자체로 큰 부담이 된다

이런 여러가지 상황들을 해결할 수 있는 전처리언어(Preprocessor)를 만듬

그 중 하나인 Sass는 css를 조금 더 프로그래밍 언어스럽게 작성할 수 있는 문법들을 제공

CSS로 색상 지정할 때 #2a4c6e 이런 컬러코드를 사용

SASS 파일에선 이런 어려운 값들을 예쁜 한글로 치환해서 사용할 수 있음

변수라는 문법을 쓰면 되는데 변수 문법은 어려운 값들을 이쁜 단어에 저장해서 쓸 수 있게 도와주는 문법

(test.scss)
$main-color : #2a4c6e;
$sub-color : #333333;

.text {
  color: $main-color
}
.box {
  background: $sub-color
}

• 이거 말고도 width, font-size 등 자주 쓰지만 기억하기 어려운 값들을 넣으면 매우 편리합니다.
• $변수이름은 영어도 좋고 한글도 잘 먹습니다.
• 많은 곳에서 공통적으로 사용하는 값들도 저기 넣으면 좋습니다.

사칙연산도 바로 가능

(test.scss)

$기본사이즈 : 16px;

.box {
  font-size : $기본사이즈 + 2px;
  width : (100px * 2);
  height : (300px / 3);
}

(참고1) SASS없이 그냥 CSS 파일에도 var() 이걸 이용해서 변수문법을 사용가능

(참고2) 그냥 CSS 파일에서도 calc() 라는 함수를 이용하면 사칙연산을 사용가능

== sass파일과 scss파일의 차이점

sass문법으로 코드짤 때는 중괄호 생략이 가능 - 복붙많이하는 사람은 scss파일을 쓰는게 좋음

Sass 문법 2. 셀렉터 대신 쓰는 Nesting

셀렉터를 많이 사용하다보면 코드 자체가 복잡해짐

예) div.container > div p.first > span::after

그래서 셀렉터의 외모를 개선할 수 있는 Nesting이라는 문법이 존재

.navbar {
  ul {
    width : 100%;
  }
  li {
    color : black;
  }
}
/*위에건 SASS 문법*/

.navbar ul { 
  width : 100%; 
}
.navbar li { 
  color : black; 
}
/*밑에건 CSS 문법*/

위 두개의 코드는 같은 기능을 하는 코드입니다.

중괄호 안에 또 셀렉터를 쓰시면 그것은 셀렉터상의 스페이스바 문법과 동일하게 작성가능합니다.

Nesting할 때 괄호를 3개 4개 타고 들어가는건 권장하는 방법이 아닙니다.

SASS 문법 쓰거나 안쓰거나 셀렉터를 길게 나열하는건 좋은 관습이 아닙니다.

그냥 깔끔하게 클래스 하나 선언해서 사용하는게 나음

Sass 문법 3. 이미 있는 클래스를 확장하는 @extend

이미 존재하는 속성들을 복붙하지 않고 사용하실 수 있습니다.

@extend 그리고 여러분이 복붙해야할 클래스 명을 뒤에 적어주시면 끝입니다.

.btn {
  font-size : 16px;
  padding : 10px;
  background : grey;
}

.btn-green {
  @extend .btn;
  background : green;
}

%div{
  width: 200px;
  height: 200px;
  padding: 20px;
}

.div-green{
  @extend %div;
  background-color: green;
}
.div-blue{
  @extend %div;
  background-color: blue;
}
.div-red{
  @extend %div;
  background-color: red;
}

보통 비슷한 디자인의 요소들을 양산할 때 많이 사용합니다.

% 기호는 .대신 쓸 수 있는 임시클래스인데

CSS파일에서 클래스로 컴파일하지 않고싶을 때 쓰는 기호입니다.

컴파일하고나면 %기호 안에 있는 것들은 흔적도 없이 사라집니다.

Sass 문법 4. 코드를 한단어로 축약하는 @mixin

변수랑 매우 유사합니다.

변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데

@mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능합니다.

@mixin 버튼기본디자인() {
  font-size : 16px;
  padding : 10px;
}

.btn-green {
  @include 버튼기본디자인();
  background : green;
}

1. @mixin이라고 쓰고,

2. 이름을 하나 지어주고 ( ){ } 붙이고,

3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 됩니다.

그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙됩니다.

아무튼 여러줄을 한 단어로 치환해서 쓰고싶을 때 쓰는 문법이 바로 @mixin 입니다.

구멍을 뚫어서도 사용 가능

@mixin 버튼기본디자인($구멍) {
  font-size : 16px;
  padding : 10px;
  background : $구멍;
}

Sass 문법 5. @use와 언더바 파일

CSS파일마다 맨위에 첨부하는 reset같은걸 자주 복붙하는 분들은

import문법을 사용하시길 바랍니다.

복붙시간을 줄여줄 수 있습니다.

@use '_reset.scss';

reset.$변수명;  /* 다른 파일의 변수쓰는법 */
@include reset.mixin이름();  /* 다른 파일의 mixin쓰는법 */

scss 파일명을 작명할 때 언더바를 파일명 맨 앞에 붙이는 경우가 있습니다.

언더바 _기호를 파일명 맨앞에 사용하시면 "이 파일은 CSS파일로 따로 컴파일하지 말아주세요" 라는 의미입니다.

그냥 첨부용 파일이라는 것이지요.

@use 해온 다른 파일에 있던 $변수와 @mixin을 가져다 쓸 수도 있습니다.

이 경우엔 그냥 쓰는게 아니라 꼭 파일명을 앞에 붙여야합니다.