SASS
2019.09.20 15:48

Sass Operators

조회 수 549 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Equality Operators

@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

@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

@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

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

 

주의사항

@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

 

@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

 

@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

 

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

 

$transition-speed: 1s/50px;

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

 

String Operators

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

 

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

 

  • /<expression> returns an unquoted string starting with / and followed by the expression’s value.
  • -<expression> returns an unquoted string starting with - and followed by the expression’s value.
@debug / 15px; // /15px
@debug - moz; // -moz

 

Boolean Operators

@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

 

일부 언어는 단순히 false와 null보다 더 많은 값을 False으로 간주합니다. Sass는 그러한 언어 중 하나가 아닙니다! 빈 문자열, 빈 목록 및 숫자 0은 모두 True입니다.

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 929
40 SASS Sass @for 2019.09.20 614
39 SASS Sass @each 2019.09.20 545
38 SASS Sass @if and @else 2019.09.20 555
» SASS Sass Operators 2019.09.20 549
36 SASS Sass Introspection Functions 2019.09.19 512
35 SASS Sass Color Functions 2019.09.19 480
34 SASS Sass Selector Functions 2019.09.19 411
33 SASS Sass Map Functions 2019.09.19 521
32 SASS Sass List Functions 2019.09.19 572
31 SASS Sass Numeric Functions 2019.09.19 507
30 SASS Sass String Functions 2019.09.19 688
29 SASS Sass @extend 2019.09.19 547
28 SASS Sass @mixin과 @include 2019.09.19 616
27 SASS Sass @import 2019.09.19 605
26 SASS Sass 중첩 규칙과 속성 2019.09.19 531
25 SASS Sass 변수 2019.09.19 538
24 SASS Sass 소개 2019.09.19 520
23 SASS SASS 샘플 2019.08.16 867
22 HTML ::after ::before 토글 사용 예제 2019.06.28 928
Board Pagination Prev 1 2 3 Next
/ 3