본문 바로가기

프론트엔드/SCSS, Sass13

모든 컴포넌트에서 전역 스타일 가져오기 scss을 사용할경우 scss 파일을 가져올때 일일이 import 선언하는것을 대체하는 방법 검색어: sass-loader github 참고 url: https://github.com/webpack-contrib/sass-loader GitHub - webpack-contrib/sass-loader: Compiles Sass to CSS Compiles Sass to CSS. Contribute to webpack-contrib/sass-loader development by creating an account on GitHub. github.com 링크 클릭 사용법 확인 webpack.config.js 소스에 코드 추가 마지막에 세미콜론(;) 찍어주는것이 중요 확인을 위해 서버를 재실행: npm run.. 2022. 1. 10.
SCSS - 데이터 타입 SCSS에서 사용하는 데이터 타입 모음 : number, string, color, boolean, null, list, map, .class @each 문법을 이용해서 list, map안에 데이터를 꺼내서 사용할 수 있다. $number: 1; $string: bold; $color: red; $boolean: true; $null: null; // 자바스크립트에서 배열과 유사 $list: orange, royalblue, yellow; // key, value 형태의 자바스크립트에서 객체데이터와 유사(object) $map: ( o: orange, r: royalblue, y: yellow ); .box { whidth: 100px; color: red; position: relative; } // .. 2021. 6. 26.
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.