리액트 육성 노트, 창업 초기의 훅

이미 알고 있는 줄 알았는데 예전 sass에 회사에서 프로젝트를 작성할 때 기본적으로 쓰는 스타일이 굉장히 부드러웠어요. 그동안 Element Plus레퍼런스를 가지고 나만의 컴포넌트 라이브러리의 엔지니어링 구조를 설계 하려고 했는데, Element Plus그 고상한 sass사용법을 보니 제 천박함과 무지함이 부끄러워지기 시작했습니다. 이렇게 체계적으로 공부를 시작하게 되었고 sass그동안 여러번 배움과 나눔을 글로 쓰고 싶었지만 여러가지로 모두 문제없이 잘 마무리 되었습니다. 오늘 드디어 바쁜 일정에서 조금이나마 슬그머니 시간을 내어 여러분과 격려를 나누게 되었습니다.

1. 소개

매우 성숙한 css전처리기 로서 sass더 우아하고 간결한 스타일 코드를 작성하는 데 도움이 되는 많은 특수 기능이 있습니다. 앞서 스타일 변수 를 css도입했으며, 중첩, 기능, 믹싱, 명령 제어 등의 기능도 지원해 스타일 게임 플레이를 크게 확장한다.

sass두 가지 구문 형식이 있습니다: SCSS및 Sass.

그 중 SCSS현재 널리 사용되고 있는 형식으로 의 CSS3문법적 기반 Sass에서만 확장된다 .CSS hacksvendor-specific syntax.scss

Sass중괄호 대신 들여쓰기를 사용하고 세미콜론 대신 줄 바꿈을 사용하는 최초의 문법 형식 입니다 이 형식도 모든 기능을 지원 하지만 Sass일부 위치에서 SCSS다른 표현을 사용하며 파일 확장자는 .sass.

어느 형식 이든 사용할 다른 형식의 파일로 가져오기(@import)할 수 있으며 sass-convert명령줄 도구를 통해 다른 형식으로 변환할 수도 있습니다.

# Sass转为SCSS
sass-convert style.sass style.scss
​
# SCSS转为Sass
sass-convert style.scss style.sass 

여기 에서는 Sass설치 및 사용 방법을 소개하지 않겠습니다.결국 대부분의 프로젝트는 이제 다른 구성 도구를 통해 패키지 및 빌드 되고 컴파일을 지원 webpack하는 해당 도구 및 기타 도구로 보완됩니다 . 스타일 파일을 컴파일하기 위해 명령줄에서 명령 loader을 사용해야 하는 프로젝트는 거의 없습니다 .sass

그러나 인코딩 형식 은 언급할 가치가 있습니다. 와 마찬가지로 를 사용하여 특정 인코딩 형식을 선언 CSS할 수 있습니다 @hcarset. 스타일 파일의 시작 부분(첫 번째 문자)에 삽입 @charset "encoding-name"하면 Sass지정된 인코딩 형식에 따라 파일이 컴파일됩니다. 물론 사용된 인코딩 형식은 Unicode문자 집합으로 변환할 수 있어야 합니다. Sass파일 을 UTF-8인코딩 으로 출력 CSS하고, 컴파일된 파일에 비문자가 나타나면 출력 파일 에 선언 을 ASCII추가 합니다.@charset

2. 기본 기능 확장

1. 중첩 규칙Nested Rules

SassCSS한 스타일 세트를 다른 스타일 세트에 포함 하는 것을 지원 CSS하며 내부 스타일은 외부 선택기를 상위 선택기로 사용합니다.

#main p {
  color: #00ff00;
  width: 97%;
​
  .redbox {
    background-color: #ff0000;
    color: #000000;}
} 

이는 Sass다음과 같이 컴파일됩니다 CSS.

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
} 

중첩 기능은 코드의 양을 크게 줄여주고 더 이상 번거로운 부모 선택자를 반복적으로 작성할 필요가 없으며 관리하기 쉽습니다.

2. 상위 선택자 &( Referencing Parent Selectors: &)

