CS_SW_TodoList #1

초반 작업 만들어보기

사용하고싶은 스택 (scss , grid?)

scss를 써보고싶어서 사용법에 대해서 조사를좀 해보았다.

npm install -g node-sass

err가 많ㅇ ㅣ나온다면 (Mac)

sudo npm install --unsafe-perm -g node-sass

설치이후에

scss 파일 생성

그리고 html에 css로 확장자 ㅇ연결

cmd + shift +p 로 live sass 실행

그러면서 scss-> css로 컴파일 되고

.css.map 이 생성되게 된다.

sass 기능이 뭐가있지?

• 변수
• import
• function
• extend (상속)

sass? scss??

솔찍히 잘모르겠다.

css가 불편해서 -> sass를 만들었는데 너무 문법적으로 호환이 안되서

다시 scss가 생긴것이다. 이런 흐름으로 알고있다.

그리고 다른건아니고 결국 컴파일이라는 전처리를 통해서

css로 html을 꾸며주는것은 동일하다.

/sass와 scss의 차이점은?
기본적으로 안에 들어있는 내용은 같지만 작성하는 문법에서 약간의 차이가 있습니다.

scss는 css문법과 완벽하게 호환이 되는 그런 구문을 가지고 있습니다.

① 간단한 차이는 { } (중괄호)와 ; (세미콜론)의 유무입니다.

*sass는 중괄호와 세미콜론을 가지고 있지 않습니다.

② 또 다른 차이는 Mixins('믹스인'은 재사용 가능한 기능을 만드는 방식을 의미합니다.)

sass는 = 와 + 기호로 Mixins 기능을 사용했다면

scss는 @mixin과 @include로 기능을 사용했습니다.

출처 : https://neul-carpediem.tistory.com/271

추가로 맨날 까먹는

<link rel="stylesheet" href="index.css" type="text/css">
<script src="index.js"></script>