미디어 쿼리 관련하여 질문이 있습니다.SCSS 에서 미디어 쿼리 작성시 화면 사이즈가 큰것 부터 작성해야 한다고 전 강의에서 이야기 하셨는데이번 강의에서는 index.scss 에서 호출시@include mq('phone'){ border: none;}@include mq('tablet-land'){ border: 2px solid $border-color;}@include mq('desktop-big'){ border: 10px solid $border-color;} 의 순서로 해서 호출을 하여도 잘 작동을 하는것 같습니다.(작은 사이즈 화면 부터 호출이 되는것 같은데, 작동을 잘되어서 작동되는 이유를 알수 싶습니다.)원리를 알수가 있을까요? 

맥북에서 vscode에 live sass compiler 설치하려고하니 setting docs가 없을때는 어떻게 해야하나요?

beautify 확장자가 더이상 관리되지 않다고 해서beautify css/sass/scss/less 확장자를 다운받았는데괜찮을까요??

느낌표에 호버하면 'invalid property value' 라고 나오면서h2에 background: linear-gradient(left, $color-primary, $color-secondary); 가 안 먹히는 상황입니다  제공해주신 파일의 _type.scss를 그대로 붙여넣기 했는데도 동일하네요 ㅜㅜ 뭐가 문제일까요..

@mixin 파트 시청중 궁금점이 생겨서요!첫번째 이미지 처럼 hover를 저렇게주고 css 컴파일하면은두번째이미지처럼 3개의 hover를 가진 css로 컴파일 되어서 보여지는데요.저러면은 괜히 css만 지저분해져보이는데 저렇게 hover를 주는 이유가 있었을까여?.그리고 css 컴파일 된것을 보면은ex) .complete.complete:hover -> 이렇게 되어있으면은 제가 알고 있는 css개념으로는.complete 클래스를 가지면서 .complete를가진 요소에 hover를 줘라라고 알고있기때문에hover가 먹지 않을꺼라고 생각이들었는데요. 먹어지는 이유가 있을까요?..

&에 대해 학습하고나서 더 다른 실습을 해보기 위해 예시를 찾던중에 이해가 안되는 부분이 있습니다. 해당 scss인데 이를 컴파일 했을때 결과물이이렇게 나온다고 예시가 있었으며 이를 실제로 실험해보니 정말로 저렇게 나오더라고요여기서 질문이 div.section & ->이부분은 li안에서 설정한건데 왜 컴파일했을때 맨앞에 아무것도 없이 바로 div로 나오는지 궁금합니다. 위 구문 뒤에 &는 바로 li로 불러오는지 알았는데 맨 상위부모클래스인 .list_gnb까지 포함해서 가져오는데요 이는 왜 그런건지요? &는 바로 직전부모클래스로 가져오는게 아닌것인지요분명 강의 2~3번본건데도 불구하고 저렇게 컴파일된거에 대해 이해가 안되네요 ㅠㅠ 

안녕하세요!live sass compiler 익스텐션 설치 및 세팅 영상 공부하고 있는데요!강의에 나오는 ritwick dey의 익스텐션은 더 이상 사용이 불가하다고 하여, 그 아래에 있는 glenn marks 버전을 설치했습니다.설치 후 json 세팅을 하고 있는데설정 > 확장에 live sass compiler가 나오지 않아 문의 드립니다. sass를 검색했을 때 아래 부분만 나오는데요! json 세팅을 할 수 있는 다른 방법이 있을까요? 감사합니다.

안녕하세요..scss 를 사용하고 있는데, @debug 가 출력이 되지 않습니다...stats: { loggingDebug: ['sass-loader']}위 구문을 webpack.config.js 에 추가하라고 해서, vue.config.js에 추가를 했습니다.그래도 콘솔에 출력이 되지 않습니다.다른 방법이 있을까요?도움을 부탁 드립니다.

