다른 프로그래밍 언어와 마찬가지로 SCS에서 인코딩하는 목표는 쓰기 속도를 높이는 것이 아니라 읽기 가능성을 최적화하는 것이다.불행하게도 SCS에서 사용할 수 있는 일부 문법은 그것을 더욱 읽기/이해하기 어려울 수 있습니다.parent selector(&)이 한 예다.
부모 선택기는 위조류(예를 들어 &:hover)와 상하문(예를 들어 :not(&))을 유연하게 사용하는 데 매우 편리하다. 비록 우리가 그것을 남용하여'연합류명'을 만들 수도 있지만.

.parent {
  &-extension {
  }
}

이런 용법은 몇 가지 문제를 가져왔다.

코드 라이브러리에서 HTML(parent-extension)에 사용된 결과 CSS 클래스를 검색할 수 없습니다.

더 큰 파일에서 이 모드를 사용하는 경우 CSS 클래스를 계산할 수 있도록 여러 중첩 레벨을 볼 수 있습니다.

본고는 dcwither/scss-codemods의 union-class-name 명령을 만드는 과정을 소개했는데 목적은 우리의 코드 라이브러리에서 약 2000개의 유니언 클래스 모델의 실례를 없애는 것이다.

미래 증명

기존 모델의 전파를 제한하기 위해 저는 프로젝트에 selector-no-union-class-name Stylelint SCSS Rule을 도입했습니다.불행하게도, 이것은 전체 코드 라이브러리에 존재하는 2000개의 이런 모델을 복원한 실례가 아니다.보다 광범위한 복구를 위해 PostSS로 향했습니다.

어서 가서 구해라!

POSTSS 스크립트를 작성하여 &-으로 시작하는 플러그인 규칙을 부모 상하문으로 업그레이드하는 것이 내 생각이었다.

첫 번째 단계: 이거 쉬울 거예요. 그렇죠?

AST Explorer을 실험 도구로 사용해서 나는 그것이 작용하는 것 같다는 것을 발견할 때까지 계속 전환을 하고 있었다.

export default postcss.plugin("remove-nesting-selector", (options = {}) => {
  return (root) => {
    root.walkRules((rule) => {
      if (rule.selector.startsWith("&-")) {
        rule.selector = rule.parent.selector + rule.selector.substr(1);
        rule.parent.parent.append(rule);
      }
    });
  };
});

Attempt 1 AST Explorer snippet
내가 발견한 첫 번째 문제는 스크립트가 향상된 클래스를 반전시키고 있다는 것이다.이렇게 하면 충돌 CSS 규칙을 적용하는 우선 순위가 변경되어 동작이 변경될 수 있습니다.

.some-class {
  &-part1 {
  }
  &-part2 {
  }
}

// becomes

.some-class {
}
.some-class-part2 {
}
.some-class-part1 {
}

만약 이런 종류가 같은 요소에 사용되지 않았다면, 이것은 문제가 되지 않았을 수도 있지만, 관련 HTML이 없다면, 우리는 이것이 맞는지 알 수 없다.

2단계: 예, 버그 수정

그래서 우리가 해야 할 일은 승진의 학급 질서를 유지하는 것이다. 그렇죠?

export default postcss.plugin("remove-nesting-selector", (options = {}) => {
  return (root) => {
    let lastParent = null;
    let insertAfterTarget = null;
    root.walkRules((rule) => {
      if (rule.selector.startsWith("&-")) {
        const ruleParent = rule.parent;
        rule.selector = ruleParent.selector + rule.selector.substr(1);
        if (lastParent !== ruleParent) {
          insertAfterTarget = lastParent = ruleParent;
        }
        ruleParent.parent.insertAfter(insertAfterTarget, rule);
        insertAfterTarget = rule;
      }
    });
  };
});

Attempt 2 AST Explorer snippet
현재 향상된 클래스는 순서를 유지하지만, 변환된 SCS는 그들을 인용하는 곳에 SCS 변수가 존재하지 않기 때문에 구축할 수 없습니다.

.some-class {
  $color: #000;
  &-part1 {
    color: $color;
  }
}

// becomes

.some-class {
  $color: #000;
}
.some-class-part1 {
  color: $color;
}

이것이 바로 내가 이 문제의 복잡성을 깨닫기 시작한 곳이다.변수는 다른 변수를 인용할 수 있기 때문에 우리는 귀속을 처리해야 한다.그럼 이름이 충돌할까요?만약 내가 다른 것을 복구하기 위해 이미 작용한 것들을 파괴했다면?

3단계:구조를 좀 만들 때가 됐어요.

나는 아스트 익스플로러로 오후 내내 이 프로젝트를 완성할 생각은 없다.이 점에서, 나는 이 프로젝트를 GitHub 환매 협의로 옮겨서, 증가하는 복잡성을 관리하기로 결정했다.
여기서부터 개발 과정은 더욱 본격적으로 변했다.

은 기존 코드를 위한 테스트를 작성했다.

