Wecode 24일차-TIL

kimu2370·2020년 2월 23일
0

오늘은 react를 공부하면서 새롭게 알게된 Syntactically Awesome StyleSheets인 Sass에 대해서 블로깅 하려고 한다.

Sass

Sass는 css의 확장 언어이다.
CSS의 모든 문법과 함께 변수 variables, 중첩 규칙 nested rules, 믹스인 mixins, 인라인 불러오기 inline imports 등 다양한 기능을 지원합니다. Sass는 내용이 많은 스타일시트를 잘 정리하게 도와주며, (특히 컴퍼스 스타일 라이브러리를 사용하면) 스타일시트를 빠르게 작성할 수 있게 해줍니다.

SCSS

Sass는 모든 CSS 버전과 완전히 호환된다.Sass의 큰 장점중 하나인
CSS를 완전 호환하는 SCSS를 사용할 수 있다는 점이다.
SCSS란 CSS3가 나오면서 갖춰진 새로운 문법 체계이다.CSS를 완전 호환하는 특징 덕분에 모든 CSS라이브러리를 그대로 이어어서 사용할 수 있고, 기존 CSS를 SCSS로 전환하는 작업을 시작할 수 있다.

Sass보단 SCSS인 이유

/*scss*/
#main p {
  color: #00ff00;
  width: 97%;
}
/*sass*/
#main p
  color: #00ff00
  width: 97%

scss는 css 문법을 그대로 쓰고, sass는 {}중괄호가 아닌 들여쓰기로 대신한다. 속성을 구분하기 위해 세미콜론 ;대신 줄바꿈을 사용한다.

sass가 읽기 쉽고 빨리 쓸 수 있어서 좋아하는 사람도 있다고 하지만, 공식 문서에서는 다음과 같은 이유로 scss를 쓰기를 권장합니다.

  • 공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여준다.
  • 더 넓은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰인다.
  • CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높인다.
  • 여러 줄 쓰기 지원: Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 반대로 여러 줄 쓰기를 지원하지 않는다.

문법

