web sprit

vscode 실행하여 Extensions에 들어간다. live sass를 검색 해보면 Extensions 목록에 Live Sass Compiler 가 있다. 그리고 Live Sass Compiler을 사용하기 위해선 컴파일하고 화면에서 확인하기 위해선 가상서버를 생성해주는 Live server 익스텐션도 필요하다. # 설치 (install) Live Sass Compiler Live server 설치를 했다면 따로 설정이 필요하다. 설정에 대한 내용은 아래 URL에 상세히 나와 있다. ritwickdey/vscode-live-sass-compiler Compile Sass or Scss file to CSS at realtime with live browser reload feature. - ritwic..

SCSS를 컴파일 하기위해Front 기술로 nodeJS 나 SASS 또는 Compass 로 컴파일하여 css 로 변환해 줍니다. 그 보다 좀더 간편한 작업에 있어서브라임텍스트를 이용한 SCSS 컴파일 방법에 대해 알아보려 합니다. 우선 Ruby 와 scss가 설치 되어 있어야 합니다.그에 관한 설명은 하단을 참고하시기 바랍니다.SASS 설치방법 서브라임에서 SASS관련 패키지가 존재합니다.ctrl + shift + P 를 누르시고 PCI 를 누르시어 package install을 선택!sass 와 sass Build 패키지를 설치해 줍니다. 우선 어느정도 준비는 끝났습니다.그럼 컴파일 하는 패키지를 직접 설치해 보죠~ https://github.com/alexlitel/Sass-Build-SublimeT..

scss 를 컴파일 하는 style 은 4가지 스타일이 존재합니다.1. nested2. expanded3. compact4. compressed 일반 scss 문법을 통하여 css 로 어떻게 컴파일 되는지 확인해 보겠습니다.scss1234567html{ font-size:10px; body{ color:red; font-family: serif; }}cs cssnestedsass 형식과 유사하게 nested된 css 파일이 생성됩니다. 기본값으로 옵션을 추가하지 않아도 기본 적용됩니다.12345html { font-size: 10px; } html body { color: red; font-family: serif; }cs expanded표준적인 스타일의 css 파일이 생성됩니다.1234567html {..

Compass 는 CSS 를 편리하고쉽게 개발할 수 있게 만들어 주는 CSS Framework 입니다.SASS를 사용하며 , Ruby 기반으로 Ruby를 설치해줘야 합니다.http://kcmschool.xyz/39 위 URL을 참고하면 Ruby 설치방법을 참고 할 수 있습니다. 기존 SASS를 사용하여 Compile 하였다면 Compass는 SASS 보다 간결하고 간단한 방법으로 Compile 이 가능하다. 앞으로 실무에서 사용하며 간간히 사용법이나 Tip을 정리할 생각입니다.이 글이 도움이 되시거나 잘못된 부분이 있으면 댓글 부탁드립니다. ^^