sass 튜토리얼
새시 시작하기

비고

버전

설정

SASS 사용과 관련하여 작업 공간을 설정하는 방법에는 여러 가지가 있습니다. 어떤 사람들은 명령 행 도구 (아마도 리눅스 사용자)를 선호하고 다른 사람들은 GUI 응용 프로그램을 선호합니다. 나는 둘 다 다룰 것이다.

명령 행 도구

sass-lang.com 의 'SASS 설치'페이지에서 sass-lang.com 설명합니다. Ruby와 함께 SASS를 사용할 수 있습니다 (Linux 패키지 관리자 에서 설치 하거나 Windows 에서 설치 프로그램 을 다운로드 할 수 있음). macOS는 Ruby가 미리 설치되어 있습니다.

Ruby를 설치했으면 SASS를 설치해야합니다 (경우에 따라 sudo 가 필요하지 않을 수도 있음).

sudo gem install sass

마지막으로 sass -v 하여 SASS를 설치했는지 확인할 수 있습니다.

GUI 응용 프로그램

사용할 수있는 많은 GUI 응용 프로그램이 있지만, 나는 Scout-App을 권장합니다. 그것은 자동 빌드 및 파일 저장에 대한 귀하의 CSS 파일을 압축하고 MacOS, Windows 및 Linux를 지원합니다.

변수

자주 사용하는 값이 있으면 변수에 저장할 수 있습니다. 예를 들어 이것을 사용하여 색 구성표를 정의 할 수 있습니다. 스킴을 한 번 정의한 다음 스타일 시트 전체에서 사용할 수 있습니다.

변수를 정의하려면 이름 앞에 $ 기호를 붙여야합니다. (PHP에서와 마찬가지입니다.)

유효한 CSS 속성 값을 변수 안에 저장할 수 있습니다. 색상, 글꼴 또는 URL 등.

예 # 1 :

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

가져 오는 중

다음 시나리오를 가정 해 봅시다 : _variables.scss 와 layout.scss 두 가지 스타일 시트가 있습니다. 논리적으로, 모든 변수를 변수 스타일 시트에 유지하면서 레이아웃 스타일 시트에서 변수에 액세스하려고합니다.

참고 : 이름 앞에 변수 스타일 시트에 밑줄 ( '_')이 있음을 알 수 있습니다. 이것은 부분적인 것입니다. 즉 수입 될 것이라는 의미입니다.

sass-lang.com 은 부분적인 부분 에 대해 다음과 같이 말합니다 . 다른 Sass 파일에 포함시킬 수있는 CSS 스 니펫을 포함하는 부분적인 Sass 파일을 만들 수 있습니다. 이는 CSS를 모듈화하고 유지 관리를 쉽게하는 데 도움이됩니다. [...] 밑줄을 쓰면 Sass는 파일이 부분 파일 일 뿐이며 CSS 파일로 생성해서는 안된다는 것을 알게됩니다. Sass 부분은 @import 지시문과 함께 사용됩니다.

이 시나리오에서는 SCSS 변수가 유용합니다. _variables.scss 다음과 _variables.scss 가정 해 보겠습니다.

$primary-color: #333;

@import import로 가져온 다음 스타일 시트의 이름을 따옴표로 가져올 수 있습니다. 레이아웃 스타일 시트가 다음과 같이 보일 수 있습니다 (가져 오기에서 밑줄이나 파일 확장명이없는 것을 메모하십시오).

@import 'variables';
body {
  color: $primary-color;
}

그러면 다음과 같은 내용이 출력됩니다.

body {
  color: #333;
}

중첩

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

산출

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

코멘트

SASS는 두 가지 유형의 주석을 지원합니다.

• 인라인 주석 -이 변수는 한 행에 걸쳐 있으며 대개 변수 또는 블록을 설명하는 데 사용됩니다. 구문은 다음과 같습니다. // Your comment here (이중 슬래시 ( // )를 붙이고 나머지 줄은 파서에서 무시됩니다).

• 여러 줄 주석 - 여러 줄에 걸쳐 있으며 일반적으로 문서 맨 위에 저작권이나 라이센스를 표시하는 데 사용됩니다. /* 하여 여러 줄 주석 블록을 열 수 있으며 */ 하여 여러 줄 주석 블록을 닫을 수 있습니다. 다음은 그 예입니다.

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/