모든 코드를 볼 수 있는 내 깃헙 주소
https://github.com/tonyhan18/FastCampusStudy/tree/master/FrontEnd/HEROPY

https://heropy.blog/2018/01/31/sass/
https://www.sassmeister.com/
https://github.com/ParkYoungWoong/overwatch-hero-selector-vanilla

Sass

구글에 sass를 검색해보자

Learn sass페이지로 들어가자.

https://sass-lang.com/

sass를 어떻게 설치하고 검사하는지를 알려준다.

sass에서도 변수를 만들어서 특정 데이터를 반복할 수 있다. 원래는 SASS였다가 호환이 안되어서 SCSS가 나오기도 했다.

두개의 문법 차이를 확인해보면 결구에는 세미콜론이 있는지 없는지 차이가 생기었다.

가급적 SCSS를 사용해서 작성하자

---

시작

vscode를 키고 원하는 위치에 폴더 생성 및 npm 초기화를 해주자

mkdir SCSS

cd SCSS

npm init -y

npm i -D parcel-bundler

• 중첩
  

한다음
npm run dev

참고로 live server로는 scss 패키지를 인식못하니 live server로 상태확인하지 말자;;

dist에 가보면 우리가 만든 파일이 css로 자동으로 바꾸어준 것을 확인할 수 있다.

주석

/**/
//

두가지의 주석이 존재한다.

컴파일된 파일을 보니까 슬래시 2번의 주석은 사라진것을 확인할 수 있다.

중첩

위와 같이 선택자들이 반복되지 않고 중첩되어 표현할 수 있는 것이 scss의 기능이다.

실재 css 파일을 보니 위와 같이 정확한 요소들을 잡아준다.

https://www.sassmeister.com/

참고로 sassmeister에 가면 우리가 적은 scss 문법이 css로 바로 바뀐다.

자식 선택자를 고르고 싶다면 꺽쇠를 적어주면 된다.

상위 선택자 참조

&를 사용시 상위 선택자를 참조하게 된다. 즉 두개의 클래스를 모두 참조하고 있는 태그의 선택자가 만들어지게 된다.

위와 같이 last-child가 li를 상위 선택자를 참조하고 있다. 혹은 li가 &위치에 포함되어 들어가게 된다.

이를 응용해서 위와같이 하나의 class 이름 뒤에 붙은 다양한 클래스들로 바꾸는 것도 가능하게 된다.

중첩된 속성

위와같이 알고 있는 속성들의 이름 앞부분들을 따로떼서 사용도 가능하다. ㅎㄷㄷ 이 부분을 네임스페이스라고 부르는데 같은 이름의 범위가 유효하다고 부른다.

변수

위와 같이 반복되는 수치를 하나의 변수에 모두 저장해서 사용할 수 있다. 변수는 선언된 범위에서 유효범위를 가지게 된다.

예를 들어서 현재 선언된 변수는 전역변수이다. 하지만 .container 안에 선언해주면 .contatiner 안에서만 사용할 수 있게 된다.

혹은 위와 같이 재할당도 가능해진다.

주의할점은 마지막에 작성하면 재정의 된것을 기준으로 사용된다. 마치 js와 동일하게 작동하는 것을 확인할 수 있다.

연산

위와같이 +,-,*,/,% 연산 모두 가능하다.

그런데 이상한 것은 어쨰서인지 나누기는 제대로 되지 않았다.

이것은 위와 같이 font 단축 속성을 구분할때 /를 사용하기 때문이다.

그래서 이것을 해결하기 위해 괄호로 나누는 부분을 묶어주자.
변수를 작성해서 나누어줄 수도 있다.
혹은 앞서서 연산을 수행한다음 나누어주는 방법도 존재한다.

만약에 단위가 다른 경우라면?

그 경우 위와같이 calc() 함수안에 데이터를 넣어주자.

재활용

같은 속성들을 반복해서 작성하지 말고 한번 작성하는 것으로 재활용할 수 있게 만드는 방법에 대해서 알아보자.

@mixin - @include 의 조합으로 코드를 재활용할 수 있다.

그런데 만약에 사용중 속성중 단 하나만 바꾸고 싶은 경우는 어떻게 할까? 모두 재정의하는 것은 시간낭비가 아닐 수 없다.

이것을 해결하기 위해 @mixin이 작성되어 있는 부분에 변수를 넣어주는 것이다. 마치 함수와 같다고 볼 수 있다.

만약 매번 변수값을 작성해주는 것도 귀찮다고 하면 위와 같이 default 값을 지정할수도 있다.

