73. Defining Project Settings and Custom Properties

이번 프로젝트의 목표는 flex-box 사용법을 익히는 것이기 때문에 architecture와 같은 것들에 신경쓰지 않을 것이다.

이번에는 scss의 변수를 지정하는 것이 아니라 

css 지정 변수를 사용할 것이다.

왜 이것이 좋냐? prefixer 그 변환하는 과정을 거치지 않아도 되기 때문이다.

css 변수는 연속적으로 상속된다.

 

root psedo class

여기 변수를 선언하면 모든 문서에서 사용할 수 있다

 

:root 를 이용하여 변수를 선언하고 

var(변수이름) 형태를 이용해서 활해보았다

 

 

_base.scss

/*
COLORS

Primary: #eb2f64
Primary light: #FF3366
Primary dark: #BA265D

Grey light 1: #faf9f9
Grey light 2: #f4f2f2
Grey light 3: #f0eeee
Grey light 4: #ccc

Grey dark 1: #333
Grey dark 2: #777
Grey dark 3: #999

*/

:root {
  --color-primary: #eb2f64;
  --color-primary-light: #ff3366;
  --color-primary-dark: #ba265d;
  --color-grey-light-1: #faf9f9;
  --color-grey-light-2: #f4f2f2;
  --color-grey-light-3: #f0eeee;
  --color-grey-light-4: #ccc;

  --color-grey-dark-1: #333;
  --color-grey-dark-2: #777;
  --color-grey-dark-3: #999;
}

* {
  padding: 0;
  margin: 0;
}

*,
*::after,
*::before {
  box-sizing: inherit;
  font-size: 62.5%;
}

body {
  color: var(--color-grey-dark-2);
  background-image: linear-gradient(
    to bottom,
    var(--color-primary-light),
    var(--color-primary-dark)
  );
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;

  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}