[TIL] SCSS ๋ฌธ๋ฒ• ์ •๋ฆฌ ๐ŸŽ

dosilvยท2021๋…„ 4์›” 30์ผ
3
post-thumbnail

์ผ๋‹จ ๋ฐฐ์šฐ๊ธด ๋ฐฐ์› ๋Š”๋ฐ SASS๋Š” ๋ญ๊ณ  SCSS๋Š” ๋ญ์ง€? ํ•˜๋‹ค๊ฐ€ ํ•ด๋ณด๋Š” ์ •๋ฆฌ! SASS๋Š” CSS์˜ ํ™•์žฅ ๋ฌธ๋ฒ•์ด๊ณ (JavaScript๋กœ ์น˜๋ฉด JSX ๊ฐ™์€ ๊ฐœ๋…), SCSS๋Š” SASS์˜ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ๋“ค์„ CSS๋ฌธ๋ฒ•๊ณผ ์ตœ๋Œ€ํ•œ ๋น„์Šทํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋Š” ์‹ ๋ฌธ๋ฒ•... ์ด๋ผ๊ณ  ์ดํ•ดํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹น. ์ž์œ ์ž์žฌ๋กœ ์“ธ ์ˆ˜ ์žˆ์„ ๋•Œ๊นŒ์ง€ ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•ด ๋†“์ž~~~


๐ŸŽ Nesting

  • ์…€๋ ‰ํ„ฐ ๋„ค์ŠคํŒ…

html์˜ parent-child ๊ด€๊ณ„์— ๋”ฐ๋ผ ์Šคํƒ€์ผ ์†์„ฑ๋“ค๋„ ๋„ค์ŠคํŒ…ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ถˆํ•„์š”ํ•œ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜ ์„ ํƒ์ž๋ฅผ ํ•œ ์ค„์— ๊ธธ๊ฒŒ ์จ์•ผ ํ•ด์•ผ ํ•˜๋Š” ์ˆ˜๊ณ ๋ฅผ ๋œ์–ด์คŒ!

๊ฐ€์ƒ์„ ํƒ์ž๋ฅผ ์“ฐ๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ•ด๋‹น ์„ ํƒ์ž์˜ ๋„ค์ŠคํŠธ ์•ˆ์—์„œ &์„ ์“ฐ๊ณ  ์›ํ•˜๋Š” ๊ฐ€์ƒ์„ ํƒ์ž๋ฅผ ๋ถ™์—ฌ ์ฃผ๋ฉด ๋œ๋‹ค.

.form {
  color: gray;
  font-size: 14px;

  input {			//form์˜ ์ž์‹ ์š”์†Œ์ธ input
    margin: auto;
  }
    
  &:focus-within {		//form:focus-within
    border: 2px solid black;
  }
    
  :hover {			//form์˜ ์ž์‹ ์š”์†Œ๋“ค:hover
    background-color: lightblue;
  }
}

๐Ÿฐ &์˜ ์œ ์šฉ์„ฑ ๐Ÿฐ

&์€ ๋„ค์ŠคํŒ…ํ•˜๊ณ  ์žˆ๋Š” ์…€๋ ‰ํ„ฐ๋ฅผ ์น˜ํ™˜ํ•˜๋Š”๋ฐ, '๋ฌธ์ž'๋ฅผ ์น˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํด๋ž˜์Šค๋ช…์„ ์ชผ๊ฐœ์„œ ์“ธ ์ˆ˜๋„ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด์„œ btn, btnBlue, btnRed๋ผ๋Š” ํด๋ž˜์Šค๋ช…์„ ๊ฐ€์ง€๋Š” ๋ณ€์ˆ˜๋“ค์ด ์žˆ๋‹ค๋ฉด ๊ณตํ†ต ์†์„ฑ์€ btn์œผ๋กœ ๋„ค์ŠคํŒ…ํ•œ ์ค‘๊ด„ํ˜ธ ์•ˆ์— ๋ฐ”๋กœ ๋‚˜์—ดํ•˜๊ณ , ๊ฐœ๋ณ„ ์†์„ฑ์€ ํ•ด๋‹น ๋„ค์ŠคํŒ… ๋‚ด์— &Blue, &Red๋กœ ๋˜ ๋„ค์ŠคํŒ…ํ•ด์„œ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป!

.btn {
    width: 200px;
    height: 60px;
    border-radius: 30px;
    
    &Blue {			// .btnBlue
      background-color: blue;
    }
    
    &Red {			// .btnRed
      background-color: red;
    }
}
  • ์†์„ฑ ๋„ค์ŠคํŒ…

    ์…€๋ ‰ํ„ฐ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์Šคํƒ€์ผ ์†์„ฑ๋„ ๋„ค์ŠคํŒ…์ด ๊ฐ€๋Šฅํ•˜๋‹ค! margin, border, font๋“ฑ ํ•˜๋‚˜๋กœ ๋ฌถ์„ ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ ์Šคํƒ€์ผ๊ฐ’๋“ค์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋„ค์ŠคํŒ…ํ•˜๋ฉด ๋œ๋‹ค.
nav {
  margin: {
    top: 20px;
    left: 50px;
  }

  border: {
    color: darkslategray;
    radious: 50%;
    style: dashed;
  }
  
  font: {
    size: 12px;
    color: purple;
    faimily: 'Courier New', Courier, monospace; 
  }
}