매개변수는 2개이상 받을 수도 있다.

그런데 매개변수 중에서 뒤에 있는거 하나만 바꾸고 싶은 경우는 어떻게 할까? 이걸 순수 명시해주기는 어렵다. 그래서 키워드 인수(Keyword Arguments)를 사용하면 된다.

위와같이 키워드에 맞는 인수를 전달해주니 해당하는 값에 직접적으로 바뀌는 것을 확인할 수 있다.

반복문

nth-child 선택자를 사용해서 i라는 변수 값을 그대로 명시할 수 없기 때문에 문자를 보관하는 방식을 사용해야 한다.

#{}을 사용해서 변수를 삽입할 수 있다.

그런데 이 변수는 특이하게 값을 적는 부분, 위와 같이 연산을 하는 부분에서는 사용이 가능하다.

함수

@function - @return 조합으로 함수를 제작할 수 있다. 뭐... 그런데 보면 @mixin이 떠오른다면 극히 정상이다.

그럼 @mixin과 @function의 차이점은 @mixin은 그냥 모음이고 @function은 연산 결과 반환용으로 사용하게 된다.

그래서 @function을 사용하는 대표적인 경우는 화면비율이 16:9인 화면에 맞추는 경우를 예로 들 수 있을 것이다.

색상 내장 함수

mix() 함수를 사용해보자
인수는 두개를 받는다.

lighten()

darken()

lighten과 darken은 hover 효과에 사용할 수 있게 된다.

saturate() 함수는 첫번째 인자의 색상에 채도를 높여준다.

desaturate() 함수는 색상의 채도를 낮추어준다.

grayscale() 함수는 색상을 회색으로 만들어준다.

invert() 함수는 색상을 반전시키어준다.

rgba() 함수는 색상에 투명도를 줄 수 있다.

가져오기

main.scss

녀ㅠ.scss

다시 main.scss에서 @import 해주면 된다.

이렇게 줄여도된다.

오버워치 선택창 리팩토링

https://github.com/ParkYoungWoong/overwatch-hero-selector-vanilla

위 링크에서 파일을 ZIP 파일로 받아서 index.html 과 main.css 파일만 남기어 주자

npm init -y
npm i -D parcel-bundler

이제 css 파일을 scss로 리팩토링 해보자

npm run dev

일단 잘 뜨는 걸 확인해보자

scss 문자열 보관은 #{$}으로 한다는 것을 떠올리자

그래서 url을 변수로 저장한다음 #{$url}로 바꾸면 동일한 코드를 나타내게 된다.

그럼 이제 나중에 가장 아래쪽에 있는 이 부분도 수정해보자

먼저 container안에 heroes와 hero 클래스를 넣고

가상 클래스 선택자는 잘라서 넣어주자

image 관련 속성들도 넣어주자

이제 영웅 이미지의 url을 수정해주어야 하는데

그런데 이렇게 하기는 너무 귀찮다. 그래서 반복문을 사용해서 수정해보자

가상 클래스 선택자로 삽입하여 32줄의 코드를 3줄로 단순화할 수 있었다.

그외 logo 클래스의 선택자들도 container안으로 넣어주자

참고로 필자는 젠야타가 주캐이다. 진정한 힐러는 피해의 원천을 차단하는 것이다. 나미아미타불 관세보살~

데이터 종류

데이터 종류는 총 7가지가 존재하며

• number은 숫자를 포함한 모든 크기를 담을 수 있다.
• string은 색깔과 숫자를 제외한 나머지들을 모두 지칭한다.
• color은 직접 색상을 적거나 rgba, 해쉬값도 사용가능하다.
• boolean은 true, false만 존재
• null은 그냥 null이다.
• list 형태도 존재한다. 세미콜론을 기준으로 나누어주면 된다.
• map 형태로 key-value를 나눌 수도 있다.

반복문 @each

list, map을 다루기 위한 반복문

list를 사용하기 위해서
@each $c in $list의 문법을 사용하면 된다. 그 외의 부분은 반복문과 동일하다.

map을 사용하기 위해서
@each $k, $v in $map의 문법을 사용하면 된다. 그 외의 부분은 반복문과 동일하다.

재활용 @content

@mixin에 추가적인 값을 넣고 싶은 경우 위와 같이 @content 키워드를 넣어서 추가해줄 수 있다.

모든 코드를 볼 수 있는 내 깃헙 주소
https://github.com/tonyhan18/FastCampusStudy/tree/master/FrontEnd/HEROPY