중첩에서 요소에 대한 :hover스타일을 설정하거나 body요소가 특정 값 classname을 가질 때와 같이 상위 선택자를 참조해야 하는 경우 상위 선택자, 즉 외부 선택자를 참조하는 &데 사용할 .

a {
  font-weight: bold;
  text-decoration: none;
  // & 引用父元素&:hover { text-decoration: underline; }
  // body.firefox 可以直接引用
  body.firefox & { font-weight: normal; }
} 

Sass다음과 같이 컴파일 됩니다 CSS.

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
} 

&선택자의 첫 번째 문자여야 하지만 복합 선택자를 생성하기 위해 뒤에 접미사가 올 수 있습니다 .

#main {
  color: black;
  // #main-sidebar 字符串拼接，这就有点好玩了&-sidebar { border: 1px solid; }
} 

이것은 다음과 같이 컴파일됩니다.

#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
} 

3. 속성 중첩Nested Properties

일부 CSS는 동일한 네임스페이스( namespace)를 따릅니다. 예를 들어 font-family, font-size, font-weight둘 다 font속성으로 네임스페이스를 가집니다. 이 때 작성의 단순성과 편리한 관리를 위해 다음과 Sass같이 네임스페이스에 특성을 중첩할 수 있습니다.

.funky {
  // 注意命名空间这里要加冒号
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;}
} 

다음과 같이 컴파일됩니다 CSS.

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
} 

그 중에서 네임스페이스는 자체 속성 값을 포함할 수도 있습니다.

.funky {
  // font-size/line-height
  font: 20px/24px {
    family: fantasy;
    weight: bold;}
} 

컴파일:

.funky {
  /* font-size/line-height */
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
} 

4. 자리 표시자 선택기 %foo( Placeholder Selectors: %foo)

자리 표시자 선택자는 기호가 이고 명령어를 통해 호출해야 한다는 점을 제외하면 id선택자 및 선택자와 비슷합니다 . 그렇지 않으면 컴파일에 참여하지 않습니다.class%@extendSass

5. 참고 사항Comments

Sass한 줄 주석 //과 여러 줄 주석이 모두 지원됩니다 /* */. 여러 줄 주석은 컴파일된 CSS파일 에 완전히 출력됩니다 . !여러 줄 주석 의 첫 글자는 이 주석 을 압축 출력 모드 로 유지하고 파일로 출력한다는 의미이며, 일반적으로 저작권 정보를 추가하는 데 사용됩니다. 보간문( ) 은 여러 줄 주석으로 변수 값을 출력할 수 있습니다. ( 보간에 사용합니다.)CSSinterpolation#{$val}

// Sass
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
​
// 编译为CSS：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */ 

3. 고급 기능 확장

1.SassScript

Sass모든 속성에 적용할 수 있는 이라는 강력한 함수 를 제공하여 SassScript속성이 변수 및 산술 연산과 같은 추가 기능을 사용할 수 있도록 합니다.

1.1Interactive Shell

Interactive Shell명령줄에서 테스트할 수 있는 기능 SassScript. 명령줄 sass -i에 입력한 다음 테스트할 SassScript내용을 입력하여 출력을 확인합니다.

sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white 

1.2 변수$ Variables: $

변수 사용은 매우 간단합니다.

// 声明变量
$width: 5em;
​
#main {// 使用变量
  width: $width;
} 

변수는 블록 수준 범위 를 가지며 중첩 규칙 내의 변수는 중첩 규칙 내에서만 사용할 수 있는 로컬 변수입니다. 전역 변수는 어디에서나 사용할 수 있습니다. 선언을 추가 !global하면 지역 변수가 전역 변수로 바뀝니다 .

// Sass
#main {// !global声明，转换为全局变量
  $width: 5em !global;
  width: $width;
}
​
#sidebar {
  // 使用全局变量
  width: $width;
}
​
// 编译为CSS:
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
} 

1.3 데이터 유형Data Types

SassScript7기본 데이터 유형이 지원됩니다 .

• 숫자, 단위 1, 2, 3, 6, 10px등;
• 문자열(따옴표 포함 여부 모두 지원됨), "foo", "bar", baz;
• 색상 blue, #04a3f9, rgba(255,0,0,0.5)등;
• 부울, true, false;
• NULL, null;
• 배열( list), 공백 또는 쉼표를 구분 기호로 사용, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif;
• maps, 이는 JSwhere Object, 와 동일합니다 (key1: value1, key2: value2).