은 내가 실현하고자 하는 특성을 위해 테스트 메모리를 작성했다.

은 임무를 추적하기 위해 GitHub project(판넬)을 만들었습니다.

은 다른 사용자가 사용할 수 있는 CLI를 고려하기 시작했습니다.

은 자술에서 예기한 행위를 기록했다.

비록 나는 유일하게 이 일에 종사하는 사람이지만, 프로젝트의 발전에 따라 이러한 방법을 따를 필요가 있다. 왜냐하면 나는 더 이상 전체 프로젝트와 행위를 머릿속에 기억할 수 없기 때문이다.

확인

단원 테스트는 가설을 기록하고 검증하는 데 도움이 되지만 전환이 결과 CSS에 어떠한 부정적인 영향을 미치지 않도록 확보하기에는 부족하다.변환 전후에 SCS를 컴파일하여 변경 사항이 없음을 확인할 수 있습니다.

diff --side-by-side --suppress-common-lines \
  <(grep -v "/\* line" [before_tranform_css]) \
  <(grep -v "/\* line" [after_transform_css])

만약 네가 내가 한 더 복잡한 테스트에 흥미가 있다면 가서 보아라.

지금까지 모든 벌레.

그럼, 나는 내가 길에서 무엇을 놓쳤는지 깨달았을까?

주어진 선택기 중 여러 개의 끼워 넣는 선택기.

은 향상된 규칙과 함께 향상된 작용역 변수를 필요로 한다.

은 Grouping Selectors(diff)에서 각 구성원은 반드시 .a, .b으로 시작해야 규칙을 승급할 수 있다.

은 그룹 선택기의 곱셈 인자(see this test)를 고려하지 않는다.

반복 역할 도메인 SCSS 변수

프로모션 규칙은 컴파일된 CSS의 규칙 순서를 변경할 수 있습니다.

SCSS 변수를 글로벌 범위로 올리면 다른 파일에 영향을 줄 수 있습니다.

SCSS 변수는 상호 의존성이 있을 수 있으며 반복적인 업그레이드가 필요할 수 있습니다.

변수에 대한 모든 것은 함수와 혼합에 적용된다.

공부하다

이 프로젝트는 아직 완성되지 않았지만, 오후 내내 웹 편집기에서 코드를 작성하는 것부터 필요한 인프라 시설과 테스트를 갖추고 자신감 있게 개발하는 과정까지 마쳤다.
여기서 나는 내가 수시로 다시 배운 일반적인 경험을 발견했다. 하나의 생각을 실현하는 데 필요한 일은 종종 네가 처음 상상한 것보다 훨씬 복잡하다는 것이다.나는 이미 한동안 SCS에 많은 시간을 쓰지 않았기 때문에 변수, 혼합, 그룹 선택기는 나의 가장 중요한 고려가 아니다.나는 언어와 문제 (플러그인과 부모 선택기) 에 대해 근시안적인 견해를 가지고 있기 때문에 문제가 실제 상황보다 훨씬 간단해 보인다.
좋은 점은 내가 이 문제에 대해 더욱 복잡한 해결 방안이 필요하다는 것을 깨달았을 때 나는 잘 적응하여 해결 방안의 과정을 점차적으로 증가시켰다는 것이다.가설, 수요와 규범을 내 머릿속에서 코드/테스트/프로젝트 보드로 옮겨 전체 프로젝트를 관리하기 쉽게 한다.또 다른 교훈은, 나는 더 이상 이런 전환이 옳다고 생각하지 않는다. 그 전환의 정확성은 내가 만나는 장면에서만 유용할 뿐이다.
이 항목에 관심이 있으면 다음과 같이 볼 수 있습니다.

데이비드 / scss 인코딩 모듈

POSTSS 플러그인으로 작성된 SCSS 코드mods

scss 인코딩 모듈

이 프로젝트는 귀격성/가독성을 높이기 위한 lint 규칙에 부합하기 위해 POSTSS를 사용하여 scss 코드를 재구성합니다.

장치

전 세계 통과 & -

npm i -g scss-codemods

필요 시 실행

npx scss-codemods [command] [options]

npm

업그레이드 CSS 클래스에는 union-class-name 네스트된 결합 선택기가 있습니다.scss/no-union-class-name stylelint 규칙 태그의 문제를 해결합니다.
예컨대
. 규칙
&- 접미사
파란색
}
}
//되다
. 규칙 접미어
색깔: 파란색;
}
브라우저에서 생성된 선택기의 "집합성"을 높이기 위한 것입니다.

사용법

scss codemods 연합 클래스 이름 - 다시 정렬하지 않음

옵션

&-

코드mod에 제공된 재배열 규칙의 자유를 확인하여 필요한 형식과 더 잘 일치하도록 합니다. (기본값: --reorder)
가치:

never: 선택기가 다시 정렬될 경우 규칙을 업그레이드하지 않습니다.

never: 업그레이드로 인해 선택기가 다시 정렬되는 규칙, 다시 정렬된 선택기만 있으면...

View on GitHub