No 3. SASS

😁 어썸한 css 전처리기를 배우고 나서 너무 신세계라 포스팅을 하려한다 ! 야홋!

💡 이 포스팅은 sass 공식 홈페이지를 참고했습니다.
https://sass-lang.com/guide

SASS란?

SASS란 Syntactically Awesome Style Sheets라고 불리며 css를 편리하게 이용할 수 있도록 도와주는 전처리기다!라고 우선 생각 해놓은뒤, 아래의 내용에서 더 알아보도록 하자 😁

💡 전처리기 -> 데이터를 처리하여 다른 프로그램에 대한 입력으로서 사용되는 출력물을 만들어내는 프로그램

Variables(변수)

(물론 css에서 변수를 사용 할 수 있지만) sass에서는 변수 사용이 가능하다. 어떠한 상징색이 있고, 그 상징색을 어디서나 써야 한다면 다음과 같이 변수로 만들어 저장하면 편하게 계속해서 사용 할 수 있을것이다.

$my-color: red; //-> 변수를 선언했으므로 어디서나 이용가능

body{
	background: $my-color; //-> red
    color: $my-color; //-> red
}

Nesting(중첩)

html에서 흔히 ul > li > a 처럼 들어가는 상황이라면 css에서는 다음과 같이 나타낼것이다.

/* 필자의 경우는 정확한 식별자를 애용하는 편이다.. */
ul {
	margin: 0;
    padding: 0;
    list-style: none;
}

ul > li {
	display: inline-block;
}

ul > li > a {
	display: block;
    padding: 6px 12px;
    text-decoration: none;
}

이러한 귀찮은 상황에서 sass는 다음과 같이 나타낼 수 있다.(이때 sass에 사며들었다.. 🥺🥺)

 ul {
 	margin: 0;
   	padding: 0;
   	list-style: none;
    
    li {
    	display: inline-block;
        
		a {
		   display: block;
		   padding: 6px 12px;
		   text-decoration: none;
		}
        
    	  }    
 }

html 구조가 더욱 복잡했다면 아마 css는 더 길어질것이고, 내가 찾는 css 클래스명을 컨트롤+f 로 열심히 찾아보는 상황이 생길것이다..(그렇다 필자의 경험이다..😒)

Modules(모듈)

@use 'sass'은 css의 @import와 유사하지만 원하는 파일을 모듈로 로드한다라고 나와있다. import는 단순히 그 파일을 불러오지만, scss는 변수, mixins 및 함수를 참조 할 수 있다.

Mixins(믹신)

sass는 변수를 만드는것 뿐 아니라 내가 원하는 스타일을 믹스해서 하나의 속성 덩어리(?)로 만들어주는것이다. 설명보다 직접 코드를 통해 알아보자

@mixin flex{
	display:flex;
	justify-content: center;
	align-items: center;
}

.center {
	@include flex //이제 중앙 정렬이된다!
}

------------------------------------------

//공홈에 나와있는 mixins 사용법

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.alert {
  @include theme($theme: DarkRed);
} // css에선 다음과 같이 표현한다 .alert { background: DarkRed; }

Extend/Inheritance(확장/상속)

sass는 확장/상속이라는 개념이 있는데, 내가 마음에 드는 클래스명과 속성이 있다면 다른 클래스에서 상속을 통해 가져올 수 있다. 이것 또한 말보단 코드로 설명하겠다.(이번에는 w3schools가 이해하기 쉬운것 같아서 w3schools 코드로 가져왔다.)

//내가 만들고 싶은 클래스와 속성
.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

//button-basic를 상속 받아서 다음과 같이 쓴다!
.button-report  {
  @extend .button-basic;
  background-color: red; //상속 받지 않은 값
}

이밖에 연산도 가능하지만 쉽게 사용이 가능해서 생략하겠다!

알면 알수록 쉬운 sass를 이제 써보다니.. 이제라도 알았으니 알차게 써야겠당! 🥳🥳🥳🥳🥳