또한 문자 집합이나 선언과 같은 다른 속성 값 SassScript도 지원 되지만 특별히 취급되지 않고 인용되지 않은 문자열로 취급됩니다.CSSUnicode!important

1.3.1 문자열

SassScript인용된 문자열( ) 과 인용되지 않은 문자열( ) 이 모두quoted strings 지원됩니다 . 이 두 문자열 은 한 가지 경우 를 제외하고는 컴파일 타임에 서로 변환되지 않습니다 .unquoted strings#{}interpolationmixin

// Sass
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";}
}
@include firefox-message(".header");
​
// 编译为CSS
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
} 

1.3.2 배열( lists)

배열은 일련의 값 을 공백이나 쉼표로 구분 하여 Sass처리하는 방법을 말합니다. 실제로 개별 값도 하나의 값만 포함하는 배열로 취급됩니다.CSSmargin: 10px 15px 0 0font-face: Helvetica, Arial, sans-serif

배열 자체에는 많은 기능이 없지만 Sass list functions배열에 많은 새로운 기능을 제공합니다: nth기능은 배열의 항목에 직접 액세스할 수 있습니다. 기능 join은 여러 배열을 함께 연결할 수 있습니다 append. @each배열의 각 항목을 탐색할 수 있습니다.

배열은 하위 배열을 포함할 수 있습니다. 예를 들어 1px 2px, 5px 6px는 및 의 두1px 2px 배열을 포함하는 배열입니다. 5px 6px내부 및 외부 배열이 동일한 분리 방법을 사용하는 경우 괄호를 사용하여 내부 레이어를 감싸야 합니다(예: (1px 2px) (5px 6px). 괄호는 컴파일 시 보존되지 않으므로 어떤 방식으로 작성하든 1px 2px, 5px 6px최종 (1px 2px) (5px 6px)컴파일 결과는 동일하지만 Sass파일에서 의미가 다른데, 전자는 4개의 값을 포함하는 배열을 의미하고 후자는 배열을 의미합니다. 두 개를 포함하는 괄호는 "그룹화"의 개념을 강조한다고 할 수 있습니다.

()빈 배열을 나타내는 데 사용되며 빈 을 나타낼 수도 있습니다 map. 빈 배열은 직접 컴파일되지 않으며 배열 CSS에 빈 배열이나 null 값이 있으면 컴파일 시 지워집니다. 1px 2px () 3px또는 1px 2px null 3px. 쉼표로 구분된 배열은 특히 단일 값만 포함하는 배열을 선언해야 하는 경우 배열의 구조적 관계를 강조하기 위한 후행 쉼표를 유지할 수 있습니다. 예 (1,)를 1.

1.3.3maps

map키-값 쌍의 모음 key이며 value둘 다 임의의 SassScript개체일 수 있습니다. 그것과 list둘 다 기능으로 작동합니다. 예를 들어 map-get함수를 사용하여 키-값을 조회할 수 map-merge있고 함수를 사용하여 새 키-값 쌍 @each을 추가할 수 있으며 지시문을 사용하여 각 키-값 쌍에 스타일을 추가할 수 있습니다. map사용할 수 있는 모든 곳에서 사용할 수 list있지만 그 반대는 아닙니다. 함수 에서 map사용되는 경우 형식의 배열로 list처리됩니다 .key1 value1, key2 value2

1.3.4 색상

모든 CSS색상 표현식은 SassScript색상 값을 반환합니다. 여기에는 명명된 색상이 많이 포함되어 있습니다(종종 인용되지 않은 문자열 unquoted strings과 구별할 수 없음).

1.4 작동Operations

모든 데이터 유형은 동등 연산 ==OR !=을 지원하며, 각 데이터 유형에는 자체 연산 방법도 있습니다.

1.4.1 수치 연산Number Operations

SassScript덧셈, 뺄셈, 곱셈, 나눗셈은 물론 반올림?연산( +, -, *, /, %)을 지원하여 필요에 따라 단위 간 값을 변환합니다. 관계 연산자( >, <, >=, <=)는 숫자 연산에도 사용할 수 있습니다.

// Sass
p {
  width: 1in + 8pt;
}
​
// 编译为：
p {
  width: 1.111in; 
} 

• 분할 작업/

분단 작전은 따로 언급할 만하다. /기호 CSS는 일반적으로 에서 숫자를 구분하는 역할을 하기 때문입니다 . 에서는 숫자 분리 SassScript뿐만 /아니라 나눗셈 연산에도 사용됩니다. 다음 세 가지 경우에는 /분할 작업으로 간주됩니다.

• 값 또는 값의 일부가 변수이거나 함수의 반환 값일 때;
• 값이 괄호로 묶인 경우;
• 값이 산술 표현식의 일부인 경우.

// Sass
p {
  font: 10px/8px;             // 普通的CSS
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 函数返回值，是除法运算
  height: (500px/2);          // 使用圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 算数运算表达式的一部分，是除法运算
}
​
// 编译为CSS
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
} 

