Sass(SCSS) SassScript #2[Operations]

동등 연산자 (Equality Operators)

이 연산자는 두 값이 같은지 여부를 반환합니다. == 은 두 표현식이 동일한지 반환하고 != 은 두 표현직이 같지 않은지 여부를 반환합니다. 두 값이 동일한 유형과 동일한 값이면 동일한 것으로 간주합니다.

• SCSS

  @debug 1px == 1px; // true
  @debug 1px != 1em; // true
  @debug 1 != 1px; // true
  @debug 96px == 1in; // true
  
  @debug "Helvetica" == Helvetica; // true
  @debug "Helvetica" != "Arial"; // true
  
  @debug hsl(34, 35%, 92.1%) == #f2ece4; // true
  @debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true
  
  @debug (5px 7px 10px) == (5px 7px 10px); // true
  @debug (5px 7px 10px) != (10px 14px 20px); // true
  @debug (5px 7px 10px) != (5px, 7px, 10px); // true
  @debug (5px 7px 10px) != [5px 7px 10px]; // true
  
  $theme: ("venus": #998099, "nebula": #d2e1dd);
  @debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
  @debug $theme != ("venus": #998099, "iron": #dadbdf); // true
  
  @debug true == true; // true
  @debug true != false; // true
  @debug null != false; // true
  
  @debug get-function("rgba") == get-function("rgba"); // true
  @debug get-function("rgba") != get-function("hsla"); // true

---

관계연산자 (Relational Operators)

관계연산자는 숫자가 서로 큰지, 작은지를 비교하는 연산자 입니다. 호환되는 단위(units)는 자동으로 변환하여 비교합니다.

  * <expression> < <expression> : 좌측 표현식의 값이 우측 표현식의 값보다 작은지 여부를 반환
  * <expression> <= <expression> : 좌측 표현식의 값이 우측 표현식의 값보다 같거나 작은지 여부를 반환
  * <expression> > <expression> : 좌측 표현식의 값이 우측 표현식의 값보다 큰지 여부를 반환
  * <expression> >= <expression> : 좌측 표현식의 값이 우측 표현식의 값보다 크거나 같은지 여부를 반환

  @debug 100 > 50; // true
  @debug 10px < 17px; // true
  @debug 96px >= 1in; // true
  @debug 1000ms <= 1s; // true

단위가 없는 숫자는 임의의 숫자와 비교될 수 있다. 비교하는 대상의 단위로 자동으로 변환됩니다.

  @debug 100 > 50px; // true
  @debug 10px < 17; // true

서로 호환되지 않는 단위를 가진 숫자끼리는 비교할 수 없습니다.

  @debug 100px > 10s;
  //     ^^^^^^^^^^^
  // Error: Incompatible units px and s.

---

숫자 연산자 (Numeric Operators)

Sass는 숫자에 대한 표준 수학 연산자 집합을 지원합니다.

  * <expression> + <expression> : 좌측 표현식의 값을 우측 표현식의 값에 추가.
  * <expression> - <expression> : 우측 표현식에서 좌측 표현식의 값을 뺌
  * <expression> * <expression> : 좌측 표현식의 값에 우측 표현식의 값을 곱함
  * <expression> / <expression> : 좌측 표현식의 값을 우측 표현식으로 나눔
  * <expression> % <expression> : 좌측 표현식의 값을 우측 표현식으로 나눈 값의 나머지를 반환 [모듈러스(modulo) 연산자]

  @debug 10s + 15s; // 25s
  @debug 1in - 10px; // 0.8958333333in
  @debug 5px * 3px; // 15px*px
  @debug (12px/4px); // 3
  @debug 1in % 9px; // 0.0625in

단위 없는 숫자도 연산에 사용할 수 있습니다.

  @debug 100px + 50; // 150px
  @debug 4s * 10; // 40s

서로 호환되지 않는 단위를 가진 숫자끼리는 연산할 수 없습니다.

  @debug 100px + 10s;
  //     ^^^^^^^^^^^
  // Error: Incompatible units px and s.

단항 연산자 (Unary Operators)

Sass에서는 단항 연산자도 사용할 수 있습니다.

  * + <expression> : 표현식의 값을 변경하지 않고 반환
  * - <expression> : 표현식의 값의 음수 버전을 리턴

  @debug +(5s + 7s); // 12s
  @debug -(50px + 30px); // -80px
  @debug -(10px - 15px); // 5px

슬래시로 구분된 값 (Slash-Separated Values)

몇 가지 CSS 속성은 값을 분리하는 방법으로 '/'를 지원합니다. Sass는 아래의 조건들 중 하나라도 충족되지 않으면 나눗셈을 하지 않고 슬래시로 구분된 결과값을 출력합니다.

  * 표현식은 숫자가 아니다. (Either expression is anything other than a literal number.)
  * 결과 값은 변수에 저장되거나 함수에 의해 반환 (The result is stored in a variable or returned by a function.)
  * 괄호로 묶어야 한다. (The operation is surrounded by parentheses, unless those parentheses are outside a list that contains the operation.)
  * 결과값이 다른 작업의 일부로 사용(The result is used as part of another operation (other than /).)

분리 기호로 강제로 사용하려면 아래와 같이 작성하면 됩니다.

  #{<expression>} / #{<expression>}.

  @debug 15px / 30px; // 15px/30px
  @debug (10px + 5px) / 30px; // 0.5
  @debug #{10px + 5px} / 30px; // 15px/30px

  $result: 15px / 30px;
  @debug $result; // 0.5

  @function fifteen-divided-by-thirty() {
    @return 15px / 30px;
  }
  @debug fifteen-divided-by-thirty(); // 0.5

  @debug (15px/30px); // 0.5
  @debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
  @debug 15px/30px + 1; // 1.5

단위 (Units)

두 개의 숫자가 곱해지면 숫자 뿐만 아니라 단위도 곱해집니다.

  @debug 4px * 6px; // 24px*px (read "square pixels")
  @debug 5px / 2s; // 2.5px/s (read "pixels per second")
  @debug 5px * 30deg / 2s / 24em; // 3.125px*deg/s*em
                                  // (read "pixel-degrees per second-em")

  $degrees-per-second: 20deg/1s;
  @debug $degrees-per-second; // 20deg/s
  @debug 1 / $degrees-per-second; // 0.05s/deg

---

문자열 연산자(String Operators)

Sass는 문자열을 생성하는 몇 가지 연산자를 지원합니다.

  * <expression> + <expression> : 두 표현식의 값이 모두 포함된 문자열을 반환.
  * <expression> / <expression> : 두 표현식의 값을 모두 포함하는, 따옴표로 묶이지 않은 문자열 반환.
  * <expression> - <expression> : 두 표현식의 값을 모두 포함하는, 따옴표로 묶이지 않은 문자열 반환. 
    **'-'는 레거시 연산자이며, 일반적으로 보간법을 사용해야함**

  @debug "Helvetica" + " Neue"; // "Helvetica Neue"
  @debug sans- + serif; // sans-serif
  @debug #{10px + 5px} / 30px; // 15px/30px
  @debug sans - serif; // sans-serif

위 연산자는 문자열 이외에 CSS에 쓸 수 있는 값과 함께 사용할 수 있습니다.

  @debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
  @debug true + " is a boolean value"; // "true is a boolean value";

단항 연산자(Unary Operators)

  * / <expression> : 표현식의 값으로 '/'로 시작하며, 따옴표가 붙지 않은 문자열을 리턴.
  * - <expression> : 표현식의 값으로 '-'로 시작하며, 따옴표가 붙지 않은 문자열을 리턴.

---

불리언 연산자(Boolean Operators)

JavaScript와 같은 다른 언어들과 달리 Sass는 불리언 연산자에 대해 기호가 아닌 단어를 사용합니다.

  * not <expression> : 표현식의 값의 반대의 값 반환. true -> false / false -> true
  * <expression> and <expression> : 좌우측 표현식이 모두 true일 때만 true 값 반환
  * <expression> or <expression> : 좌우측 표현식의 값이 둘 중 하나라도 true일 때 true 값 반환.  

  @debug not true; // false
  @debug not false; // true

  @debug true and true; // true
  @debug true and false; // false

  @debug true or false; // true
  @debug false or false; // false