SASS
2019.09.20 15:48
Sass Operators
조회 수 549 추천 수 0 댓글 0
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입니다.
번호 | 분류 | 제목 | 날짜 | 조회 수 |
---|---|---|---|---|
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 |