[ SCSS ] CSS도 계층적으로! SASS

🔎 Sass란?

• css의 확장 언어 (대체 언어 아님)
• css보다 조금 더 높은 자유도를 개발자들에게 부여해주는 언어
• CSS는 규모가 커질수록 코드가 복잡해지고 유지보수가 불편해지지만
  Sass는 코드의 재활용성을 높여주고, 코드의 가독성을 높여주어 유지보수가 쉬워짐

👀 SCSS랑 Sass의 차이점이 뭐야?

✔ SCSS방식

• CSS 처럼 {}와 ; 사용

$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

✔ Sass방식

• 중괄호가 아닌 들여쓰기 사용

$font-stack: Helvetica, sans-serif
$primary-color : #333

body {
    font: 100% $font-stack
    color: $primary-color
}

---

🔎 기본 문법

01. 주석

// : 한줄 주석 처리
/* */ : 블록 주석 처리

• 블록 주석처리에 한줄 주석처리 들어갈 수 있음
• 한줄 주석처리는 .css 파일에서 보이지 않음

02. Nesting (중첩)

: 상위 선택자의 반복을 줄일 수 있음. 복잡한 구조를 편리하게 개선 가능

/* SCSS */

.body {  
  .box {
    border: 1px solid black;
    p {
      color: red;
    }
  }
}


/* Compile to CSS */

body .box {
  1px solid black;
}

body .box p {
  color: red;
}

03. & (상위 선택자)

: Nesting(중첩) 내부에서 상위(부모)선택자 역할

/* SCSS */

.btn {
  position: absolute;
  
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}


/* Compile to CSS */

.btn {
  position: absolute;
}

.btn .active {
  color: red;
}

.list li:last-child {
  margin-right: 0;
}

04. $ (변수)

: 반복적으로 사용되거나 관리하고 싶은 값을 변수 지정

• $변수명 : 속성값;

/* html */
<h1>variables<h1>

/* SCSS */

$h1-size: 5em;
$h1-color: blue;
$h1-align: center;

h1 {
	font-size: $h1-size;
    color: $h1-color;
    text-align: $h1-align;
    }
    
    
/* Compile to CSS */

h1 {
	font-size: 5em;
    color: blue;
    text-align: center;
    }

05. Mixins (재활용)

: 재사용할 CSS 스타일을 정의할 수 있는 유용한 기능
@mixin을 통해 스타일을 선언하고 @include을 통해 사용함

@mixin

@mixin large-text {
	font-size: 22px;
    font-weight: bold;
    font-family: sans-serif;
    color: skyblue;
}

@include

h1 {
	@inclued large-text;
}

div {
	@inclued large-text;
}

📍 응용 버전

/* html */
<div class="bg"></div>

@mixin

@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent)
/*항상 적지 않아도 디폴트 값으로 하고싶은 속성을 적는다*/ {
	background-image: url($bg-url);
    background-repeat: no-repeat;
    background-position: $bg-position;
    background-size: $bg-size;
    background-color: $bg-color;
}

@include

.bg {
	margin: 0 auto;
    width: 100px;
    height: 100px
    @include bg-img('http://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg');
}

06. Function (함수)

: 함수를 정의하여 사용

👀 Mixin이랑 Function이 뭐가 다른데?

• Mixin : 지정한 스타일 코드를 반환
• Function : 특정 값을 @return을 통해 반환

기본형

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

@function half-opacity($color) {
	$color: rgba($color, .5);
    @return $color;
}

h1 {
	font-size: 10em;
    text-align: center;
    color: half-opacity(red);
}

✔ 함수의 이름과 변수를 받아서
원하는 값으로 재가공을 한 후
반환한다.

07. Extend (확장)

: 연관있는 코드가 중복될 때 사용

/* html */
<button class="btn">버튼</button>
<button class="btn-1">버튼</button>

.btn {
	padding: 10px 20px;
    cursor: pointer;
    backgroung-color: inherit;
    border: 1px solid lightgray;
    border-radius: 14px;
}

.bt-1 {
	@extend .btn;
    border: 1px solid red;
    color: red;
}