안녕하세요.남겨주신 답변 보고 sass에 대해 좀 더 공부 중입니다.sass 컴파일 모듈에 대해 공부&비교를 하고 있는데, 문의가 있습니다...! 회사 프로젝트에 NPM 모듈 중 sass와 sass-loader가 모두 설치되어있는데,하나만 설치해도 되는 것 아닌가요? 둘 다 컴파일해주는 모듈이고,만들어진 언어(Dart, C/C++)가 다르고,Dart sass 는 main.js에 컴파일 관련 선언을 해야한다.sass-loader는 따로 선언할 게 없다.이렇게 파악을 했습니다. 그럼 컴파일러는 하나만 설치해도 되는게 아닐까 해서요. 둘 다 설치하는 이유가 있을까요?...아님 취향?의 차이로 하나만 선택해서 설치하면 될까요? 너무 기본적인거라 질문들 드려도 될 지 모르겠습니다.답변 부탁드립니다!  

안녕하세요. 강의를 보고, 회사 프로젝트(vue+ts)도 분석하면서 프로젝트를 재설치 및 셋팅을 연습하고 있습니다. 그러던 중 궁금한 점이 몇 가지 생겼습니다.   1. npm 모듈을 설치하는데 vs code의 확장 프로그램과 겹쳐지는 게 있는데, 두가지를 중복해서 설치하지 않아도 될 것 같다는 생각이 들어서요. 두가지를 모두 설치해야 할까요? 아니면 때에 따라 하나만 설치하나요? ex) 확장 프로그램 / npm 모듈 Prettier - Code formatter <===> prettier ESLint <===> eslint 등등...   2. package.json에서 이름이 비슷한 npm 모듈이 있는데, 서로 하는 일이 다른가요? vue용, ts용과 일반?용을 다르게 설치한걸까요? 하나만 설치하면 안되는건가요? 중복 설치라면 말씀해주세요 ㅜㅜ ex) lodash <===> vue-lodash <===> @types/lodash-es @typescript-eslint/eslint-plugin <===> eslint와 eslint-plugin-vue <===> @vue/cli-plugin-eslint 등등...   3. sass 컴파일 현재 로컬에 확장 프로그램 Live Sass Compiler 가 설치되어 있고, 프로젝트 npm 모듈 sass와 sass-loader가 설치되어 있습니다. sass 사용을 위해선 npm 모듈 sass 설치가 필수 인가요? 그리고 Live Sass Compiler / sass-loader는 둘 가 sass를 css로 컴파일 해준다고 알고 있는데, 둘 다 설치해야 하나요? node를 사용하지 않는 프로젝트를 위해 Live Sass Compiler를 로컬에 설치해놓고, node를 사용하는 프로젝트 시에는 sass-loader를 npm 모듈로 설치하는 건가요?     선임분들이 셋팅해놓은 플젝만 해보아서 저의 질문이 제대로 된 질문인지도 모르겠습니다.ㅜㅜ   구글링을 해보았는데, 원하는 답변이 나오지 않아서 이렇게 질문을 올립니다. 구글링을 너무 대충한거라면.... 키워드라도 말씀 부탁드립니다. 다시 한번 찾아보겠습니다.   확인 부탁드립니다. 감사합니다!  

안녕하세요 강사님~ 강의 잘 듣고 있습니다! 다름이 아니라 강의 초반 SASS린트를 설치해서 사용하라고 하셔서 설치를 했는데 강사님 영상에서도 그렇고 제 PC에서도 보는데도  패널창에서 SASS 린트 문법 오류가 나오더군요.. 혹시 이거 수정할 수 있는 방법이 있을까 싶어서 질문드립니다!

섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고 평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다.   밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다. 웹사이트 삼성화재 바로가기   밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다. codepen 바로가기   네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다. 현재 디스플레이 none block 으로 만들었습니다. opacity 으로 적용 했지만 해결되지 않았어요. 혹시 좋은 방법 없을까 하고 질문올립니다.

m1 사용하면서 홈브류.. nvm.. npm 설치 오류들을 극복해가면서 드디어 npm을 설치했습니다... sass 설치가 안되는데 혹시 아시는 분 계신가요..? 탈모가 시작됐어요     그리고 npm 한테 물어보면 sass 가 설치되었다하는데 직접 버전을 물어보면 없다고 떠요...

 live sass compiler  설정시 예를 들어 main.scss 파일이 있는데, 컴파일 후 생성되는 css 파일의 명은 style.css로 만들고 싶으면 어떻게 해야 할까요 ㅠㅠ?