달밤에 코딩하기/Sass & SCSS (25) 썸네일형 리스트형 #17 - SCSS 재사용 - 확장(@expand) 확장 특정 선택자의 스타일을 상속할 때 사용. Compile된 CSS가 커지거나 원치않는 부작용이 발생될 수 있으므로 Mixin을 사용하는 것이 좋다. 기본 구조 SCSS @extend 선택자; 사용 예시 SCSS .class1{ width : 100px; height : 200px; } .class2{ @extend .class1; color : red; } Compile 된 CSS .class1, .class2{ width : 100px; height : 200px; } .class2{ color : red; } #16 - SCSS 재사용 - 스타일 전달 (@content) 스타일 전달 (@content) Mixin 부분에 선언하여 스타일 블록을 전달한다. 기본 구조 SCSS @mixin 믹스인이름(){ 스타일; @content; } @include 믹스인이름(){ 스타일; } 사용 예시 SCSS @mixin test($c){ background-color : $c; @content; } .class1{ @include test(red){ background-size : 100%; }; } .class2{ @include test(red) } Compile 된 CSS .class1{ background-color : red; background-size : 100%; } .class2{ background-color : red; } #15 - SCSS 재사용 - 가변인수(...) 가변 인수 인수의 개수를 몇 개로 지정해야 할지 불확실할 때 가변 인수(...)를 사용한다. 사용 예시 1 설정한 인수보다 많은 인수 입력 시, 마지막 매개변수가 입력되는 자리에 초과 된 인수가 들어가게 된다. SCSS @mixin test($w, $h, $bg...){ width : $w; height : $h; background: $bg; } .class( @include test( 100px, 200px, url("./img/main1.png"), url("./img/main2.png"), url("./img/main3.png") ); ) Compile 된 CSS .class( width : 100px; height : 200px; background : url("./img/main1.png"),.. #14 - SCSS 재사용 - 인수의 기본값 재사용에 인수의 기본값 설정 인수의 기본값을 설정했을 경우, 인수 입력란을 비워두면 기본값이 입력된다. 기본 구조 SCSS @mixin size ($매개변수 : 기본값){ 스타일; } Include에 값이 없을 경우 SCSS @mixin size ($w : 200px, $h : 300px){ width : $w; height : $h; } .class{ @include size; } Compile 된 CSS .class{ width : 200px; height : 300px; } Include에 값이 일부 있을 경우 SCSS @mixin size ($w : 200px, $h : 300px){ width : $w; height : $h; } .class{ @include size($h:400px); } C.. #13 - SCSS 재사용 - 매개변수/인수 재사용에 매개 변수 / 인수 사용 기본 구조 매개변수(parameter) : 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미 인수(argument) : 함수가 호출될 때 함수로 값을 전달해주는 값 SCSS @mixin 믹스인이름($매개변수){ 스타일; } @mixin 믹스인이름(인수); 사용 예시 아래 예시에서 $w는 매개변수, 100px과 200px은 인수이다. SCSS /* 매개변수 */ @mixin size ($w, $h){ width : $w; height : $h; } /* 인수 */ .class{ @include size (100px, 200px); } Compile 된 CSS .class{ width : 100px; height : 200px; } #12 - SCSS 재사용 - @mixin @include SCSS 재사용 스타일을 재사용할 수 있도록 도와주는 기능이다. 기본 구조 재사용에서 사용하는 함수는 아래와 같다. @mixin : 재활용할 코드를 정의함 @include : 정의된 재활용 코드를 사용 SCSS @mixin 믹스인이름{ 스타일; } .class{ @include 믹스인이름; } 사용 예시 SCSS @mixin test{ font{ size : 14px; weight : bold; } background-color : red; &::after{ content : "123"; } span.subclass{ background-color : blue; } } .class{ @include test; } Compile 된 CSS .class{ font-size : 14px; font-weight.. #11 - SCSS 산술 연산 산술 연산 산술 연산의 종류 아래 기호로 SCSS에서 연산이 가능하다. 산술 연산의 경우, 양립할 수 있는 단위일 때 적용된다. 양립할 수 없는 단위 사용시, CSS함수인 calc를 사용하면 산술 연산이 가능하다. 분류 기호 내용 산술 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 숫자 더하기 ( + ) SCSS /* 50% = 300px이라고 가정 */ .class1 { width : calc(50% + 10px); } /* 양립할 수 없는 단위를 사용하여 에러 */ .class2 { width : 50% + 10px; } Compile 된 CSS .class1{ width : 310px; } /* class2 에러 */ 문자 더하기 ( + ) 문자열 더하기에서는 첫번째 요소의 따옴표 유무에 따라.. #10 - SCSS 변수 - 기본 값(!default) / 문자 보간 (#{}) 변수 기본값 설정 플래그(!default)를 사용하면 아래와 같이 동작한다. 부트스트랩과 같은 외부 framework를 사용하는 경우, 변수가 겹치는 경우가 있어 자주 이용된다. 앞서 선언된 변수가 있을 경우 : 앞에 선언된 값을 사용 (아래 예시 기준 100px) 앞서 선언된 변수가 없을 경우 : 선언된 값을 사용 (아래 예시 기준 300px) SCSS $size : 100px; .class1 { $size : 300px !default; width : $size; } Compile 된 CSS .class1 { width : 100px ; } 변수 문자 보간 - 문자열 삽입 #{}를 사용하여 문자열을 삽입할 수 있다. SCSS $url : "./image/"; .bg{ background : url($.. 이전 1 2 3 4 다음
