[Web]SCSS에 대하여

in Study on etc


웹을 꾸밀 때 쓰이는 것이 바로 CSS입니다. 하지만 쓰인지 오래된 방법이기 때문에 아무래도 사용하는데 불편한 점이 많죠..

그렇기 때문에 이러한 것을 개선한 방법이 있습니다.

바로 sass, less, stylus와 같은 전처리기를 사용하는 것입니다.

이번에는 가장 대중적으로 쓰이고 있는 sass(scss)에 대해 알아보겠습니다.

아 그리고 왜 갑자기 scss 이야기가 나오냐고 생각하시는 분들이 계실 것 같습니다. scss는 sass컴파일러를 이용한 좀더 기존의 css구조와 비슷한 형태의 방법입니다.

즉 scss = sass + css 라고 생각하시면 편합니다.

기본 문법에대해 알아 보겠습니다.

1. 기본 문법

  • 기본틀은 css와 비슷합니다.
  • nested block(넥스팅) 을 적용
  • //을 사용하여 주석처리

2. 네스팅(nesting)

네스팅이란 서브루팅중에 다른 서브루틴을 짜넣는 것입니다.

셀렉터 네스팅

div 안에 p처럼 하위구조를 가지고 있을경우, div의 속성 정의 블록 안에 하위에 있는 p가 들어갈 수 있습니다.

//scss
.div {
  p {
    color: #f00;
  }
}

//css
.div p { color: #f00;}

속성 네스팅

축양형으로 묶일 수 있는 속성들 끼리도 네스팅이 가능합니다.

.div {
  p {
    font: {
      family: "Malgum Gothic", sans-serif;
      size : 14px;
      weight: 700;
    }
  }
}

상위요소 치환

&을 사용하면 현재 블럭이 적용되는 셀렉터를 참조,치환

//scss
a {
  text-decoration: none;
  &:hover { text-decroation: underline; }
}

//css
a { text-decoration: none; }
a:hover { text-decoratino: underline; }

‘글자’를 이어서 써서 선택자 클래스명 이름을 완성할 수도 있습니다.

//scss
.btn {
  display:inline-block; padding:3px 10px; border:1px solid #000;
  &_blue { background-color:blue; border:0; }
  &_yellow { background-color:yellow; border:0; }
}

//css
.btn { display:inline-block; padding:3px 10px; border:1px solid #000; }
.btn_blue { background-color:blue; border:0; }
.btn_yellow { background-color:yellow; border:0; }

3.변수와 연산자

확장 (@extend)

확장은 이미 정의해둔 다른 셀렉터의 속성에 현재 셀렉터가 얹어가는 효과를 낼 수 있습니다. 따라서 특정한 클래스군에 대해서 베이스 클래스에서 공통 속성을 지정하여, 다른 클래스들이 베이스 클래스를 상속받는 효과를 낼 수 있습니다.

// SCSS
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

믹스인 (@mixin)

  1. 공통적으로 많이 쓰이는 CSS 선언값들을 묶어서 믹스인으로 만들어 재사용이 가능하게끔 할 수 있다. 변수는 단일 값을 담을 수 있는 것에 비해, 믹스인은 여러 속성의 정의 및 셀렉터에 대한 속성 전체등 블럭 단위로 재사용할 수 있다.
  2. 믹스인을 정의할 때에는 파라미터를 받아 파라미터 값에 따른 가변적 속성 집합을 만들 수 있다. 다음 예는 둥근 외곽선을 지정할 때 벤더별로 다른 접두어가 붙는 속성들을 매번 반복해서 쓰지 않도록 하는 테크닉이다.
  3. 믹스인은 @mixin 키워드를 이용해서 이름과 인자를 선언한다. 인자가 필요없는 믹스인은 ($인자) 부분을 생략할 수 있다. 인자는 일반 변수처럼 정의한다.
  4. 믹스인을 사용할 때에는 @include 지시어를 사용한다.
// SCSS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px);

이러한 scss의 장점에 대해 알아보겠습니다.

1. 코드의 중복을 줄일 수 있다.

  • scss 사용하기 전 코드
#nav {
  width: 100%;
  height: 20px;
  background: red; 
}
#nav ul {
  list-style-type: none;
  • scss 사용 후 코드
#nav {
  width: 100%;
  height: 20px;
  background: red; 
  
  ul {
    list-style-type: none; 
    }
}

2. 변수를 사용할 수 있다

$main-color: #ce4dd6;
$style: solid;
 
#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}
 
a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

3. 그외 함수나 연산자등 편리한 기능..

출처 : https://velog.io/@psm8873/SCSS , https://heropy.blog/2018/01/31/sass/