저음 설치 및 기본 시작하기
이 글에서는 CSS Preprocessor 인 Sass 또는 구문 적으로 굉장한 스타일 시트.
이전에 LESS에 게시 한 소식을 읽으신 분이라면 CSS 전처리 기. Sass와 LESS는 모두 CSS Preprocessor로 Variables, Mixins 및 Functions와 같은 프로그래밍 언어를 사용하여 더욱 정적 인 CSS를 작성하는 방식을 주로 확장합니다.
Sass 설치하기
Sass를 구성하기 전에 설치해야합니다.. 새시는 루비 위에 세워졌습니다.. Mac에서 작업하는 경우 이미 Ruby가 설치되어 있습니다. Windows에 Ruby를 설치하려면이 Ruby Installer를 사용하십시오.
설치가 완료되면 터미널 (Mac) 또는 명령 프롬프트 (Windows)로 이동 한 후 다음 명령 줄을 입력 할 수 있습니다.
Mac에서;
sudo gem install sass
Windows의 경우;
보석 설치 새총
설치가 성공하면 터미널 / 명령 프롬프트에 다음과 같은 알림이 표시됩니다..
다음 명령을 사용하여 Sass가 볼 디렉토리를 선택해야합니다.
sass - watch path / sass-directory
위의 명령 줄은 모든 .scss/.축축한 에있는 파일들 경로 / 디렉토리 해당 디렉토리에있는 파일 중 하나가 변경 될 때마다 Sass는 해당 파일을 갱신하거나 존재하지 않는 파일을 작성합니다.
특정 디렉토리에 파일을 생성하기 위해 Sass가 필요한 경우,이 방법으로 수행 할 수 있습니다.
sass - watch path / sass-directory : path / css-directory
이 명령 줄에서는 디렉토리가 아닌 특정 파일을 볼 수도 있습니다.
sass - watch path / sass-directory / styles.css
감시 명령이 성공하면 아래 알림과 같은 내용이 터미널 / 명령 프롬프트에 나타납니다..
더 읽을 거리: 자동 컴파일 Sass 파일을 Sass 3
Sass 응용 프로그램
그러나 터미널이나 명령 프롬프트를 통해 작업하는 것이 싫으면 Sass 용 응용 프로그램을 사용할 수 있습니다. 무료 옵션은 스카우트입니다. Adobe Air를 기반으로하므로 모든 OS (Windows, OSX 및 Linux)에서 실행할 수 있습니다..
그러나 일부 사람들은 이전에보고 한 것처럼 매우 느리게 실행됩니다..
그래서 인내심이 없다면 유료 옵션도 있습니다. 가격은 각 앱마다 다르며 Compass.app는 $ 10, Fire.app, $ 14, Codekit은 $ 25입니다..
코드 하이라이트
Sass는 주로 CSS 확장이지만 현재 편집기는 구문을 올바르게 강조 표시하지 않을 수 있습니다. 다행히도 이미 거의 모든 코드 편집기를 사용할 수있는 패키지가 있습니다. .축축한 또는 .scss 코드 강조 표시.
내가하는 것처럼 Sublime Text 2로 작업한다면이 패키지를 사용할 수 있습니다. Sublime Text HAML & Sass 및 Sublime Text 2 Sass Package를 사용하면 쉽게 패키지 제어를 통해 이러한 패키지 중 하나를 설치할 수 있습니다..
다른 코드 편집기의 경우 아래를 참조하거나 Google 검색을 시도하십시오..
- 이것은 Dreamweaver로 Sass를 작업하는 방법에 대한 훌륭한 스크린 캐스트 자습서입니다.
- Coda의 Sass 모드. 그러나이 모드는 버전 2의 Coda와 통합되었습니다.
- TextMate 공식 SCSS 번들
- 에스프레소 설탕 for Sass
- 유형 번들
Sass 언어
Sass와 LESS는 실제로 몇 가지 공통 언어를 공유합니다. 그 중 일부는 다음과 같습니다..
변수
$ color-base : # 000; $ width : 100px;
LESS 변수와 유일한 차이점은 Sass의 변수가 a로 정의된다는 것입니다. $ 기호.
중첩 규칙
헤더 (너비 : 980px; 높이 : 80px; nav ul list-style : none; 패딩 : 없음; 여백 : 없음; li display : 인라인; a 텍스트 장식 : 없음;
믹스 인 및 기능
@mixin border-radius ($ radius) -moz-border-radius : $ radius; -webkit-border-radius : $ radius; -ms-border-radius : $ radius; border-radius : $ radius;
운영
li width : $ width / 5 - 10px;
조건문
@if lightness ($ color-base)> = 51 % background-color : # 333333; @else background-color : #ffffff;
less에서는 Guard 표현식을 통해 유사한 작업을 수행 할 수 있습니다.이 튜토리얼에서는이 튜토리얼에서 다루었습니다..
최종 생각
그리고 그게 다야. 다음 글에서는 Sass 언어와 그 컴패니언 인 Compass를 살펴 보겠습니다. 계속 지켜봐주십시오..
