SCSS

css를 더 간편하게 만들 수 있도록 해주는 css의 전처리기능입니다.

변수와 함수 등의 다른 programming laguage의 특징들을 사용할 수 있도록 해줍니다.

Sass or SCSS

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.

즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.

더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분합니다.

Special features

Data Types

Data	Explain	Examples
Numbers	숫자	1, .82, 20px, 2em…
Strings	문자	bold, relative, “/images/a.png”, “dotum”
Colors	색상 표현	red, blue, #FFFF00, rgba(255,0,0,.5)
Booleans	논리	true, false
Nulls	아무것도 없음	null
Lists	공백이나 ,로 구분된 값의 목록	(apple, orange, banana), apple orange
Maps	Lists와 유사하나 값이 Key: Value 형태	(apple: a, orange: o, banana: b)

Maps엔 ()가 반드시 필요
속성값으로 Null이 사용되면 compile되지 않습니다.

Nesting(중첩)

상위 반복자 안의 선택자들은 상위선택자를 포함하여 css에 적용된다.

.section {
  width: 100%;
  .list {
      //.section.list
    padding: 20px;
    li {
        //.section.list.li
      float: left;
    }
  }
}

Ampersand(상위 선택자 참조)

“&” 키워드는 상위(부모) 선택자를 참조하여 치환한다.

중첩처럼 안에 여러가지의 선택자가 있어도 “&”가 있다면 바로 위의 선택자만 참조한다.

.list {
  li {
    &:last-child {
        //.list.li:last-child
      margin-right: 0;
    }
  }
}

@at-root(중첩 벗어나기)

Nesting을 벗어나 자기 자신의 선택자만 선택합니다.

Variant의 scope의 한계로 어쩔 수 없이 특정 scope에 포함 되었을 때 유용합니다.

.list {
  $w: 100px;
  $h: 50px;
  li {
      //.list li
    width: $w;
    height: $h;
  }
  @at-root .box {
      //.box
    width: $w;
    height: $h;
  }
}

Extend(확장)

@extend 선택자; 로 특정 선택자가 다른 선택자의 모든 스타일을 가지도록 할 수 있습니다.

하지만 이것 보다는 mixin을 사용할 것을 추천합니다!

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
    //.btn 의 모든 style을 이곳에 적용합니다.
  @extend .btn;
  background: red;
}

Mixins(css Group)

Mixin은 재사용할 scss group을 변수처럼 저장합니다.

@mixin 으로 선언하고 @include 로 사용합니다.

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

h1 {
  @include large-text;
}
div {
  @include large-text;
}

@content

선언된 mixin에 @content 가 포함되어 있다면 해당 부분에 원하는 style block을 전달 할 수 있습니다.

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
    //@content부분에 position: absolute가 추가된다!!
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

Variables(변수)

변수 이름 앞에는 항상 “$”를 붙입니다.

여느 programing laguage들과 비슷한 특징을 갖습니다.

변수에 변수를 지정하여 변수 재할당도 가능합니다.

Variable scope

선언된 블록 {} 안에서만 유효범위를 가집니다.

애초에 Global변수로 선언된것은 해당하지 않습니다.

!global

대신 “!global” 이라는 키워드를 이용해 {} 안의 변수를 global variable로 사용하는것도 가능합니다.

!default

할당되지 않은 변수의 초깃값을 설정합니다. 즉, 원래 할당된 변수가 있다면 갱신하지 않고 그 변수 값을 사용합니다.

주의 할 점!

!import

import의 순서에 따라 같은 변수가 있다면 가장 최신에 import된 것이 적용됩니다.

나누기 연산

나누기 연산을 쓰기 위해 다음과 같은 법칙을 충족해야합니다.

값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
값이 ()로 묶여있는 경우
값이 다른 산술 표현식의 일부로 사용되는 경우

색상연산

색상 연산은 일반 숫자 연산과는 다른 독특한 방식으로 연산을 합니다.

div {
  color: #123456 + #345678;
  // R: 12 + 34 = 46
  // G: 34 + 56 = 8a
  // B: 56 + 78 = ce
  background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5);
  // R: 50 + 10 = 60
  // G: 100 + 20 = 120
  // B: 150 + 30 = 180
  // A: Alpha channels must be equal
}

Function

sass는 연산이 가능하므로 function을 만들어 사용할 수 있다.

@function divide($a, $b){
  @return $a / $b;
}

nav{
  margin: divide(60,2) * 1px; //30px; 참고로 숫자만 return 따라서 단위적용은 알아서
}

전체적용

.story{
  transform: skewX(-12deg);

  //.story의 child들에 모두 적용한다.
  & > *{
    //겉 box에만 skew하고 안의 자식들은 그대로 출력하고 싶을 때
  transform: skewX(12deg);
  }

  &__shape{

  }
  &__img{

  }
  &__text{

  }
}

Tip

transform 중복

이미 transform을 사용하는 곳에 다른 transform을 새로 적용하면 적용되지 않는다. 즉, 한 곳에 두가지 transform 속성을 적용시킬 수 없다. (parent가 transfrom하고 자식이 transform하면 각각 적용된다.)

reference

이곳에 정말 정리가 잘 되어있다!

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

Dev.JK Tech Note

Sass(SCSS)