web sprit

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 {..

SASS를 사용하기 위해 SASS에 문법에 대해 알아보도록 하죠. * SASS는 마크업에서만 사용되는 언어로서 공유나 실서비스에 표출되는 것이 아니기 때문에 파일을 여러개 나누어 Import해도 되며, 변수명도 축약어로 사용하지 않아도 됩니다. 1. compail 만약 SCSS 를 작성하였다면 CSS파일로 변환(Compile)해 주어야 합니다. CMD창을 scss파일이 있는 폴더에서 열어 아래와 같이 명령어를 작성해 주어야 하는데 방법은 여러가지 입니다. 기본방식 - 작성후 한번만 Compile 해줍니다.123 sass (작성된)파일명.scss (변환될)파일명.css Colored by Color Scriptercs 우리는 더욱 간편한 css 작성을 위해 scss 사용하는것인데 scss 작성 후 저장할때..

SASS는 Ruby라는 프로그래밍 언어로 만들어졌습니다. 그래서 Ruby를 설치하여 SASS를 사용할 수 있습니다. 그럼 Ruby를 설치해 보겠습니다. 먼저 http://rubyinstaller.org/downloads/ 위 URL로 접속합니다. 그럼 아래와 같은 화면이 나옵니다. 현재 루비 버전은 Ruby 2.2.4 이네요. 전 Window10 64bit를 사용 중이니 최신버젼의 64를 다운 받았습니다. 자 그럼 설치를 진행해 보도록 하겠습니다. 설치를 진행시 아래와 같은 화면이 나오는데요. "Add Ruby executables to your PATH "부분에 체크를 꼭 해주셔야 합니다. 체크를 해주어야 설치가 끝난 후 따로 PATH 설정을 할 필요없이 수고를 덜어 줍니다. 설치가 끝나면 Ruby가 ..

홈페이지의 구도를 잡아주며 디자인 요소는 적용해주는 CSS는 때로는 중복되는 작업이나 자주 쓰이는 속성으로 인하여 지저분한 소스코드나 관리하기 힘든 일이 발생하곤 합니다. SASS를 이용하면 이런 CSS를 보다 간결하고 동적으로 적용할 수 있있습니다. 코드의 재활용성이 높고 그 만큼 코드의 양을 줄여주기 떄문에 작업면이나 소스면이나 매우 효율적으로 제공됩니다. 재활용이나 코드를 어떻게 줄일 수 있을까요? SASS는 SASS나름데로의 문법이 있습니다. 제가 처음 알아본 SASS는 개발문법과 비슷하다고나 할까요? 자바스크립트를 어느정도 하실 줄 아신다면 그리 어렵지 않게 내용을 파악하실 수 있다고 생각합니다. SASS는 자체로는 사용할 수 없으며 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 만..