변수를 사용해야 /하는데 나눗셈 연산자로 사용 하지 않으려면 다음 #{}과 같이 변수를 래핑할 수 있습니다.

// Sass
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}

// 编译为CSS
p {font: 12px/30px; 
} 

1.4.2 색상값 연산Color Operations

색상 값의 작업은 섹션에서 계산됩니다. 즉 R, G, B, 값이 별도로 계산됩니다.

p {
  color: #010203 + #040506;
} 

조각으로 계산 된 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09후 다음과 같이 컴파일됩니다.

p {
  color: #050709; 
} 

사용할 수 있으며 color functions색상 계산보다 조금 더 편리합니다.

색상 값은 수치 연산과 결합할 수도 있습니다.

p {
  color: #010203 * 2;
}
​
// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为:
p {
  color: #020406; 
} 

색상 값에 가 포함된 경우 산술 연산이 해당 값에 작용하지 않기 때문에 alpha channel계산에 포함된 색상 값이 동일한 값을 가져야 연산 을 수행 할 수 있다는 점에 유의 해야 합니다.alphaalpha

p {
	// 需要保证有相同的alpha值color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
} 

색상 값의 값 은 또는 alpha를 통해 조정할 수 있습니다 .opacitytransparentize

// Sass
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
​
// 被编译为：
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
} 

1.4.3 문자열 연산String Operations

+연결 문자열 을 사용하십시오 . +왼쪽의 값이 최종 컴파일 결과를 인용할지 여부를 결정합니다.

연산식이 다른 값과 함께 사용되는 경우 공백을 커넥터로 사용합니다.

p {
  margin: 3px + 4px auto;
}
// 编译为：
p {
  margin: 7px auto; 
} 

#{}다음을 사용하여 동적 값을 삽입 할 수 있습니다 .

$value: null;
p:before {content: "I ate #{$value} pies!";
}

// 编译为CSS:
p:before {content: "I ate pies!"; 
} 

1.4.4 부울 연산Boolean Operations

부울 연산은 and, or, 를 지원 not합니다.

1.4.5 어레이 동작

배열은 직접 작업을 지원하지 않으며 다음을 통해서만 list functions조작할 수 있습니다.

1.5 괄호(Parentheses)

괄호가 먼저 계산됩니다.

1.6 기능Functions

SassScript내장된 많은 함수가 있으며 일부는 CSS일반 명령문을 사용하여 호출할 수도 있습니다.

p {
  color: hsl(0, 100%, 50%);
}
// 编译为：
p {
  color: #ff0000; 
} 

• 키워드 인수Keyword Arguments

Sass함수는 키워드 인수를 허용하며 위의 예는 다음과 같이 작성할 수 있습니다.

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
} 

Sass내장 함수가 많으므로 여기서는 확장하지 않겠습니다.

1.7 보간문Interpolation #{}

#{}변수는 다음을 통해 선택기 또는 속성 이름에서 사용할 수 있습니다.

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

// 编译为：
p.foo {border-color: blue; 
} 

