메로그

조건문 @if, @else 를 사용하여 조건문을 사용할 수 있습니다. scss $black: #000; $border: 1px solid red; @mixin btn_radius($h, $radius: true) { padding: 0 20px; height: $h; line-height: $h; background: yellow; color: $black; text-align: center; @if $radius { border-radius: $h / 2; } @else { border: $border; } } .btn { @include btn_radius(30px, true); } @mixin position($x, $y, $z) { position: absolute; left: $x; top: $..

@for @for 변수 from start to end 의 형태로 작성하며, to 대신 through 를 작성할 수 있습니다. to 는 해당 end 미만으로 반복, through 는 해당 end 이하로 반복합니다. scss @for $i from 1 to 6 { .ic#{ $i } { border: 1px solid red; } } @for $i from 1 through 5 { .ict#{ $i } { border: 1px solid blue; } } css .ic1 { border: 1px solid red; } .ic2 { border: 1px solid red; } .ic3 { border: 1px solid red; } .ic4 { border: 1px solid red; } .ic5 { bor..

Interpolation 보간법이라고도 하며, #{} 을 사용합니다. 클래스에 이름을 여러가지 형태로 사용할 수 있습니다. 또한 @mixin 에서도 사용합니다. scss @mixin bx($position, $wid, $color) { border-#{ $position }: $wid solid $color; } div { @include bx(right, 2px, red) } div { @include bx(left, 2px, blue) } div { @include bx(bottom, 2px, gray) } div { @include bx(top, 2px, green) } css div { border-right: 2px solid red; } div { border-left: 2px solid bl..

@mixin, @include 가장 많이 사용되는 기능 중 하나로, 선언 시 @mixin, 적용 시 @include 를 사용합니다. 재사용 함으로써 자원을 줄일 수 있음. $: 변수, @mixin: 함수, @include: 함수 호출 이라고 생각하면 편할 거 같습니다. scss $marginBottom: 30px; $left: left; $solid: 1px solid; @mixin mbottom { margin-bottom: $marginBottom; } @mixin test { width: 100px; height: 100px; border: 1px solid red; } @mixin clear { &:after { content: ""; display: block; clear: both; } } ...

선택자 & 가상 선택자로써, 부모 선택자를 참조 할 수 있음. css 자식 선택자와 동일하게 사용 가능. (ul > li) css 자손 선택자와 동일하게 사용 가능. (li a) last-child 를 이용하여 마지막 요소의 속도를 가져올 수 있음. a { color: red; // &.active == a:active &.active { color: blue; } } scss $red: red; .aa { color: $red; ul { border: 1px solid $red; > li { background: pink; a { text-decoration: none; &:hover { color: $red; } &.bbb { font-size: 11px } } .bbb { color: greenye..

변수 $ 키를 이용하여 원하는 영문 / 영문 + 숫자 / 영문 + 특수문자 + 숫자 / 대소문자 등으로 사용할 수 있습니다. 동일한 컴포넌트 ui 에 동일한 스타일을 유지할 수 있고 전역, 지역 변수로도 사용할 수 있습니다. scss $white: #fff; $gray: #c9c9c9; $blue: blue; $red: red; $fs30: 30px; $s50: 50px; .btn1 { $hoverColor: #555; width: 200px; height: $s50; line-height: $s50; font-size: $fs30; color: $white; background-color: $gray; border: 1px solid $white; &:hover { background: $hoverCo..