React - SASS

moolbumยท2021๋…„ 12์›” 1์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
6/14
post-thumbnail

SASS ๐ŸŽจ

sass๋Š” css ์ „ ์ฒ˜๋ฆฌ๊ธฐ ์ž…๋‹ˆ๋‹ค. sass ๋ฌธ๋ฒ•์ด css๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ๊ฒƒ!
nesting, mixin, ๋ณ€์ˆ˜ ๋ฅผ ์ด์šฉํ•ด ์Šคํƒ€์ผ์‹œํŠธ์˜ ์œ ์ง€๋ณด์ˆ˜์™€ ๊ฐ€๋…์„ฑ์„ ์ข‹๊ฒŒ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

์„ค์น˜๋ฐฉ๋ฒ•

npm install sass --save

--save ๋ฅผ ์ ๋Š”์ด์œ ๋Š” package.json ์„ค์น˜๋œ ํŒจํ‚ค์ง€์™€ ์ •๋ณด๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์ค๋‹ˆ๋‹ค.


1๏ธโƒฃ .css โžก๏ธ .scss ํ™•์žฅ์ž ๋ณ€๊ฒฝ

sass๋ฅผ ์„ค์น˜ ํ›„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ธฐ์กด์˜ cssํ™•์žฅ์ž๋ฅผ .scss๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ jsํŒŒ์ผ์—์„œ import ํ–ˆ๋˜ css๊นŒ์ง€ .scss๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.


2๏ธโƒฃ nesting

sass์˜ ํŠน๋ณ„ํ•œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ธ Nesting( ๋„ค์ŠคํŒ… ) ์€ ๋ถ€๋ชจ์š”์†Œ์™€ ์ž์‹์š”์†Œ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๊ตฌ๋ถ„ํ•ด ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋ฉด์„œ ์ž์‹์š”์†Œ๋Š” ๋ถ€๋ชจ์š”์†Œ์— ์†ํ•ด์žˆ์–ด ๋‹ค๋ฅธ ๋ถ€๋ชจ์š”์†Œ๋“ค๊ณผ ๊ฒน์น˜์ง€ ์•Š์•„ ์Šคํƒ€์ผ์ด ์ถฉ๋Œ๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•ด์ค€๋‹ค.

//๋ชจ๋‘ comment ๋ผ๋Š” ๋ถ€๋ชจ์š”์†Œ์˜ ์ž์‹์ด๋‹ค.
//scss nesting (๋„ค์ŠคํŒ…)

.comment {
  .commentNameBold {
    font-weight: bold;

    .commentMargin {
      font-weight: normal;
    }
  }

  .heart {
    width: 15px;
    cursor: pointer;
  }

  .heartColor {
    display: none;
    width: 15px;
    cursor: pointer;
  }
  .commentText {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
  }
  .commentNameBold {
    margin-right: 5px;
  }
}

3๏ธโƒฃ mixin

mixin ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋งค ๋ฒˆ ๊ธธ๊ฒŒ ์ ์–ด์•ผ ๋˜๋Š” ์†์„ฑ์„ ํ•œ ์ค„์— ์ ๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค!

@mixin logoText($logoText: 50px) {
  font-family: 'Lobster', cursive;
  font-size: $logoText;
}

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

์œ„ ์ฒ˜๋Ÿผ mixin์œผ๋กœ ๋‹ค์–‘ํ•œ ์†์„ฑ์„ ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜๋กœ ์ฒ˜๋ฆฌํ•œ๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.

// @mixin logoText($logoText: 50px)
// mixin์„ ์‚ฌ์šฉํ•˜๊ณ  ํฐํŠธํฌ๊ธฐ๋ฅผ ๋ณ€์ˆ˜์ฒ˜๋ฆฌ ํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

.navContainer {
    @include flexBetween;
    width: 935px;
    
    .logo {
    @include logoText($logoText: 22px);
    margin-left: 25px;
  }
}

@include๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ๋’ค์— mixin์œผ๋กœ ์„ค์ •ํ•œ ๋ณ€์ˆ˜๋ฅผ ์ ์œผ๋ฉด ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ๋‹ค!


4๏ธโƒฃ ๋ณ€์ˆ˜

mixin๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ ๋‹ค๋ฅธ $๋ฅผ ์ด์šฉํ•ด ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด $border-radius: 5px; ์ด ๊ฐ’์€ ์–ด๋–ค ์Šคํƒ€์ผ์—์„œ ์ด ๋ณ€์ˆ˜๋ช…์„ ์ ์œผ๋ฉด 5px์ด๋ผ๋Š” ๊ฐ’์„ ๋งŒ๋“ ๋‹ค.


$border-radius: 5px;

    .userIdInput {
      width: 215px;
      padding: 5px 0;
      border: 1px solid rgb(219, 219, 219);
      border-radius: $border-radius;
		
      //border-radius: 5px์„ ๊ฐ€์ง„๋‹ค

      &::placeholder {
        color: #c7c7c7;
        background-size: contain;
        background-position: 35%;
        background-repeat: no-repeat;
        text-align: center;
      }

scss์—์„œ ์—ฐ์‚ฐ์ž & ์˜ ์—ญํ• ์€ ์ถ”๊ฐ€ ์Šคํƒ€์ผ ์†์„ฑ์„ ๋ถ€์—ฌ ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.
ex) &:hover , &::placeholder

profile
Junior Front-End Developer๐Ÿ˜Ž

0๊ฐœ์˜ ๋Œ“๊ธ€