๐ŸŠ $๋ณ€์ˆ˜๋ช…: ์†์„ฑ๊ฐ’

์ž์ฃผ ์“ฐ์ด๊ฑฐ๋‚˜ ์˜๋ฏธ ์žˆ๋Š” ์†์„ฑ๊ฐ’๋“ค์„ ์›ํ•˜๋Š” ์ด๋ฆ„์œผ๋กœ ๋ณ€์ˆ˜์— ๋‹ด์•„์„œ ์“ธ ์ˆ˜ ์žˆ๋‹ค. ์—ฌ๊ธฐ๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณ€์ˆ˜์ฒ˜๋Ÿผ global๊ณผ local์˜ ๊ฐœ๋…์ด ์ ์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ค‘๊ด„ํ˜ธ ๋ฐ–์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ์•„๋ฌด๋ฐ์„œ๋‚˜ ์“ธ ์ˆ˜ ์žˆ๊ณ , ์ค‘๊ด„ํ˜ธ ์•ˆ์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ํ•ด๋‹น ์ค‘๊ด„ํ˜ธ ๋‚ด์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ!

//๋ณ€์ˆ˜ ์„ ์–ธ
$mainColor : #ffffff			
$profileImg: "./images/profile.png"


//๋ณ€์ˆ˜ ์‚ฌ์šฉ
div {
  color: $mainColor;
  background-image: url($profileImg)
}


๐Ÿ‹ @import "ํŒŒ์ผ๊ฒฝ๋กœ"

๋‹ค๋ฅธ scs ํŒŒ์ผ์˜ ์Šคํƒ€์ผ์„ ๊ฐ€์ ธ๋‹ค ์“ฐ๊ณ  ์‹ถ์„ ๋•Œ, ๋ชจ๋“ˆ์ฒ˜๋Ÿผ ์ž„ํฌํŠธํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ์Œ! ๋ณดํ†ต _reset.scss ๋“ฑ ๋ฒ”์šฉ์ ์œผ๋กœ ์“ฐ์ด๋Š” ์Šคํƒ€์ผ์‹œํŠธ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ์œ ์šฉํ•˜๋‹ค.

@import "reset.scss";

๐Ÿ @extend ์…€๋ ‰ํ„ฐ

๊ด€๋ จ์„ฑ ์žˆ๋Š” ํƒœ๊ทธ๋“ค์— ๋™์ผํ•œ ์†์„ฑ์„ ๋ถ€์—ฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ˜๋ณต์„ ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค! ์ƒ์œ„ ํƒœ๊ทธ์˜ ์†์„ฑ๋“ค์„ ์ด์‹ํ•ด ๋†“๋Š” ๋Š๋‚Œ...?

.box {
  width: 300px;
  height: 150px;
  margin: auto;
  padding: 20px;
}

.main {
  @extend .box;
  color: darkgray;
}

๐Ÿ‡ @mixin ์ด๋ฆ„($์ธ์ž๋ช…: ๋””ํดํŠธ๊ฐ’) & @include ์ด๋ฆ„(๊ฐ’)

์ฒ˜์Œ์— extend์™€ mixin์ด ๊ทธ๊ฒŒ ๊ทธ๊ฑฐ ๊ฐ™์•„์„œ ํ—ท๊ฐˆ๋ ธ๋Š”๋ฐ mixin์€ css๋กœ ์ปดํŒŒ์ผํ–ˆ์„ ๋•Œ ์…€๋ ‰ํ„ฐ๋“ค์„ ๋ณ‘ํ•ฉํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์—ฐ๊ด€์„ฑ์ด ๋–จ์–ด์ง€๋Š” ํƒœ๊ทธ๋“ค์— ์‚ฌ์šฉํ•ด๋„ ๋œ ์–ด์ƒ‰ํ•˜๊ณ , ๋˜ ์ธ์ž๋ฅผ ๋ฐ›์•„์„œ ๋™์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ค‘๋ณต๋˜๋Š” ์Šคํƒ€์ผ๋“ค ๊ฐ€์šด๋ฐ ๋ช‡ ๊ฐœ์˜ ๊ฐ’๋“ค๋งŒ ๋ฐ”๊ฟ”์„œ ์ ์šฉ์‹œํ‚ค๊ณ  ์‹ถ์„ ๋•Œ ์œ ์šฉ!

//์„ ์–ธ ์‹œ
@mixin colorBox($color, $fontsize: 12px) {
  width: 200px;
  background-color: $color;
  font-size: $fontsize;
}

//์‚ฌ์šฉ ์‹œ
.purpleBox {
  @inclued colorBoc(purple);
}

.greenBox {
  @inclued colorBoc(green, 24px);
}

๊ทธ ์™ธ์—๋„ ๋ฐ˜๋ณต๋ฌธ๋„ ์žˆ๊ณ  ๋จธ๊ฐ€ ๋งŽ์•˜์ง€๋งŒ... ์ผ๋‹จ์€ ์—ฌ๊ธฐ๊นŒ์ง€ ์—ด์‹ฌํžˆ ์ ์šฉํ•ด ๋ณด๊ธฐ~~~!

profile
DevelOpErUN ์„ฑ์žฅ์ผ๊ธฐ๐ŸŒˆ

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