[React] sass

👉🏼 設定

npm install sass --save

// 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"
  }
}

👉🏻 .cssファイルの拡張子。scssに置換

👉🏾 Nestingの適用

//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;
}

//sass
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
		li {
			display: inline-block;
		}
  }

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

👉🏽 変数、&演算子、mixinなどの基本機能の使用

//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;
}

//sass의 변수, @mixin, @include 활용
$theme-color: blue;
$border-style: 1px black solid;

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

login-container {
  @include flex-center;

	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;

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

	input {
		background-color: $theme-color;

		&:focus {
		  background-color: red;
		}
	}
}