1.8 SassScript에서&

&상위 선택자를 나타냅니다. 다음과 &같이 ((".foo.bar" ".baz.bang"), ".bip.qux").

.foo.bar .baz.bang, .bip.qux {$selector: &;
} 

상위 선택자가 없으면 &값은 null입니다. mixin상위 선택자가 있는지 감지하기 위해 적용할 수 있습니다 .

@mixin does-parent-exist {
  @if & {
    // 有父选择器
  &:hover {
      color: red;
  }} @else {
    // 没有父选择器
    a {
      color: red;
  }}
} 

1.9 변수 기본값( Variable Defaults):!default

변수 끝에 추가하면 선언이 할당되지 않은 변수에 값을 할당하는 !default데 사용할 수 있습니다 . !default할당은 변수에 값이 할당되지 않았거나 null 값이 할당된 null경우 에만 작동합니다 !default.

$content: "First content";
// 变量已被赋值，无效
$content: "Second content?" !default;
$new_content: "First time reference" !default;
​
#main {
  content: $content;
  new-content: $new_content;
}
​
// 编译为：
#main {
  content: "First content";
  new-content: "First time reference"; 
} 

2. @-Rules( Directives) 명령으로

Sass모두 CSS3 @-Rules및 Sass특정 지시문( directives)이 지원됩니다.

2.1@import

Sass가져오기 및 @import파일링을 가능하게 하는 확장된 기능 . 가져온 파일은 병합되어 동일한 파일로 컴파일됩니다. 또한 가져온 파일에 포함된 변수를 가져온 파일 에서 사용할 수도 있고 사용하지 못할 수도 있습니다..scss.sassCSSmixin

일반적으로 파일 @import을 찾아 가져오지만 일반 구문 Sass으로 처리되는 다음 예외가 있습니다.CSS

• 파일 확장자는 .css;
• 파일 이름 http://은 다음으로 시작합니다.
• 파일명은 url();
• @import을 포함합니다 media queries.

한 번에 여러 파일을 가져올 수 있으며 확장자가 없으면 같은 이름의 파일 을 찾 .scss거나 찾습니다..sass

@import "rounded-corners", "text-shadow"; 

가져오기 파일도 보간문을 사용할 수 있지만 가져오기 방법 #{}에만 해당됩니다 CSS.url()

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
​
// 编译为：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans"); 

@imports두 가지 특수 용도도 있습니다: partials 및 nesting .

• 분음 ( Partials)

때로는 Sass파일을 가져오고 싶지만 로 컴파일하고 싶지 않은 CSS경우 파일 이름 앞에 밑줄을 추가하여 Sass컴파일하지 말라고 지시할 수 있습니다. import 문에는 밑줄이 필요하지 않습니다. 예를 들어 파일 이름 _colors.scss이 이면 다음 코드는 _colors.scss파일을 가져오고 CSS.

@import "colors"; 

선행 밑줄을 포함하는 동일한 이름의 파일과 선행 밑줄을 포함하지 않는 파일이 있는 경우 밑줄을 추가하는 파일은 무시됩니다.

• 중첩@import

대부분의 시나리오에서 파일의 최상위 수준에서 사용합니다 @imports. 실제로 중첩은 @imports스타일 CSS또는 @media. 최상위 레이어에서 사용하는 것과의 차이점은 이렇게 가져온 스타일은 "로컬 범위"로 이해할 수 있는 중첩 레이어에만 나타날 수 있다는 것입니다.

// example.scss
.example {
  color: red;
} 

// main.scss
#main {
  @import "example";
} 

결국 다음과 같이 컴파일됩니다.

#main .example {
  color: red;
} 

그러나 이 중첩된 형식으로 @import가져온 파일에는 @mixin와 @charset같은 최상위 지침 이 없어야 한다는 점에 유의해야 합니다.

2.2@media

Sass는 에서 @media와 동일 하지만 다음과 같은 CSS새로운 기능이 추가되었습니다.

• CSS규칙 내에 중첩 될 수 있습니다 . @media규칙 에 중첩 되면 CSS컴파일될 때 파일의 가장 바깥쪽 레이어로 컴파일되고 이전에 중첩되었을 때 부모 선택자를 포함하므로 매우 편리합니다.

// Sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;}
}
​
// 编译为
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
} 

• @mediaqueries컴파일 시간에 자동으로 추가되는 중첩이 허용 됩니다 and.

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
  }}
}
​
// 编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
} 

• SassScript조건의 이름이나 값 대신 (변수, 함수 등)을 사용할 수 있습니다 .

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
​
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;}
}
​
// 编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } 
} 

2.3@extend

• 를 통해 다른 선택기의 스타일 을 상속@extend 하도록 선택기를 만들 수 있습니다 .

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  // 继承，此时所有使用到 .error 的样式都会被继承过来
  @extend .error;
  border-width: 3px;
}
​
// 编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
​
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}
​
.seriousError {
  border-width: 3px; 
} 

• Placeholder Selectors자리표시자 선택기

Sass때로는 특정 요소가 아닌 상속을 위해 스타일 집합을 정의해야 하는 경우가 있으며 별도로 컴파일되어 출력 되지 않기를 바랍니다 . Sass이러한 장면은 스타일 라이브러리 를 만들 때 더 자주 발생합니다 . 따라서 자리 표시자 선택자가 탄생했습니다. 사용법 은 id선택자 또는 class선택자와 거의 동일하며 선택자 표기법은 %입니다. 단독으로 사용하면 자리 표시자 선택기가 Sass무시되고 출력 파일로 컴파일되지 않습니다.

// 不会被编译到输出文件中
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
} 

다음 에서 사용해야 @extend합니다.

.notice {
  @extend %extreme;
}
​
// 被编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
} 

• !optional성명

!optional선언을 사용하면 @extend새 선택자를 생성하지 않을 수 있습니다.

// 不可以，因为没有 .notice
a.important {
  @extend .notice
}
​
// 可以
a.important {
  @extend .notice !optional;
} 

• 명령에 사용@extend

쓸데없는 코드가 많이 생성되는 것을 방지하기 위해 @extend명령에서 확장( )하고 확장을 동일한 명령 수준의 선택기로 제한합니다.

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;}
  .seriousError {
    // 可以
    // .error 同在一个 @meida层级中
    @extend .error;
    border-width: 3px;}
}
​
// 以下为反面栗子
.error {
  border: 1px #f00;
  background-color: #fdd;
}
​
@media print {
  .seriousError {
    // 不可以, .error 不在当前的@meida指令层级中
    @extend .error;
    border-width: 3px;}
} 

2.4@at-root

지시문을 사용 @at-root하여 선택한 선택자를 가장 바깥쪽 수준으로 끌어올립니다.

.parent {...
  @at-root .child { ... }
}
​
// 编译为
.parent { ... }
.child { ... } 

• 여러 선택자를 포함하는 블록 수준 구조일 수 있습니다.

.parent {...
  @at-root {
    .child1 { ... }
    .child2 { ... }}
  .step-child { ... }
}
​
// 编译为
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... } 

• with:xxx yyy ...또는 를 사용 without:xxx yyy ...하여 가장 바깥쪽 레이어로 승격된 선택기에 대해 외부 지시문이 유효한지 확인합니다.

// without:
@media print {
  .page {
    width: 8in;
    // without: media 让选择器不受外层的@media影响
    @at-root (without: media) {
      color: red;
  }}
}
​
// 编译为
@media print {
  .page {
    width: 8in;}
}
.page {
  color: red;
} 

3. 제어 명령Control Derectives

제어 지시문은 특정 조건에서 스타일을 참조하는 데 사용됩니다.

3.1if()

내장 if함수 는 모든 SassScript스크립팅 컨텍스트에서 사용할 수 있습니다.

3.2@if

@if명령어 식의 반환 값이 falseor 가 아닐 때 조건이 충족됩니다 null. 나중에 @else if연결할 수 있습니다 @else.

$type: monster;
p {
  @if $type == ocean {
    color: blue;} @else if $type == matador {
    color: red;} @else if $type == monster {
    color: green;} @else {
    color: black;}
}
​
// 编译为
p {
  color: green; 
} 

