Libsass: μœ ν˜• μ„ νƒκΈ°λŠ” 항상 μ˜μ‚¬ ν΄λž˜μŠ€λ³΄λ‹€ λ¨Όμ € μΈμ‡„ν•΄μ•Όν•©λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 06μ›” 30일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: sass/libsass

[type] μ„ νƒκΈ°μ—μ„œ 자리 ν‘œμ‹œμžλ₯Ό ν™•μž₯ ν•  λ•Œ 자리 ν‘œμ‹œμžκ°€ μ˜μ‚¬ 클래슀λ₯Ό μ‚¬μš©ν•˜λŠ” 경우 선택기가 잘λͺ»λœ μˆœμ„œλ‘œ μΈμ‡„λ©λ‹ˆλ‹€.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  <strong i="8">@extend</strong> %button-styles;
}

μ‹€μ œ κ²°κ³Ό

libsass 3.5.4

[type="button"] {
  color: red;
}

:focus[type="button"] {
  color: blue;
}

μ˜ˆμƒ κ²°κ³Ό

루비 SAS 3.5.6

[type="button"] {
  color: red;
}

[type="button"]:focus {
  color: blue;
}

버전 정보 :

$ node-sass --version
node-sass   4.9.0   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

λ˜ν•œ selector-unify 둜 λͺ‡ 개의 디버그 문을 μ‹€ν–‰ν–ˆμœΌλ©° μš”μ†Œ 선택기λ₯Ό μ‚¬μš©ν•˜λ©΄ μˆœμ„œμ— 관계없이 μ˜ˆμƒλŒ€λ‘œ ν†΅ν•©λ˜μ—ˆμ§€λ§Œ μœ ν˜• μ„ νƒκΈ°λŠ” 그렇지 μ•Šμ€ κ²ƒμœΌλ‘œ λ‚˜νƒ€λ‚¬μŠ΅λ‹ˆλ‹€.

@debug(selector-unify('button', ':focus'));
// button:focus

@debug(selector-unify(':focus', 'button'));
// button:focus

@debug(selector-unify('[type="button"]', ':focus'));
// [type="button"]:focus

@debug(selector-unify(':focus', '[type="button"]'));
// :focus[type="button"]

제곡 ν•  μˆ˜μžˆλŠ” μΆ”κ°€ 정보가 있으면 μ•Œλ €μ£Όμ„Έμš”!

Bug - @extends Bug - Confirmed Dev - Test Written

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이것은 맀우 μ€‘μš”ν•œ λ²„κ·Έμž…λ‹ˆλ‹€ . libsassλ₯Ό μ΅œμ‹  λ²„μ „μœΌλ‘œ μ—…κ·Έλ ˆμ΄λ“œ ν•  λ•Œ μ € μžμ‹ μ„ λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€ (이전 λ²„μ „μ—λŠ”μ΄ 버그가 μ—†μ—ˆμŠ΅λ‹ˆλ‹€). 이둜 인해 μ‚¬μš©μž λͺ¨λ₯΄κ²Œ μ‚¬μ΄νŠΈκ°€ 손상 될 수 μžˆμŠ΅λ‹ˆλ‹€. 이것은 μ‹€μ œλ‘œ κ°€λŠ₯ν•œ ν•œ 빨리 μˆ˜μ •λ˜μ–΄μ•Όν•©λ‹ˆλ‹€. μ—¬κΈ°μ—μ„œ λ‹€λ₯Έ 라이브러리λ₯Ό λΉ λ₯΄κ²Œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.
https://www.sassmeister.com/

Ok μ–΄μ œ 브레인 νŒŒνŠΈκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ˜ μ˜ˆμ œλŠ” μ‹€μ œλ‘œ 버그가 μ•„λ‹™λ‹ˆλ‹€ (λ˜λŠ” 적어도 κ·Έ 경우 μˆœμ„œλŠ” μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€).
κ·ΈλŸ¬λ‚˜ μ›λž˜μ˜ λ²„κ·ΈλŠ” μ—¬μ „νžˆ μ‘΄μž¬ν•©λ‹ˆλ‹€.

λ˜ν•œ λͺ‡ 가지 ν…ŒμŠ€νŠΈλ₯Ό μˆ˜ν–‰ν–ˆμœΌλ©° κ·Έ μ•ˆμ— 클래슀λ₯Ό ν™•μž₯ν•˜κ³  잘λͺ»λœ μˆœμ„œλ‘œ μΈμ‡„λ˜λŠ” 더 λ§Žμ€ 방법이 μžˆμŠ΅λ‹ˆλ‹€.
Libsass :


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

μ‚°μΆœ:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

λ³΄μ‹œλ‹€μ‹œν”Ό ... hoverclassλŠ” 첫 번째 클래슀둜 μΈμ‡„λ©λ‹ˆλ‹€.
사싀, λ‚΄ μ˜ˆμ œκ°€ 일반 sass 라이브러리의 λ²„κ·ΈλΌλŠ” 것을 λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  3 λŒ“κΈ€

