의류 쇼핑몰 만들기 2 | Sass 연결

SASS는 nested 형태로 효과를 줄 수 있어 편하다. 

 

1. 터미널에서 Sass를 다운 받는다. 

npm i sass

yarn add sass

 

 

2. categories.styles.scss 파일을 만든다

이제는 css 파일을 쓰지 않고 .scss 파일을 쓴다. 

 

 

3. App.js에서 import 하기 

 

 

 

4.  categories.styles.scss에 스타일 채우기 

.categories-container {

width: 100%;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.category-container {

min-width: 30%;

height: 240px;

flex: 1 1 auto;

display: flex;

align-items: center;

justify-content: center;

border: 1px solid black;

margin: 0 7.5px 15px;

overflow: hidden;

&:hover {

cursor: pointer;

& .background-image {

transform: scale(1.1);

transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);

}

& .category-body-container {

opacity: 0.9;

}

}

&.large {

height: 380px;

}

&:first-child {

margin-right: 7.5px;

}

&:last-child {

margin-left: 7.5px;

}

.background-image {

width: 100%;

height: 100%;

background-size: cover;

background-position: center;

}

.category-body-container {

height: 90px;

padding: 0 25px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

border: 1px solid black;

background-color: white;

opacity: 0.7;

position: absolute;

h2 {

font-weight: bold;

margin: 0 6px 0;

font-size: 22px;

color: #4a4a4a;

}

p {

font-weight: lighter;

font-size: 16px;

}

}

}

 

 

레이아웃이 잡힌 것을 볼 수 있다. 

 

 

다음 포스트에서 이미지를 넣어보자.