sass란? 개념 및 사용 방법

 

Sass란? 

Css 전처리기(Css Preprocessor) 

그렇다면,,, Css 전처리기는 뭐지?

말그대로 전에 처리해 버린다는 뭐 그런 뜻인 듯  

 

왜 써야 할까?

👉 Css의 단점을 해소 

Css 단점

- 불필요한 반복 

- 가독성이 나쁨- 기타 등등... 

 

Css 장점 

- 웹브라우저가 읽을 수 있다. 

- 사용하기 쉽다. 

 

Sass 처리 프로세스

sass처리 방식 , 이런 느낌일까?

 

 

 

Sass 장단점 

Sass 장점 
- 변수의 사용 →  css 속성 통일
- 조건문과 반복문 사용 → 동적 css 관리 

등등,, 

 

Sass vs Css 

/* Sass */
.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size * 0.5
  
  
/* Css */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

$size 변수로 사용, 100px 반복 사용 줄임 

 

 

Sass 단점
- 전처리기를 위한 도구 필요

- 컴파일 시간 소요 

 

익숙하지 않거나, 사용하기 어렵다면?

번역해주는 사이트를 통해 확인해 보자.

 

Css → Scss 로 변환
http://css2sass.herokuapp.com/

 

Scss → Css 변환 

http://css2sass.herokuapp.com/

 

 

 

 

 

참고 사이트 

https://nykim.work/97

[아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

https://blog.naver.com/3pmarketer/222910019992

[scss Sass] 뜻 개념 css와 차이점

https://usingu.co.kr/frontend/scss/scss-%E2%86%94-css-%EB%A1%9C-%EB%B3%80%ED%99%98/

scss ↔ css 로 변환 앱 및 사이트 - SCSS | UsingU