네스팅(nesting)

  • 셀렉터 네스팅

    부모 선택자 안에 자식 선택자를 쓸 수 있다.

    /*scss*/
    .div {
      p {
        color:skyblue;
      }
    }
    
    /*css*/
    .div p {color:skyblue}
  • 속성 네스팅

    속성끼리도 네스팅을 하여 묶을 수 있다.

    /*scss*/
    .entry-content {
      p {
        font: { /* font  옆에 : 이 온다는 걸 놓치지 말자 */
          family: "Noto Serif CJK KR", serif;
          size: 9.814rem;
          weight: 400;
        }
      }
    }
  • 상위 요소 치환
    어떤 선택자의 { } 안에서 &를 쓰면 중괄호를 취하는 선택자 자신을 의미한다. div { &{} } 여기서 &는 div이다. 본인에게 속성을 준 후 :hover나 :target등을 이어서 줄 때 유용하다.

    /*scss*/
    a {
      color:#666;
      &:hover { color:yellow; } /* a:hover와 같다. */
    }
    
    /*css*/
    a {color:#666}
    a:hover { color:yellow' }

    글자 그대로 &가 상위의 글자 a로 치환되는 것이기 때문에 그 뒤로 '글자'를 이어서 써서 선택자 클래스명 이름을 완성할 수도 있다

    /*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; }

변수와 연산자

색상이나 선 스타일, 폰트 패밀리등은 대체로 사이트 내에서 공통적으로 정의해놓은 값을 쓰는 경우가 많다. 이들을 매번 지정하지 않고 변수로 넣어서 사용하면 변경 시점에 변수의 내용만 수정하여 모든 곳의 값을 공통적으로 바꿀 수 있다.

  • 문자열의 치환 및 #{...}
    #{...}을 사용하면 문자열 내에 표현식의 결과를 넣거나, 다른 변수의 내용으로 치환하는 것이 가능하다. 속성값의 일부나 전체 모두 적용 가능하고 속성명과 셀렉터에 대해서도 적용 가능하다.

    /*SCSS*/
    $on: active;
    $font-size: 14px;
    $line-height: 30px;
    
    p {
      font: #{$fontsize}/#{$lineheight};
      &.#{$on} { color: red; }
    }
    
    /*CSS*/
    p { font: 14px/30px; }
    p.active { color: red; }

임포트

@import 지시어를 이용해서 다른 css 파일을 임포트할 수 있다.

확장

확장은 이미 정의해둔 다른 셀렉터의 속성에 현재 셀렉터가 얹어가는 효과를 낼 수 있다. 따라서 특정한 클래스군에 대해서 클래스에서 공통 속성을 지정하여, 다른 클래스들이 베이스 클래스를 상속받는 효과를 낼 수 있다.
확장 문법은 @extend 최상위셀렉터의 형태로 사용한다.

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

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

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

믹스인

공통적으로 많이 쓰이는 css 선언값들을 묶어서 믹스인으로 만들어 재사용이 가능하게끔 할 수 있다. 변수는 단일 값을 담을 수 있는 것에 비해, 믹스인은 여러 속성의 정의 및 셀렉터에 대한 속성 전체등 블럭 단위로 재사용할 수 있다. 믹스인을 정의할 때에는 파라미터를 받아 파라미터 값에 따른 가변적 속성 집합을 만들 수 있다.

/*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); }
  • 믹스인의 인자값
    인자는 선언하는 만큼 쓸 수 있다. 만약 인작밧에 디폴트를 적용하고 싶다면, 변수 선언과 같은 문법으로 인자변수의 초기값을 설정해 줄 수 있다.

    @mixin dashed-box($color, $width: 2px) { .. }

    @include 구문에서 인자값은 선언된 순서대로 쓸 수 있으며, 보다 명확한 구분을 위해서 인자의 이름을 직접 기입할 수 있다. 인자의 각 이름을 명시한 경우에는 순서가 바뀌어도 상관없다.

    .box { @incluxe dashed-box($width: 3px, $color: #eee) }
  • 리스트 인자
    인자명에 ... 을 붙이면 단일 값이 아닌 리스트로 인자를 받는다는 의미이다. 이는 일련의 연속값을 속성으로 사용하는 경우에 활용할 수 있다.

    @mixin colors($text, $background, $border) {
      color: $text;
      background-color: $background;
      border-color: $border;
    }
    
    $values: #ff0000, #00ff00, #0000ff;
    .primary { @include colors($values...); }

커스텀 함수

css 속성 정의의 모듈화와 재사용은 믹스인을 통해서 처리하면 된다. 함수는 어떤 값들을 사용해서 하나의 리턴값을 생성하는 용도로 사용하는 것이 좋다. 함수의 정의는 @function 지시어를 통해서 정의하며, 내부에서는 @return 지시어를 통해서 값을 내보낸다. 다음 예는 그리드 시스템에서 개별 셀과 여백의 크기를 통해서 n칸짜리 요소의 폭을 계산하는 함수이다.

/*SCSS*/
$grid-width: 40px; 
$getter-width: 10px; 
@function grid-width($n) {
   @return $n * $grid-width + ($n -1 ) * $getter-width; 
} 
#sidebar { width: grid-width(5); } /*믹스인과 달리 @include를 쓰지 않는다.*/

흐름 제어

함수나 믹스인을 작성할 때 특정 조건에 따른 분기나, 조건 혹은 연속열 (리스트 나 맵)의 각 원소에 대해 반복하는 등 흐름 제어와 관련된 기능을 사용해야 할 필요가 있다. 이 때 흐름제어 지시어들을 사용할 수 있다.

  • 분기구문
    분기구문은 @if절을 사용하여 작성한다.

    @mixin hcolor($n) {
      @if $n % 2 == 0 { color: white; }
      @else { color: blue; } 
    }
    .row-3 { @include hcolor(3); } 
    
    @function text-color($brightness) {
      @if $brightness < 128 { @return #333; }
      @return #ccc; 
    }
    code { color: text-color(200);
  • 반복문

  1. @for : n ~ m 까지의 숫자 범위에 대해 각 정수값에 대해 순회한다.

  2. @each : 주어진 리스트나 맵의 각 원소에 대해 순회한다.

  3. @while : 주어진 조건을 만족하는 동안 반복한다.

    @for $i from 1 through 3 { /* 1, 2, 3,에 대해 반복 */
      .time-#{$i} { width: 2em * $i; } 
    } 
    
    /*리스트 내 각 문자열 원소에 대해서... */
    @each $animal in puma, sea-slug, egret, alamander {
      .#{$animal}-icon {
        background-image: url('/image/#{$animal}.png');   
      }
    }
    
    /* 6, 4, 2번 아이템에 대해서 */
    $i : 6; 
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i }
      $i: $i - 2; 
    }
profile
DO WHAT YOU LOVE

0개의 댓글