13_SCSS_연산,재활용(mixin,include),확장

계속해서 SCSS 문법을 공부해 나가보겠다. 이번에는 연산, 재활용, 확장 개념에 대해 다뤄보겠다.

 

연산(Operations)

 

+ 더하기

- 빼기

* 곱하기 하나 이상의 값이 반드시 숫자(Number)

/ 나누기 오른쪽 값이 반드시 숫자(Number)

% 나머지

 

== 동등

!= 부등

< 대소 / 보다 작은

> 대소 / 보다 큰

<= 대소 및 동등 / 보다 작거나 같은

>= 대소 및 동등 / 보다 크거나 같은

 

and 그리고

or 또는

not 부정

 

일반적인 언어의 연산을 다 지원한다.

 

 

 

 

숫자 연산

 

>곱하기를 사용할 때 10px * 5처럼 사용해야 한다. 10 * 10 이나 10px * 10px는 사용할 수 없다.

>CSS는 속성 값을 분리하는 방식으로 /를 사용하기 때문에 /가 나누기로 사용되지 않을 수 있다.

나누기

그래서 다음과 같은 조건을 충족하는 경우에 나누기로 계산이 된다.

 

값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우

값이 ()로 묶여있는 경우

값이 다른 산술 표현식의 일부로 사용되는 경우

 

코드로 예를 나타내면

 

div {

  $x: 100px;

  width: $x / 2; // 변수에 저장된 값을 나누기

  height: (100px / 2); // 괄호로 묶어서 나누기

  font-size: 10px + 12px / 3; // 더하기 연산과 같이 사용

}

위와 같은 예시같은 경우에만 나누기로 계싼이 되는 속성이 있다.

 

일반적 수 계산은 px단위로 계산을 한다. 상대적단위 (%,em,vw)등의 연산으로 연산을 하고 싶으면 CSS의 calc()를 사용하여 계산해야 한다.

 

width: 50% - 20px; // 단위 모순 에러(Incompatible units error)

width: calc(50% - 20px); // 연산 가능

 

 

문자연산

 

+를 통하여서 이어붙이는 개념으로 사용할 수 있다.

파이썬에서 문자끼리 더하면 더해지는 개념과 비슷하다!!

 

색상연산

 

숫자는 기본적으로 16진수를 가지고있다는것만 생각하고 계산을 하면 될 것 같다.

ruba 연산시, a즉 투명도는 무조건 동일해야 더할 수 있다

a 즉 Alpha 값을 연산하고 싶다면 opacify()나 transparentize() 함수를 사용하여 바꿀 수 있다.

 

논리연산

and , or , not을 사용하여 사용할 수 있다.

 

 

 

재활용(Mixins)

스타일 시트 안에서 재사용 할 CSS 선언그룹을 정의하는 기능이다.

Mixin을 이용하여 다양한 스타일을 만들어낼 수 있다!

>쉽게 생각하면 일반적인 컴퓨터 언어에서 함수라고 생각하면 된다.

++하지만 SCSS안에 함수가 또 따로있는거 같아서 그냥 mixin개념이라고 외워두자..

 

선언 (@mixin)

사용 (@include) 만 알면 사용할 수 있다.

mixin 예시

만약 인자를 안쓰고 싶다면 @mixin size {} 이런방식으로 작성해도 문제없다.

 

 

 

Sass에서는 문법이 약간 다르다.

 

// SCSS

  @mixin large-text {

  font-size: 22px;

  font-weight: bold;

  font-family: sans-serif;

  color: orange;

}



// Sass

=large-text

  font-size: 22px

  font-weight: bold

  font-family: sans-serif

  color: orange

 

중괄호,세미콜론이 없고 mixin이 =로되어 있으며 파이썬처럼 들여쓰기로 구분이 된다!

 

// SCSS

h1 {

  @include large-text;

}

div {

  @include large-text;

}



// Sass

h1

  +large-text

div

  +large-text

 

include또한 문법이 살짝 다르다.

 

 

또한 선택자나 &도 사용가능하다.

mixin안에도 &등의 대부분기능이 구현가능하다

인수(Arguments)

위에서 설명했던것처럼 Mixin은 함수처럼 인수를 가질 수 있다!

 

가변인수(Variable Arguments)

 

때때로 입력할 인수의 개수가 불확실한 경우가 있을 수 있다.

...을쓰면 가변하는 인수의 개수를 특정 매개변수에 몰아줄 수 있다.

가변인수-mixin에사용

 

가변인수 - mixin에 사용 좀더 멋있는 예시

mixin이 아닌 include로 호출할 때 가변인수를 사용하면, 전달할 값을 전달하는데 사용할 수 있다. 아래 예시를 보면 조금 더 이해가 쉬울 것이다.

@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}

 

 

 

 

 

Content

선언된 Mixin에 @content가 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있다.

 

해당 블록에서만 사용하고자 하는 속성들을 정의하는데 사용된다. 이역시 예시를 한번 보는 것이 편하다.

쉽게 생각하면, {} 안의 내용이 mixin안에 추가된다고 보면 되겠다.

 

확장(Extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우 사용할 수 있다.

 

@extend 선택자

 

와같은 방법으로 선언한다.

 

쉽게 말해서 선언한 부분을 덮어쓸 수 있는 방법으로 생각하면 된다.

확장

 

CSS를 보면 ,로구분되는 다중선택자를 사용하여 구현하기 때문에 여러 문제점이 생길 수 있다.

 

내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가?

원치 않는 부작용이 초래될 수도 있는가?

이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가?

 

확장 부작용

 

 

위 예시처럼 부모선택자가 달라지거나 하는 부작용이 생길 수도 있고 또한 mixin기능을 사용하여 완전대체가 가능하기 때문에 사용을 권장하지 않는다.