728x90 300x250 Front-end/SASS8 비쥬얼 스튜디오 코드 Live Sass Compiler Live Sass Compiler에 대한 설명은 지난 포스팅에서 참고 하세요 비쥬얼 스튜디오에 Live Sass Compiler를 셋팅하려면 먼저 Live Server가 설치되어 있어야 합니다. (아래 포스팅 참고) https://moo-you.tistory.com/155?category=308020 Visual Studio Code 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기] Visual Studio 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기] 목차 1) Visual Studio Code 비쥬얼 스튜디오 코드 설치하기 2) 비쥬얼 스튜디오 코드 한국어로 변경하기 3) 색 테마 변경 moo-you.tistory.com Live Sass Compiler 설치 1. 비.. 2021. 10. 30. css 전처리기(Preprocessor)란? CSS 전처리기란 간단히 CSS파일을 만들기 위해 미리 처리를 하는 것을 말한다. SCSS(SASS)와 CSS의 차이에 대해서 포스팅할 때 SCSS의 유일한 단점으로 꼽았던 것 SCSS(SASS) 파일은 브라우저가 바로 인식할 수 없기 때문에 브라우저가 인식할 수 있는 CSS로 변경하기 위한 컴파일 과정을 거쳐야만 하는 것이라고 했었는데 https://moo-you.tistory.com/368 SCSS(SASS) CSS 차이 SCSS의 필요성 CSS의 단점 1. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. 2. 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다. .SCSS 사 moo-you.tistory.com 예전에는 이 과정이 다소 복잡.. 2021. 10. 26. SCSS와 SASS 차이 SCSS와 SASS 차이 결론적으로 말하면 SCSS와 SASS는 같은거라 볼 수 있다. SASS가 먼저 생겼고 SASS와 SCSS는 서로 호환이 가능하다. 따라서 SASS라고 말해도 그것이 SCSS를 지칭하는 것이라 볼수 있다. .SASS 예시 /*.SASS*/ .contents padding : 10px .boxArea border:1px solid #ddd color:#ccc .box margin:4px background:#f7f7f7 .SCSS 예시 /*.SCSS*/ .contents { padding : 10px; .boxArea{ border:1px solid #ddd; color:#ccc; .box { margin:4px; background:#f7f7f7; } } } 위에 예시를 보면 알겠.. 2021. 10. 25. SCSS(SASS) CSS 차이 SCSS의 필요성 CSS의 단점 1. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. 2. 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다. .SCSS 사용시에는 위에 언급한 CSS의 단점을 보완할 수 있다. 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다. 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다. 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다. 대신 SCSS(SASS)는 브라우저가 이해할 수 없기 때문에 브라우저가 이해할 수 있는 CSS로 컴파일하는 과정을 거쳐야 하는 번거로운 부분이 있다. .css의 예시 /*.CSS*/ .cont.. 2021. 10. 24. 이전 1 2 다음 728x90 반응형