3.3@for

이 지시문에는 @for $var from <start> through <end>, 또는 의 두 가지 형식이 있습니다 @for $var from <start> to <end>. 둘 다 시작점 을 포함 하지만 <start>차이점은 to포함하지 않고 포함한다는 것 입니다 . 또한 모든 변수가 될 수 있지만 정수 여야 합니다.<end>through<end>$var<start><end>

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
​
// 编译为
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
} 

3.4@each

@each명령 형식:@each $var in <list>

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); } 

• 여러 변수를 동시에 적용할 수 있으므로 형식은 비슷하지만 값은 다른 스타일을 작성할 때 편리합니다.

@each $animal, $color, $cursor in (puma, black, default),
                                (sea-slug, blue, pointer),
                                (egret, white, move) {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;}
}
​
// 编译为
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; } 

• maps배열로 취급되므로 다음과 같이 사용할 수도lists 있습니다 .@eachmap

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {
    font-size: $size;}
}
​
// 编译为
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; } 

3.5@while

while순환, 이해합니다.

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  // 更改条件变量
  $i: $i - 2;
}
​
//编译为
.item-6 {
  width: 12em; }
​
.item-4 {
  width: 8em; }
​
.item-2 {
  width: 4em; } 

4. 혼합 명령( Mixin Directives)

mixin재사용 가능한 스타일을 정의하는 데 사용됩니다.

4.1 혼합 명령어 정의 @minin( Defining a Mixin: @mixin)

이름과 스타일을 추가 한 후 @mixin혼합 명령어를 정의할 수 있습니다.선택자와 속성을 포함해야 &하며 상위 선택자를 참조하는 데 사용할 수도 있습니다.

// 定义名为 clearfix 的混合指令
@mixin clearfix {
  display: inline-block;
  // & 指代父选择器。注意，这个混合指令里虽然它没有父选择器，
  // 但是混合指令使用的地方，可以产生父选择器&:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
  // 这里的 & 同理* html & { height: 1px }
} 

4.2 참조 혼합 명령어 @include( Including a Mixin: @include)

• @include MixinNamemixin 지시문을 인용하는 데 사용 합니다.

.page-title {
  // 引用混合指令，将 clearfix 中的规则混入到 .page-title 中
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
} 

• 또한 속성을 정의하지 않고 참조할 상위 선택자가 없는 상태에서 가장 바깥쪽 수준에서 직접 참조 및 혼합될 수 있습니다.

@mixin silly-links {
  a {
    color: blue;
    background-color: red;}
}
@include silly-links;
​
//编译为
a {
  color: blue;
  background-color: red; } 

우리가 작성하는 mixin 지시문에서 하위 선택자만 정의하는 것이 가장 좋습니다. 그래야 파일의 어느 곳에서나 안전하게 가져올 수 있습니다.

• 복합 지시문은 다른 복합 지시문을 참조할 수 있습니다.

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; } 

4.3 매개변수( Arguments)

매개변수를 사용하여 혼합 명령 스타일에 대한 변수를 설정하고 값을 할당할 수 있습니다. 혼합 명령어를 참조하고 정의할 때 매개변수의 순서는 일대일 대응이어야 하며 매개변수에 기본값을 할당할 수 있습니다.

// $width有默认值
@mixin sexy-border($color, $width: 1in) {
  // 注意这里得 border，是CSS命名空间
  border: {
    color: $color;
    width: $width;
    style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
​
// 编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
​
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; } 

또한 매개변수에 대한 두 가지 더 중요한 사항이 있습니다.

• 키워드 매개변수 ( Keyword Arguments): Mixin매개변수를 참조로 전달할 때 매개변수 키워드(매개변수 이름)를 지정하여 정확하게 값을 전달합니다.

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); } 

쓰기가 다소 번거롭기는 하지만 읽기 쉽고 정확하게 할당할 수 있습니다.

• 매개 변수 변수 ( Variable Arguments): 혼합 명령에 필요한 매개 변수의 수를 확신할 수 없는 경우 매개 변수 끝에 매개 변수 변수를 사용 ...하여 선언할 수 있으며 Sass이러한 매개 변수는 값 목록으로 처리됩니다.

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
​
// 编译为
.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
} 

