creative
SASS
2019.09.20 16:52

Sass @if and @else

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

 

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }

 

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

 

 

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

 

.banner {
  background-color: #f2ece4;
  color: #036;
}
body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

 

 

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

 

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

 

 

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

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 187
40 SASS Sass @for 2019.09.20 133
39 SASS Sass @each 2019.09.20 127
» SASS Sass @if and @else 2019.09.20 141
37 SASS Sass Operators 2019.09.20 119
36 SASS Sass Introspection Functions 2019.09.19 107
35 SASS Sass Color Functions 2019.09.19 93
34 SASS Sass Selector Functions 2019.09.19 68
33 SASS Sass Map Functions 2019.09.19 122
32 SASS Sass List Functions 2019.09.19 98
31 SASS Sass Numeric Functions 2019.09.19 92
30 SASS Sass String Functions 2019.09.19 182
29 SASS Sass @extend 2019.09.19 133
28 SASS Sass @mixin과 @include 2019.09.19 167
27 SASS Sass @import 2019.09.19 172
26 SASS Sass 중첩 규칙과 속성 2019.09.19 116
25 SASS Sass 변수 2019.09.19 126
24 SASS Sass 소개 2019.09.19 154
23 SASS SASS 샘플 2019.08.16 252
22 HTML ::after ::before 토글 사용 예제 2019.06.28 239
Board Pagination Prev 1 2 3 Next
/ 3

Menu