React - Saas

Saas란?

• 웹 디자인 공부를 시작하다보면 CSS는 흔히 접하고 있을 것이다.
• CSS 코드가 길어질수록 복잡해지며 수정작업이 필요할 경우 매우 불편하다는 점이 있다. 동일한 코드를 재사용 하려면 복사/붙여넣기의 방법 뿐이며 실수를 유발할 수 있는 가능성이 아주 높은 단점이다.
• 따라서 Saas는 이를 보완하기 위하여 탄생하였다.
• Saas는 컴파일 과정에서 CSS파일을 생성해주는 전처리기 역활로써, 안정적이고 확장성이 좋은 특징을 가지고 있다.

 

Saas 사용

• 다음 명령어를 통해 Saas를 우선 설치해주자

npm install sass

* 설치 명령어를 입력한 뒤 항상 package.json파일에서 설치가 되었는지 확인하자!

• CSS파일의 확장자를 .scss로 변경하자 -> 아이콘이 바뀌는 것을 발견할 것이다. (파일의 확장자를 변경하였으니 import 구문도 변경하는 것을 잊지말자)

 

Sass 문법(Syntax)

• 주석
  • CSS에서는 /**/을 통하여 주석을 사용하였다. Sass에서는 CSS에서 사용한 주석 방법과 자바스크립트에서 주석을 표현하는 방법인 //도 사용이 가능하다.

-> CSS
/* hello */

-> SCSS
// hello
/* hello */

 

• 중첩(Nesting)
  • 다음 예시와 같이 중첩기능(Nesting)을 사용함으로써 가독성을 높일 수 있다.
  • 상위 선택자와 하위 선택자의 관계에 대해서 잘 생각하면 네스팅 기능을 쉽게 사용할 수 있다.

-> CSS
.main {
	width: 100px;
}
.main div {
	margin-left: 20px;
}
.main div li {
	padding-bottom: 10px;
}

-> SCSS
.main {
	width: 100px;
    div {
    	margin-left: 20px;
        li {
        	padding-bottom: 10px;
        }
    }
}

 

• 변수
  • 반복적으로 사용되는 값을 변수로 지정이 가능하다.
  • 변수 앞에는 항상 $를 붙여야 하는 것을 잊지말자!

$background-color: black;
$image-url: "/images/icon";

.main_nav {
    background-color: $background-color;
    background-image: $image-url;
}

 

• import
  • 외부파일이나 외부링크를 가져올 때 사용하는 기능이다.

@import "http://hi.com/hi";
@import url(hi);

 

• 숫자 연산
  • 일반적으로 절대값을 나타내는 px 단위로 연산을 한다. (+,-,/,*)
  • 상대적 단위인 em, vw, %를 사용할 경우 calc()를 사용해야한다.

div {
    height: 100px - 60px;
    padding: 100px / 3;
}

 

• 재활용(Mixin)
  • 재사용 할 그룹을 정의하는 기능이다. 
  • @mixin - 선언
  • @include - 포함

@mixin box {
    border: 1px solid black;
    width: 500px;
    margin-top: 30px;
    background-color: green;
}

// @include를 사용하여 선언된 Mixin을 사용한다!

.nav_bar {
	@include box;
}