아름다운 Sass를 쓰는 방법

깨끗하고 아름다운 코드는 모든 프로젝트에서 목표가되어야합니다. 다른 개발자가 변경해야한다면, 거기에있는 것을 읽고 이해할 수 있어야합니다. 읽을 수있는 코드는 유지 관리 가능성의 핵심이며 읽을 수있는 코드의 첫 번째 단계는 좋은 린터입니다. 좋은 맞춤법 체커와 마찬가지로 Linter는 모든 작은 오타와 서식 실수를 포착해야하므로 다른 사람들에게 그렇게하지 않아야합니다. 다른 개발자들과 좋은 코드 검토를하기 전에 첫 번째 방어선입니다.

Sass : SCSS-Lint는 Ruby Gem이며 NPM 노드의 NPM 패키지 인 최신 Sasslint 및 Stylelint가 있습니다. 둘 다 최대 중첩 레벨, 소수의 주요 0 및 블록의 속성 구성과 같은 프로젝트의 라인 규칙을 구성 할 수 있습니다. 필요에 따라 자신만의 규칙을 만들 수도 있습니다 Atoz : Sass 편지로 Sass 편지를 배우십시오

이 과정을보십시오 이 과정을보십시오 SASS 지침은 프로젝트 구성, 라이터 설정, 이름 지정 규칙 설정 등에 편리합니다. Hugo가 작성한 것은 코드에 대한 의견이 많은 스타일 가이드입니다. 모든 것이 당신을 위해 일하는 것은 아니지만 시작하기에 좋은 곳입니다.

SASS 변수, 기능 및 Mixins를 사용하는 경우 작동 방식을 문서화하는 것이 좋습니다. 툴킷 저자는 특히 중요하다는 것을 알게 될 것이지만, 프로젝트에 광범위한 툴링을 내장하는 사람은 누구나 팀을위한 문서를 고려해야합니다. Hugo의 또 다른 위대한 도구는 Sassdoc, Sass 의견을 구문 분석하고 문서로 아름다운 정적 사이트를 생성하는 NPM 패키지입니다. 다음은 Accoutrement-Colors의 Tint (..) 기능에 대한 Sassdoc 의견입니다. 일반적인 설명으로 시작한 다음 각 매개 변수와 예상 반환을 명시 적으로 문서화합니다.

기본 테마를 사용하여 (선택할 수있는 여러 가지가 있거나 직접 설계 할 수 있음) SASSDOC는 아래와 같이 정적 웹 사이트로 주석을 바꾸는 변환합니다.

기능이나 믹스 인과 복잡한 일을하는 경우 테스트가 중요합니다. 조정할 때마다 코드가 파손되지 않도록하는 좋은 방법이지만 새로운 기능을 개발하는 데 도움이 될 수 있습니다. 먼저 테스트를 작성하면 테스트가 통과 될 때 기능이 올바르게 작동하는지 정확히 알 수 있습니다! True는 Sass가 컴파일되는 곳 어디에서나 작동하도록 Pure Sass로 작성된 Truth의 단위 테스트 툴킷입니다. 핵심 테스트는 어설 션 기능에서 발생합니다 : Assert-equal (..), assert-unequal (..), Assert-true (..) 및 Assert-False (..). 이들은 테스트로 구성되며 테스트 모듈로 그룹화 할 수 있습니다. 다음은 진정한 테스트의 예입니다 색조 (..) 함수 :

컴파일되면 True는 CSS가 자세한 결과로 댓글을 출력하고 테스트가 실패하면 콘솔에서 경고합니다.

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

이 예에서 두 가지 테스트가 "CSS로 출력"이라는 것은 무엇을 의미합니까? 이러한 테스트에는 표시되지 않지만 Mixin 출력을 테스트하고 있습니다. 순수한 CSS를 사용하면 True는 기능 테스트의 결과 만 확인할 수 있으므로 Mixin 테스트는 CSS를 수동으로 (총) 또는 CSS 파서 (더 나은!)와 비교할 수있는 CSS에 출력됩니다. 그것을 쉽게 만들기 위해 True는 Mocha와 같은 JavaScript 테스트 러너와 통합되며 Scott Davis가 작성한 Ruby Command Line 인터페이스를 가지고 있습니다. 하나는 Mixins의 출력을 포함하여 CSS 출력을 완전히 구문 분석하고 기능 및 Mixin 테스트 모두에 대한 전체 결과를 제공합니다.

아름다운 Sass를 쓰는 것에 대해 자주 묻는 질문

SASS를 사용하여 중첩 규칙을 만들 수 있습니까?

