[SASS] SASS의 개념과 확장 프로그램 설치

 

=== Prologue ===

 

신입 코드시인, 거의 원시인 처럼 퍼블 작업중이었는데,
사수님께서 조금 더 업그레이드 된 스킬셋을 알려주셨다.

들어는 봤으나, 써보진 않았던
SASS 를 설치해 주시고, 어떻게 쓰는지 까지 친히 알려주셨다. (감사합니다.)🕊

쓰다보니까 진짜 진짜 너무 편했고,
겹치는 코드도 없고 무엇보다 가독성이 좋았다.

나는 nesting의 기능만으로도 이렇게 차이를 크게 느꼈는데 Sass 를 제대로 활욜 할 수 있게 되면
더 작업 효율성이 좋아지고, 코드의 가독성도 좋아질 거라 믿는다.

그래서 SASS에 대해 본격 공부해보고자 한다.

 

==== Mission ====

 

Sass의 개념
Css의 한계
Sass의 기능

Sass 를 설치 해보자 (feat.비주얼스튜디오)

=== description ===

 

[Sass의 개념]
Sass(syntactically awesome stylesheets, 사스)는 종속형 시트로 해석 및 컴파일 되는 스크립트 언어이다.
CSS Preprocessor 라고도 하는데,
웹에서는 CSS만 인식하기 때문에 CSS를 작성 시 불편한점이나 한계점이 있다고 해도 직접적으로 해결을 할 수 없다.
SASS같은 언어로 "먼저" 작성을 하고, 그것을 웹에서 동작 가능한 CSS로 컴파일(compile) 한다.

 

 Sass has features that don't exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS.

[Css의 한계]
CSS는 처음에는 쉽고 간결해 보이지만
프로젝트의 규모가 커지고 수정이 일어나면서

1. 불필요한 선택자(Selector)의 남발
2. 구조가 명확히 구분되지 않아 가독성이 떨어지게 된다.

==> 유지보수 할때도 힘들고, 협업 시 가독성도 현저하게 떨어지게 된다.

 

SASS는 이를 보완 해 훨씬 작업 효율을 높여 준다.
: Sass는 Css를 구조화 하여 표기 할 수 있다.
: Sass는 협업시 발생 할 수 있는 구문의 수준 차이를 평준화 할 수 있다.
: Sass가 가지고 있는 기능들을 활요하여 CSS 유지보수 편의성을 큰 폭으로 향상 시킬 수 있다.

[Sass의 기능]

Sass는 다음과 같은 기능을 가진다.

1 변수
2 네스팅
- 루프
- 인수
- 혼합
3 mixin
4 셀렉터 상속

반응형

 

 

 

==== detail progress ====

 

Sass를 사용하기 전에 SASS를 환경을 만들어야 한다.

위에서 말했던것 처럼,
(SASS같은 언어로 "먼저" 작성을 하고, 그것을 웹에서 동작 가능한 CSS로 컴파일(compile) 한다.)

작성 한 코드를 compile/ transfile 해 줘야 하기 때문이다.
나는 비주얼 스튜디오에서 확장 프로그램으로 간단하게 설치 완료했다! :-)


1. Sass 확장 프로그램을 설치
2. Live Sass Compiler 설치

두가지만 설치하면 이제 끝난다.
LIve Sass Compiler는 자동으로 css 파일로 컴파일 해주는데
정말 편하다.
단, 로컬에서 작업할때만 가능하다. - Watch my Sass를 실행할것!

 

 

 

==== Result ====

 

이제 sass를 왜 사용해야하는지와
sass 사용을 위한 준비도 끝났다.

sass의 매력에 대해서 더 파헤쳐 보자.

==== Reference====

https://poiemaweb.com/sass-built-in-function

Sass - Built-in Function | PoiemaWeb

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

Sass(SCSS) 완전 정복!