반응형 Sass2 VSCode - Sass 확장프로그램 : Sass / Live Sass Compiler sass는 css를 더 편하게 쓸 수 있는 도구로 설치 후 기본세팅을 해보겠습니다. 1. Sass 설치하기 Extensions 에서 Sass를 검색하여 설치합니다. 2. Live Sass Compiler 설치하기 Extensions 에서 Live Sass Compiler 검색하여 설치합니다. 3. Live Sass Compiler 설정하기 F1을 눌러 Preferences:open user settings(JSON)을 검색하고 아래의 코드를 작성합니다. savePath "~" : 현재 SASS 파일의 위치로부터 상대 경로를 적어줄 때 사용 끝. 2022. 9. 19. SCSS/SASS 정리 SCSS(SASS) CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 합니다. SCSS는 중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있습니다. 대표적인 장점이라고 볼 수 있는 셀렉터 중첩기능에 대해서 알아보겠습니다. // 일반적인 CSS 코드입니다 nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block.. 2022. 8. 18. 이전 1 다음 반응형