인용할 때 매개변수 변수를 사용할 수도 있습니다.

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
​
// 编译为
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
} 

4.4 혼합 명령으로 콘텐츠 가져오기 @content( Passing Content Blocks to a Mixin)

를 인용 할 때 Mixin, 특히 파일의 가장 바깥쪽 레이어에서 인용할 때 @content자리 표시자를 사용한 후 템플릿, 슬롯 등과 유사하게 @include다음 내용을 해당 위치로 가져올 수 있습니다.@content

@mixin apply-to-ie6-only {* html {
    @content;}
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);}
}
​
// 编译为
* html #logo {
  background-image: url(/logo.gif);
} 

스타일 라이브러리 에서 자주 사용 Mixin되기 때문입니다. Sass사용을 단순화하기 위해 로 =표현할 수 있고 @mixin, 로 +표현할 수 있습니다 @include.

// Sass (这里就是Sass格式的语法了，而非SCSS格式)
=apply-to-ie6-only* html
    @content
​
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif) 

• 블록 수준 콘텐츠 및 변수 범위 : @content블록 수준 콘텐츠를 가져오면 해당 범위는 정의된 컨텍스트와 연결되며 혼합 명령어 내부의 범위와 관련이 없습니다.

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  // @content 的内容的作用域在定义它的地方
  @content;
  border-color: $color;
}
.colors {
  @include colors { // 这里的color，虽然会被插入到@content的位置// 但是它的作用域是在定义它的地方，
    // 而定义它的地方，$color是全局变量，值为whitecolor: $color; }
}
​
// 编译为
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
} 

모든 정의가 전역 범위에 있는 것은 아니며 정의가 선택기에 중첩된 다음 범위가 선택기의 로컬 범위일 수도 있습니다.

5. 기능 명령어 ( Function Directives)

Sass사용자 지정 기능을 허용하며 기능은 모든 속성 값 또는 에서 사용할 수 있습니다 SassScript. 이름 충돌을 피하기 위해 사용자 지정 함수 이름에 접두사를 붙일 수 있습니다.

$grid-width: 40px;
$gutter-width: 10px;
​
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
​
#sidebar { width: grid-width(5); }
​
// 编译为
#sidebar {
  width: 240px; 
} 

6. 출력 형식

6.1:nested

Nested( :nested)는 의 기본 출력 형식으로 와 사이의 관계 sass를 명확하게 반영 합니다 . 선택자와 속성은 별도의 줄을 차지하며 들여쓰기는 중첩 수준을 반영하기 위해 들여쓰기에 의존하여 파일의 들여쓰기와 일치합니다.CSSHTMLsass

// 编译后输出的CSS文件
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; } 

6.2:expanded

확장( :expanded) 형식은 손으로 쓸 때와 동일하며 선택자는 들여쓰기가 되지 않습니다.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
} 

6.3:compact

압축 형식( Compact)은 공간을 덜 CSS차지하고 각 규칙은 한 줄만 차지하며 중첩 선택자는 빈 줄을 남기지 않고 비중첩 선택자는 규칙 사이에 빈 줄을 둡니다.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
​
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 

6.4:compressed

압축된 형식( Compressed)은 빈 줄, 공백, 주석 등을 남기지 않으며 출력 볼륨이 가장 작습니다.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline} 

마침내

HTML, CSS, JavaScript, HTTP, TCP 프로토콜, 브라우저, VUE, React, 데이터 구조 및 알고리즘, 총 201개의 인터뷰 질문을 포함하는 "프론트 엔드 제조업체 인터뷰 모음"을 구성하고 각 질문에 대한 답변 작성 질문 답변 및 분석.

도움이 필요한 친구들은 기사 끝에 있는 카드를 클릭하여 이 문서를 받고 무료로 공유할 수 있습니다.

문서의 일부는 다음을 보여줍니다.

기사의 길이가 제한되어 있으며 다음 내용은 하나씩 표시되지 않습니다.

도움이 필요한 친구는 아래 카드를 클릭하여 무료로 얻을 수 있습니다.