MINYA

내장 함수(Built-in Functions) Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다. 모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다. Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있습니다. []는 선택 가능한 인수(argument)입니다. Zero-based numbering을 사용하지 않습니다. 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color, $amount) : 더 어두운색을 만듭니다. saturate($color, $amount) : ..

for (함수) @for는 스타일을 반복적으로 출력합니다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다. // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to // 종료 직전까지 반복 @for $변수 from 시작 to 종료 { // 반복 내용 } SCSS: // 1부터 3번 반복 @for $i from 1 through 3 { .through:nth-child(#{$i}) { width : 20px * $i } } // 1부터 3 직전까지만 반복(2번 반복) @for $i from 1 to 3 { .to:nth-child(#{$i}) { width : 20px * $i } } Compiled to: ..

if (함수) 조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환. 조건부 삼항 연산자(conditional ternary operator)와 비슷합니다 조건의 값이 true이면 표현식1을, 조건의 값이 false이면 표현식2를 실행합니다. if(조건, 표현식1, 표현식2) SCSS: $width: 555px; div { width: if($width > 300px, $width, null); } Compiled to: div { width: 555px; } 위와 같이 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있습니다. 따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것..

함수(Functions) 자신의 함수를 정의하여 사용할 수 있습니다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다릅니다. 반환 값의 차이 @Mixin : 지정한 스타일(Style)을 반환 // Mixins @mixin 믹스인이름($매개변수) { 스타일; } 함수(Functions): 연산된(Computed) 특정 값을 @return 지시어를 통해 반환 // Functions @function 함수이름($매개변수) { @return 값 } 사용하는 방법의 차이 @Mixin : @include 지시어를 사용 // Mixin @include 믹스인이름(인수); 함수(Functions): 수이름으로 바로 사용 // Functions 함수이름(인수) SCSS: $max-width: 980px; @fu..

Sass(SCSS) 확장(Extend) - @extend 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있습니다. 이럴 경우 선택자의 확장 기능을 사용할 수 있습니다. @extend @extend 선택자; SCSS: .btn { padding: 10px; margin: 10px; background: blue; } .btn-danger { @extend .btn; background: red; } Compiled to: .btn, .btn-danger { padding: 10px; margin: 10px; background: blue; } .btn-danger { background: red; } 컴파일된 결과가 마음에 드시나요? 결과를 보면 ,로 구분하는 다중 선택자(Multipl..

Sass(SCSS) 재활용(Mixins) - @content 선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록 을 전달할 수 있습니다. 이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있습니다. @content @mixin 믹스인이름() { 스타일; @content; } @include 믹스인이름() { // 스타일 블록 스타일; } SCSS: @mixin icon($url) { ＆::after { content: $url; @content; } } .icon1 { // icon Mixin의 기존 기능만 사용 @include icon("/images/icon.png"); } .icon2 { // icon Mixin에 스타일 블록을..

Sass(SCSS) 재활용(Mixins) - 인수(Arguments) Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다. 하나의 Mixin으로 다양한 결과를 만들 수 있습니다. 인수(Arguments) 매개변수(Parameters)란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다. 제공되는 여러 데이터들을 전달인수(Arguments) 라고 부른다. @mixin 믹스인이름($매개변수) { 스타일; } @include 믹스인이름(인수); SCSS: @mixin dash-line($width, $color) { border: $width dashed $color; } .box1 { @include dash-line(1px, red); } .box..

Sass(SCSS) 재활용(Mixins) - @include Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능입니다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다. 선언하기(@mixin)와 포함하기(@include) @mixin 기본적인 Mixin 선언은 아주 간단합니다. @mixin 지시어를 이용하여 스타일을 정의합니다. SCSS: @mixin 믹스인이름 { 스타일; } @mixin large-text { font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } Sass: =믹스인이름 스타일 =large-text font-size: 22px fo..

Sass(SCSS) 가져오기(Import) @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다. 파일 확장자가 .css일 때 파일 이름이 http://로 시작하는 경우 url()이 붙었을 경우 미디어쿼리가 있는 경우 @import "hello.css"; @import "http://hello.com/hello"; @import url(hello); @import "hello" screen; 여러 파일 가져오기 하나의 @import로 여러 파일을 가져..

Sass(SCSS) 문법 - 변수(Variables) 반복적으로 사용되는 값을 변수로 지정할 수 있습니다. 변수 이름 앞에는 항상 $를 붙입니다 $변수이름: 속성값; SCSS: $color-primary: #e96900; $url-images: "/images/"; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + "bg.jpg"); } Compiled to: .box { width: 200px; margin-left: 200px; background: #e96900 url("/images/bg.jpg"); } 변수 유효범위(Variable Scope) 변수는 사용 가능한 유효범위가 있습니다...