SASS 기본

sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

중첩

HTML 을 작성할 때 분명히 중첩되고 시각적인 계층 구조가 있음을 알게 될 것입니다. 반면에 CSS 는 그렇지 않습니다.

Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기 를 중첩시킬 수 있습니다 . 지나치게 중첩 된 규칙은 유지하기 어려울 수 있고 일반적으로 나쁜 관행으로 간주 될 수있는 CSS 를 초과하게됩니다 .

이를 염두에두고 다음은 사이트 탐색을위한 일반적인 스타일의 예입니다.

SCSS 구문

nav { 
  ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
  } 
  li { 
  	display: inline-block; 
  } 
  a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
  } 
}

CSS 출력

nav ul { margin: 0; padding: 0; list-style: none; } 
nav li { display: inline-block; } 
nav a { display: block; padding: 6px 12px; text-decoration: none; }

당신은 것을 알 수 있습니다 ul, li및 a선택기는 내부에 중첩 된 nav선택. 이것은 CSS 를 구성하고 더 읽기 쉽게 만드는 좋은 방법 입니다.

---

 

변수

스타일 시트 전체에서 재사용하려는 정보를 저장하는 방법으로 변수를 생각하십시오. 색상, 글꼴 스택 또는 재사용하려는 CSS 값을 저장할 수 있습니다 . Sass는 $ 기호를 사용하여 변수를 만듭니다. 예를 들면 다음과 같습니다.

SCSS 구문

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

body { font: 100% $font-stack; color: $primary-color; }

CSS 출력

body { font: 100% Helvetica, sans-serif; color: #333; }

사스가 처리 될 때, 우리는에 대해 정의하는 변수를 얻어 $font-stack와 $primary-color정상 출력 CSS 배치 우리 변수 값 CSS한다. 브랜드 색상으로 작업하고 사이트 전체에서 일관성을 유지할 때 매우 강력 할 수 있습니다.

---

 

부분

 다른 Sass 파일에 포함 할 수 있는 CSS의 스 니펫이 거의 포함 된 부분 Sass 파일을 작성할 수 있습니다 . 이는 CSS 를 모듈화 하고보다 쉽게 ​​유지 관리 할 수 있는 좋은 방법 입니다. 부분은 밑줄이 붙은 Sass 파일입니다. 

파일 이름을 다음과 같이 지정하면 _partial.scss. 밑줄은 파일이 부분 파일 일 뿐이며 CSS 파일 로 생성되어서는 안된다는 것을 Sass에 알려줍니다 . Sass 부분은 @use 규칙 과 함께 사용됩니다 .

 

불러오기

다른 css 파일과 scss 파일을 불러올 수 있습니다.

scss파일을 불러올 때는 파일 이름만 적어도 됩니다.

@import url('./reset.css');
@import url('./main.css');
@import url('./contents.css');
@import 'variables';
@import 'mixin';

---

 

모듈

모든 Sass를 하나의 파일로 작성할 필요는 없습니다. @use규칙을 사용하여 원하는대로 분할 할 수 있습니다 . 이 규칙은 다른 Sass 파일을 모듈 로로드합니다. 즉, 파일 이름을 기반으로하는 네임 스페이스를 사용하여 Sass 파일에서 변수, mixin 및 함수 를 참조 할 수 있습니다 . 파일을 사용하면 컴파일 된 출력에 생성 된 CSS 도 포함됩니다 !

SCSS  구문

/* _base.scss */

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

/* styles.scss */

@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

CSS  출력

body { font: 100% Helvetica, sans-serif; color: #333; } 
.inverse { background-color: #333; color: white; }

 

우리는 파일 @use 'base';에서 사용 하고 styles.scss있습니다. 파일을 사용할 때는 파일 확장자를 포함시킬 필요가 없습니다. Sass는 똑똑하고 당신을 위해 그것을 알아낼 것입니다.

 

---

 

믹스 인

CSS의 일부 내용은 특히 지루 한데 , 특히 CSS3  와 존재하는 많은 공급 업체 접두사를 사용하십시오. 믹스 인을 사용하면 사이트 전체에서 재사용 할 CSS 선언 그룹을 만들  수 있습니다. 믹스 인을보다 유연하게 만들기 위해 값을 전달할 수도 있습니다. 믹스 인을 잘 사용하려면 공급 업체 접두사를 사용하십시오. 의 예는 다음과 같습니다  transform.

SCSS  구문

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

CSS  출력

.box { -webkit-transform: rotate(30deg); 
-ms-transform: rotate(30deg); transform: rotate(30deg); }

믹스 인을 만들려면 @mixin지시문 을 사용하고 이름을 지정하십시오. 우리는 mixin이라고 명명했습니다 transform. 또한 $property괄호 안에 변수를 사용하여  원하는 변환을 전달할 수 있습니다. 믹스 인을 만든 후에 는 믹스 인 이름으로  시작 하는 CSS 선언 으로 사용할 수 있습니다 @include.

---

 

확장 / 상속

이것은 Sass의 가장 유용한 기능 중 하나입니다. 를 사용 @extend하면 한 선택기에서 다른 선택기로 CSS 속성 세트를 공유 할 수 있습니다 . Sass를 매우 건조 하게 유지하는 데 도움이됩니다 . 이 예에서는 확장 자리 표시 자 클래스와 함께 사용되는 다른 기능을 사용하여 오류, 경고 및 성공에 대한 간단한 일련의 메시징을 작성합니다. 자리 표시 자 클래스는 확장시에만 인쇄되는 특수한 유형의 클래스이며 컴파일 된 CSS를 깔끔하고 깔끔하게 유지하는 데 도움이 됩니다.

SCSS  구문

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

 

CSS 출력

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

 

말해 무엇 위의 코드가하는 것입니다 .message, .success, .error, 및 .warning처럼 행동합니다 %message-shared. 것을 의미 어디 그 %message-shared쇼까지, .message, .success, .error, 및이 .warning 너무 것이다. 마술은 생성 된 CSS 에서 발생하며, 이 클래스들 각각 은와 동일한 CSS 속성을 갖습니다 %message-shared. 이렇게하면 HTML  요소 에 여러 클래스 이름을 쓰지 않아도됩니다 .

Sass의 자리 표시 자 클래스 외에도 대부분의 간단한 CSS 선택기를 확장 할 수 있지만 자리 표시자를 사용하는 것이 스타일의 다른 곳에 중첩 된 클래스를 확장하지 않도록하는 가장 쉬운 방법 입니다. 따라서 CSS 에서 의도하지 않은 선택기가 발생할 수 있습니다  .

합니다 CSS 에가 %equal-heights있기 때문에, 발생하지 않는 %equal-heights확장되지 않습니다.

---

 

연산자

CSS 에서 수학을하는 것은 매우 도움이됩니다. 말대꾸 같은 표준 수학 연산자의 소수가 +, -, *, /,와 %. 이 예에서는 aside &의  너비를 계산하는 간단한 수학을 수행 article합니다.

SCSS  구문

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

CSS  출력

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

우리는 960px를 기반으로 매우 간단한 유동 격자를 만들었습니다. Sass에서의 작업을 통해 픽셀 값을 가져와 번거 로움없이 백분율로 변환 할 수 있습니다.