SASS

kirin.logยท2021๋…„ 1์›” 23์ผ
1

โœ… SASS

๐Ÿ‘‰ SASS ์„ค์น˜(ํ„ฐ๋ฏธ๋„)

npm install node-sass@4.14.1 --save

โ— ์„ค์น˜ ์‹œ node-modules ํด๋”์— node-sass ํด๋”๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค. (package source code)

โ— --save ๋ฅผ ๋’ค์— ๋ถ™์ด๋Š” ์ด์œ  โžก package.json์— ์„ค์น˜๋œ ํŒจํ‚ค์ง€์˜ ์ด๋ฆ„๊ณผ ๋ฒ„์ „ ์ •๋ณด๋ฅผ ์—…๋ฐ์ดํŠธ

// package.json
{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "node-sass": "^4.14.1",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.3"
  }
}

๐Ÿ‘‰ Nesting ๊ธฐ๋Šฅ ์ ์šฉ

  • Nesting์€ Sass์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์ด๋‹ค.
  • JSX ์ตœ์ƒ์œ„ ์š”์†Œ(์ „์ฒด๋ฅผ ๊ฐ์‹ธ์ฃผ๋Š” ์ตœ์ƒ์œ„ ํƒœ๊ทธ)์˜ className์„ ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„๊ณผ ๋™์ผํ•˜๊ฒŒ ์„ค์ •ํ•ด์ฃผ๊ธฐ.
  • .scss ํŒŒ์ผ์—์„œ ์ตœ์ƒ์œ„ ์š”์†Œ ์•ˆ์ชฝ์—์„œ ํ•˜์œ„ ์š”์†Œ์˜ ์Šคํƒ€์ผ ์†์„ฑ์„ ์ •์˜ํ•œ๋‹ค.
/* css */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
/* scss Nesting */
nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
          li {
            display: inline-block;
          }
    }

    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
}

๐ŸŸก ๋ณ€์ˆ˜ ํ™œ์šฉ, & ์—ฐ์‚ฐ์ž, extend ๋“ฑ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ ์ ์šฉ

/* css */
login-container {
  display: flex;
  justify-content: center;
  align-items: center
}

button {
  width: 200px;
  height: 100px;
  background-color: blue;
}

button:hover {
  background-color: red;
  cursor: pointer; 
}

input {
  background-color: blue;
}

input:focus {
  background-color: red;
}
/* scss Nesting */

/* common.scss์— ์„ ์–ธํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค */
$theme-color: blue;    
$point-color: red;

/* %๋ฅผ ํ†ตํ•ด ํ˜•์‹ ์ „์ฒด๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค(common.scss์— ์„ ์–ธํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค) */
%flex-center {         
	display: flex;
	justify-content: center;
        align-items: center
}



login-container {
  @extend flex-center;     /* @extend๋ฅผ ํ†ตํ•ด 'flex-center'๋กœ ์ •์˜ํ•œ ํ˜•์‹์„ ์ „์ฒด ์ ์šฉํ•œ๋‹ค */
	button {
	  width: 200px;
	  height: 100px;
	  background-color: $theme-color;
		&:hover {
		  background-color: red;
		  cursor: pointer;
		}
	}
	input {
    		color: $point-color;
		background-color: $theme-color;
		&:focus {
		  background-color: red;
		}
	}
}
profile
boma91@gmail.com

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