🎩 자바스크립트 강화 Scss 믹스인! 🎩 개념 설명

다음 게시물에서는 CSS @apply를 살펴보고 여기에서 이야기하는 내용을 강화할 것입니다. 더 이상 사용되지 않는 제안 :(

전통적인 웹 개발 흐름

전통적으로 우리는 css를 사용하여 웹 페이지의 스타일을 지정하고 나중에 JavaScript를 사용하여 더 많은 스타일을 추가합니다. 이것은 일반적으로 임의의 클래스를 중개자로 추가하여 작동합니다.

우리는 스타일 외에도 JavaScript 내에서 비즈니스 로직과 기타 여러 가지를 만들었습니다. 우려의 분리는 JavaScript가 실제로 응용 프로그램의 스타일을 지정한다는 사실에 대한 일종의 얼버무림이며 작업은 원래 css 및 css만을 위한 것이었습니다.

css는 확실히 어느 정도 JavaScript만큼 좋을 수 있는 미친 힘을 가지고 있지만(정말 영리한 작업에는 전처리기가 필요함) 일반적으로 JavaScript에는 css를 기반으로 하는 더 강력한 API가 있습니다. 그리고 훨씬 더.

전통적인 모델은 이렇게 생겼습니다.

Houdini

CSS는 dom과 대화하고, JavaScript는 dom과 대화하고, JavaScript는 더 많은 클래스나 스타일을 추가하고, CSS는 미래 시제를 처리하도록 작성되었기 때문에 상태 변경을 처리할 준비가 되어 있지만 실제로 일어나는 모든 일은 JS가 dom을 변경하는 것입니다. 약간 비효율적입니다. 생각해 보면 사용자가 절대 상호 작용하지 않을 수 있는 CSS의 모든 잠재적 상태입니다.

웹 애니메이션 API 자바스크립트 강화 Sass

그래서 이 기술에는 이름이 없습니다. (Jess, JavaScript 강화 스타일시트) 사실 이것은 패턴이고 실제로 sass에 연결되어 있지는 않지만 모든 전처리기에서 수행될 수 있으며 새로운 도구가 작성되어야 할 수도 있습니다. , 이것은 패러다임 전환입니다. 그래서 흥분됩니다.

CSS 변수/사용자 지정 속성은 이미 꽤 뛰어난 기능입니다. 나는 sass를 사용하고 CSS 변수가 필요하지 않다고 생각했지만 매우 다른 것입니다. 그렇게 생각한다면 머리에서 꺼내십시오. CSS 변수는 devtools에서 변경하고 홀 UI를 업데이트하는 것을 볼 때와 같이 라이브입니다. 사실상 더 이상 요소와 클래스의 스타일을 지정하는 것이 아니라 하나의 변수에 불과합니다. 하지만 한 걸음 더 나아갈 수 있을까요?

물론 대답은 예입니다. 우리는 실제로 JavaScript 내에서 직접 CSS 변수를 가져오고 설정할 수 있습니다. 이것은 몇 가지를 의미합니다. 첫째, CSS는 더 이상 미래의 시제 상태 변경을 처리하지 않습니다. 실시간입니다. JavaScript 이벤트에 의해 트리거되며 CSS 값은 예를 들어 스크롤 위치로 업데이트되었습니다. 대박! 이제 JavaScript는 CSS와 Dom에 대한 완전한 권한을 갖습니다. 그러나 대신 JavaScript 기능으로 CSS를 향상시킬 수 있는 패턴이 있다면 어떨까요? CSS가 자바스크립트의 스타일 로직을 너무 투명하게 제어하여 관심사를 명확하게 구분할 수 있다면 어떨까요?

CSS가 JavaScript를 호출하고 dom에 스타일리시하게 영향을 미칠 수 있도록(또는 앞에서 언급한 더 강력한 API를 사용하는 것을 포함하여 JavaScript에서 무엇이든 할 수 있도록) 흐름을 반대로 하는 것에 대해 이야기하고 있습니다.

button {
    // Allows only focus outline on keys
    @include fucus(no-click);
}

그런 다음 믹스인은 JavaScript로 핸드오프합니다 🧙‍♂️

Match media - aka media queries for JavaScript

간단한 scss 믹스인의 힘으로 이미 편리하게 가능합니다. 아이디어는 간단합니다. 사용된 선택기를 캡처하는 믹스인을 생성합니다. 그런 다음 이 선택기는 생성된 CSS 변수 --#{key}: .my-selector; 에 공급됩니다. 여기서 키는 고유해야 합니다. 그러면 이전에 호출된 믹스인을 실수로 재정의하지 않고 :root 에 더 많은 변수를 저장할 수 있습니다. mixin을 두 번 이상 사용하고 싶습니다. scss guid는 random(9*9*9*9)을 사용하여 생성되어 복제 가능성이 매우 낮은 매우 큰 수를 만듭니다. 이제 믹스인 호출자의 선택자 값이 포함된 :root에 임의의 GUID가 있습니다. 다음으로 우리는 guid를 사용하여 CSS 변수의 루트를 스크랩하고 이제 이 선택기를 사용하여 요소를 반복하고 변경할 수 있습니다.

이것이 작동하는 것을 보고 싶다면 이 시리즈의 나머지 부분을 확인하고 코드를 살펴보고 차이점을 확인하십시오.