본문 바로가기

분류 전체보기474

SCSS - 가져오기 SCSS에서 다른 파일의 SCSS파일을 읽어오는 방법 URL을 명시하는 방법 @import url("./sub.scss"); URL을 생략하는 방법 @import "./sub.scss"; 확장자를 생략하는 방법 @import "./sub"; 두가지 이상을 가져오는 방법 @import "./sub", "./sub2"; 2021. 6. 26.
SCSS - 색상 내장 함수 mix("첫번째", "두번째"): 첫번째 인자, 두번째 인자값을 섞어서 색상을 표현해주는 함수 background-color: mix(royalblue, red); lighten("첫번째", "두번째"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 밝게 표현 background-color: lighten(royalblue, 10%); darken("첫번째", "두번째"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 어둡게 표현 background-color: darken(royalblue, 10%); 버튼을 만들 때 유용하게 사용된다. (마우스를 올리면 색이 진해지도록 설정) &:hover { background-color: darken(royalblue, 10%); } saturate("첫번째 인자.. 2021. 6. 25.
SCSS - 함수 SCSS 에서 함수기능을 지원한다. 반환된 값을 사용 예시 // 재활용 선언 @mixin center { display: flex; justify-center: center; align-items: center; } // 함수 선언 @function ratio($size, $ratio){ @return $size * $ratio; } .box { // 변수 선언 $width: 100px; // 변수 사용 width: $width; // 함수 사용 height: ratio($width, 1/2); // 재활용 사용 @include center; } 2021. 6. 25.
SCSS - 반복문 SCSS에서도 반복문을 지원한다. 반복문에 사용되는 변수를 이용 가능하다. 예시 // 1 부터 10 까지 반복 @for $i from 1 through 10 { // 번호를 명시하는 방법 // 보간법 사용 .box:nth-child(#{$i}) { width: 100px * $i; } } 2021. 6. 25.
SCSS - 재활용 스타일을 재활용 하는 방법 @mixin을 이용하여 재활용 스타일을 만들 수 있고 @include를 이용하여 @mixin으로 만든 속성을 재활용 할 수 있다. // @mixin을 이용하여 재활용이 가능한 스타일 속성 만들기 // 가운데 정렬하는 함수 @mixin center { display: flex; justify-content: center; align-items: center; } // 재활용 할경우에는 @include를 앞에 붙여줘야 한다. .container { @include center; .item { @include center; } } .box { @include center; } 재활용 스타일 속성에 인수를 받아서 사용하는 방법 여러개의 인수를 받을 수 있다. 키워드 인수를 이용하여 원.. 2021. 6. 25.
SCSS - 산술 연산 SCSS 에서는 각 속성에 값을 넣어 줄때 사칙연산을 사용해서 입력할 수 있다. 이때 나누기 연산은 그냥 사용하면 단축속성과 혼돈될 수 있기 때문에 적용이 안된다. 따라서 괄호() 를 사용해서 연산을 하던가 변수를 이용해서 나누기 연산을 할 수 있다. 또한 연산을 할 때 기본적으로 단위는 같아야 한다. 서로 단위가 다를때는 calc() 함수를 이용해서 사용할 수 있다. 사칙연산 예제 calc 함수 예제 2021. 6. 24.

티스토리툴바