<span>@include test-module('Tint [function]') {
</span>  <span>@include test('Adjusts the tint of a color') {
</span>    <span>@include assert-equal(
</span>      <span>tint('primary', 25%),
</span>      <span>mix(#fff, color('primary'), 25%),
</span>      <span>'Returns a color mixed with white at a given weight.');
</span>  <span>}
</span><span>}
</span>

SASS는 HTML의 동일한 시각적 계층을 따르는 방식으로 CSS 선택기 중첩을 제공 할 수있는 고유 한 기능을 제공합니다. 중첩 된 규칙을 만들려면 한 선택기를 다른 선택기 안에 넣습니다. 그런 다음 내부 선택기가 외부 선택기 내에 중첩되는 위치에 적용됩니다. 이를 통해 코드를 깨끗하고 이해하기 쉽게 만들 수 있습니다. 예 :

nav {

ul {

/* # Module: Tint [function] */
/* ------------------------- */
/* Test: Adjusts the tint of a color */
/*   ✔ Returns a color mixed with white at a given weight. */

/* … */

/* # SUMMARY ---------- */
/* 16 Tests: */
/*  - 14 Passed */
/*  - 0 Failed */
/*  - 2 Output to CSS */
/* -------------------- */

ul 마진 : 0;

패딩 : 0;

목록 스타일 : none;

}

li {디스플레이 : 인라인 블록; }
a {
display : 블록;
패딩 : 6px 12px;
텍스트 설명 : 없음;
}
}

SASS 변수를 사용하면 이점?
SASS 변수를 사용하면 스타일 시트 전체에서 재사용하려는 정보를 저장할 수 있습니다. 색상, 글꼴 스택 또는 재사용하고 싶다고 생각하는 CSS 값과 같은 물건을 저장할 수 있습니다. Sass는 $ 기호를 사용하여 무언가를 변수로 만듭니다. 예는 다음과 같습니다.
$ font-stack : helvetica, sans-serif;
$ 1 차 컬러 : #333;

body {
font : 100% $ font- 스택;
색상 : $ 1 차 컬러;
}

더 나은 코드 조직을 위해 SASS를 어떻게 사용할 수 있습니까? Sass는 스타일을 별도의 파일로 분할 할 수 있습니다. 코드 조직에 매우 유용 할 수 있습니다. CSS 코드의 세그먼트를 보유하는 부분 SASS 파일을 만들 수 있습니다. 이 파일은 밑줄로 시작하여 다른 SASS 파일로 가져올 수 있습니다. 이를 통해 CSS를 모듈화하고 유지하기 쉽게 유지할 수 있습니다.

SASS를 사용하여 복잡한 함수를 만들 수 있습니까?

SASS는 색상 조정 또는 복잡한 수학적 작업 수행과 같은 내장 기능 세트를 제공하여 기능 사용을 지원합니다. @Function Directive를 사용하여 자신의 기능을 정의 할 수도 있습니다. 간단한 기능의 예는 다음과 같습니다.

@function double ($ number) {}

.box {width : double (5px ); }
Sass를 사용하여 Mixins를 생성하는 방법은 무엇입니까?

Sass의 Mixins는 한 규칙 세트에서 다른 규칙 세트로 많은 속성을 포함하는 방법입니다. . @mixin 지시문을 사용하여 정의됩니다. 예는 다음과 같습니다.
@mixin transform ($ property) { -ms -transform : $ property;

transform : $ property;

}

.box {@include transform (rotate (30deg)); }
SASS를 사용하여 확장/상속을 생성 할 수 있습니까?
SASS의 @Extend 지시문을 통해 한 선택기는 다른 선택기의 스타일을 상속받을 수 있습니다. 예는 다음과 같습니다.
.message { 테두리 : 1px solid #ccc;
패딩 : 10px;
색상 : #333; .success { border-color : green;
}
Sass를 사용하여 운영자를 만들 수 있습니까?
Sass는 표준 수학 연산자와 같은 지원을 지원합니다. -, *, /, 그리고 %. 크기와 색상으로 작업 할 때 특히 유용 할 수 있습니다. 예는 다음과 같습니다.

.container {너비 : 100%; }

.Article {

float : 왼쪽;

너비 : 600px / 960px * 100%;
.aside {
float;
너비 : 300px / 960px * 100%;
}

SASS를 사용하여 제어 지시문을 생성하는 방법은 무엇입니까?

SASS는 @IF, @for를 포함한 라이브러리의 제어 지시문을 지원합니다. , @each 및 @while. 코드가 적은 복잡한 스타일을 만드는 데 사용될 수 있습니다. 예는 다음과 같습니다. } }

sass를 사용하여 주석을 만들 수 있습니까?

Sass는 두 가지 유형의 주석을 지원합니다. // 스타일 주석은 CSS 출력에 CSS 출력에 포함되지 않은 CSS 출력에 보존됩니다. 예는 다음과 같습니다.

/ *이 주석은 * 여러 줄 길이입니다.

* CSS 댓글 구문을 사용하므로
* CSS 출력에 나타납니다. */

body {색상 : 검은 색; }
//이 주석은 CSS 출력에 나타나지 않습니다. // 코드 문서에 매우 유용합니다.
SASS를 사용하여 보간을 생성하는 방법?

SASS의 보간을 통해 변수의 값을 문자열에 삽입 할 수 있습니다. #{} 구문을 사용하여 수행됩니다. 예는 다음과 같습니다.
$ 이름 : foo;
$ attr : border;
p. #{$ name} { } <.>

위 내용은 아름다운 Sass를 쓰는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!