CSS, SASS, SCSS 간단하게 알아보기

 

<plugin>
    <groupId>com.gitlab.haynes</groupId>
    <artifactId>libsass-maven-plugin</artifactId>
    <version>0.2.26</version>
    <executions>
      <execution>
        <phase>generate-resources</phase>
        <?m2e execute onConfiguration,onIncremental?>
        <goals>
          <goal>compile</goal>
        </goals>
      </execution>
    </executions>
    <configuration>
      <inputPath>${basedir}/src/main/scss/</inputPath>
      <outputPath>${basedir}/src/main/resources/static/resources/css/</outputPath>
      <includePath>${project.build.directory}/webjars/META-INF/resources/webjars/bootstrap/${webjars-bootstrap.version}/scss/</includePath>
    </configuration>
  </plugin>

spring 프로젝트를 분석하다가 libsass-maven-plugin이 무엇인지 궁금하여 찾아봤다.

 

 

CSS

• Cascading Style Sheets
• HTML을 꾸며주는 그것

 

SASS, SCSS와 CSS

• SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며, 추가기능이 있는 확장판 스크립트 언어
• SASS(Syntactically Awesone Style Sheets, 문법적으로 어썸한 스타일시트)
  들여쓰기 + 줄바꿈 형식
• SCSS(Sassy CSS, 문법적으로 짱 멋진 CSS)
  중괄호 + 세미콜론 형식
  // 네이밍이 좀 웃기다 ㅋㅋ
  
  
• SCSS의 사용자수와 라이브러리&프레임워크 수가 SASS보다 많다.
• SCSS가 SASS보다 CSS와 호환성도 더 좋음. (CSS와 완벽하게 호환되는 장점)

 

사용하는 이유

• css가 그렇게 복잡한 언어는 아니지만, 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생긴다.
• CSS는 불필요한 선택자(selector), 연산 기능 한계, 구문의 부재 문제점
• SASS와 SCSS가 이러한 이슈를 해소시켜준다!
  
  
• 코드의 가독성과 재사용성을 높여주며 심플한 표기법으로 CSS구조를 평준화할 수 있다.

 

제공하는 기능/예시

• 변수 할당
• 중첩 구문
• 모듈화
• 믹스인
• 확장&상속
• 연산자

 

적용원리

• SASS, SCSS를 CSS pre-processor(전처리기) 라고 하기도 함.
• 스크립트 언어이기 때문에 SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용할 수는 없음
• 웹은 기본적으로 CSS파일로 동작한다 -> 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용

 

단점

• 전처리기를 위한 도구 필요
• 컴파일 시간 소요

 

LibSass

• LibSass는 C/C++로 Sass를 구현한 라이브러리
• 다양한 언어에 쉽게 통합되도록 설계되었다.
• 코드를 로컬에서 실행하려면 implementer나 wrapper가 필요하다.

 

LibSass wrapper들

• Sass C
• Crystal: sass.cr
• Go: go-libsass
• Java: jsass or LibSass Maven plugin
• JavaScript: sass.js
• .NET: LibSass Host
• Node: node-sass
• Python: libsass-python

 

결론

libsass-maven-plugin 는 SASS를 사용하기위한 플러그인이었다.

 

 

 

 

더 궁금하면 아래 블로그를 참고. 코드까지 아주 자세히 설명되어있다

 

참고:

https://cocoon1787.tistory.com/843

[CSS] CSS, SASS, SCSS 차이점, 사용방법

https://sass-lang.com/libsass