CSS 와 SASS, SCSS

Sass와 SCSS

Sass - Syntatically Awesome Stylesheet
SCSS - Sassy CSS

 

CSS, Sass, SCSS 를 설명하기 전에, 먼저 각각의 코드를 보겠습니다.

/* CSS */
div {
    color: red;
}

div p {
    background-color: green;
}

/* Sass */
div
  color: red
  p
    background-color: green

/* SCSS */
div {
  color: red;
  p {
    background-color: green;
  }
}

Sass, SCSS 모두 CSS를 위한 확장 언어이며, CSS에 지원하지 않는 여러 기능들을 제공하여,

 

더 간략하고 효과적으로 CSS를 작성하게 해줍니다.

 

Sass 같은 경우 중괄호 대신에 들여쓰기를 사용하고, SCSS는 CSS 구문과 완벽하게 호환이 되도록 중괄호를 사용하고 있습니다.

 

Sass가 먼저 생겨났고, Sass 버전3에서 SCSS가 생겨났습니다.

 

예제에서 보시면 아시겠지만, CSS 구문과 크게 이질감 없이 작성을 할수 있기 때문에 Sass와 SCSS를 거의 같은 개념으로 사용을 하고 있으며 코드 작성은 SCSS로 하고 있습니다.

 

sass 공식 홈페이지에 tutorial에서도 기본으로 SCSS 문법으로 예제로 보여주고 있으며( Sass 문법도 같이 제공 )

 

w3schools 에서도 Sass 를 설명하면서 코드는 모두 SCSS 문법으로 설명을 하고 있습니다.

 

그럼 Sass에서 CSS를 어떻게 더 효율적으로 지원을 하는지 몇가지만 살펴보겠습니다.

Sass 변수

$ 를 사용하여, 변수를 선언할 수 있습니다.

/* SCSS */
$myColor: red;
$myFontSize: 18px;

body {
  font-size: $myFontSize;
  color: $myColor;
}

/* CSS */
body {
  font-size: 18px;
  color: red;
}



/* SCSS */
$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

/* CSS */
h1 {
  color: green;
}

p {
  color: red;
}

Sass Nesting

selector를 포함하여 nesting selector 작성이 가능합니다.

 

그리고, prop: {} 와 같은 형식으로 정의를 하면 prop을 namespace처럼 prefix로 사용을하여

 

CSS 속성 중에 같은 prefix로 시작하는 속성들을 nested 형식으로 작성할 수 있습니다.

/* SCSS */
div {
  color: red;
  p {
    background-color: green;
  }
}

/* CSS */
div {
    color: red;
}

div p {
    background-color: green;
}



/* SCSS */
.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

/* CSS */
.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}


/* SCSS : nesting properties */
.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

/* CSS */ 
.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

Parent Selector

nesting 에서 부모의 selector를 나타내기 위해 $ 를 사용할 수 있습니다.

 

주로 pseudo-class 를 추가할 때 사용합니다.

/* SCSS */
.alert {
    &:hover {
        background-color: yellow;
    }
}

/* CSS */
.alert:hover {
	 background-color: yellow;
}