이것은 맀우 μ€‘μš”ν•œ λ²„κ·Έμž…λ‹ˆλ‹€ . libsassλ₯Ό μ΅œμ‹  λ²„μ „μœΌλ‘œ μ—…κ·Έλ ˆμ΄λ“œ ν•  λ•Œ μ € μžμ‹ μ„ λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€ (이전 λ²„μ „μ—λŠ”μ΄ 버그가 μ—†μ—ˆμŠ΅λ‹ˆλ‹€). 이둜 인해 μ‚¬μš©μž λͺ¨λ₯΄κ²Œ μ‚¬μ΄νŠΈκ°€ 손상 될 수 μžˆμŠ΅λ‹ˆλ‹€. 이것은 μ‹€μ œλ‘œ κ°€λŠ₯ν•œ ν•œ 빨리 μˆ˜μ •λ˜μ–΄μ•Όν•©λ‹ˆλ‹€. μ—¬κΈ°μ—μ„œ λ‹€λ₯Έ 라이브러리λ₯Ό λΉ λ₯΄κ²Œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.
https://www.sassmeister.com/

Ok μ–΄μ œ 브레인 νŒŒνŠΈκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ˜ μ˜ˆμ œλŠ” μ‹€μ œλ‘œ 버그가 μ•„λ‹™λ‹ˆλ‹€ (λ˜λŠ” 적어도 κ·Έ 경우 μˆœμ„œλŠ” μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€).
κ·ΈλŸ¬λ‚˜ μ›λž˜μ˜ λ²„κ·ΈλŠ” μ—¬μ „νžˆ μ‘΄μž¬ν•©λ‹ˆλ‹€.

λ˜ν•œ λͺ‡ 가지 ν…ŒμŠ€νŠΈλ₯Ό μˆ˜ν–‰ν–ˆμœΌλ©° κ·Έ μ•ˆμ— 클래슀λ₯Ό ν™•μž₯ν•˜κ³  잘λͺ»λœ μˆœμ„œλ‘œ μΈμ‡„λ˜λŠ” 더 λ§Žμ€ 방법이 μžˆμŠ΅λ‹ˆλ‹€.
Libsass :


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

μ‚°μΆœ:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

λ³΄μ‹œλ‹€μ‹œν”Ό ... hoverclassλŠ” 첫 번째 클래슀둜 μΈμ‡„λ©λ‹ˆλ‹€.
사싀, λ‚΄ μ˜ˆμ œκ°€ 일반 sass 라이브러리의 λ²„κ·ΈλΌλŠ” 것을 λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€.

@bskibinski 농담이 μ•„λ‹™λ‹ˆλ‹€. μ˜€λŠ˜μ€ 말 κ·ΈλŒ€λ‘œ λ‚΄ 생일이고, λ‚΄κ°€ ν˜Όμžκ°€ μ•„λ‹ˆλΌκ³  λ§ν•˜λŠ” 것이라 할지라도 λˆ„κ΅°κ°€κ°€ λ§ˆμΉ¨λ‚΄ 이것에 λ‹΅μž₯ν•˜λŠ” 것을보고 μ–Όλ§ˆλ‚˜ κΈ°λ»€λŠ”μ§€ λͺ¨λ¦…λ‹ˆλ‹€! 졜고의 μ˜λ„ 치 μ•Šμ€ 생일 μ„ λ¬Ό. πŸŽ‚πŸŽ‰

@AshleyKolodziej ν•˜ν•˜ ν•΄ν”Ό 케읡 데이! 더 μ’‹κ²Œ λ§Œλ“€ μˆ˜μžˆμ–΄μ„œ λ‹€ν–‰μž…λ‹ˆλ‹€;)

λ˜ν•œ 두 번째 버그 λ°œκ²¬μ€ μ‹€μ œλ‘œ 버그가 μ•„λ‹ˆμ§€λ§Œ (κΈ΄ ν•˜λ£¨) μ—¬μ „νžˆ κ·Έλ ‡μŠ΅λ‹ˆλ‹€!
이 λ¬Έμ œκ°€ 곧 ν•΄κ²°λ˜κΈ°λ₯Ό λ°”λžλ‹ˆλ‹€! :)

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰

κ΄€λ ¨ 문제

mikeebee picture mikeebee  Β·  8μ½”λ©˜νŠΈ

xzyfer picture xzyfer  Β·  9μ½”λ©˜νŠΈ

xzyfer picture xzyfer  Β·  11μ½”λ©˜νŠΈ

JohnMica picture JohnMica  Β·  3μ½”λ©˜νŠΈ

nex3 picture nex3  Β·  9μ½”λ©˜νŠΈ