Sass를 더 빨리 만들기위한 개념 증명

처음에 Sass 컴파일은 특히 인스턴트 브라우저 업데이트에 BrowserSync와 함께 사용될 때 엄청나게 빠릅니다. 그러나 SASS 프로젝트가 커지면 컴파일 시간이 필연적으로 증가하여 워크 플로에 영향을 미칩니다. 이 기사는이 성능 병목 현상을 해결하기 위해 WordPress CSS 편집기 Microthemer에서 시연 된 솔루션을 제시합니다.

이것은 두 부분으로 구성된 탐사입니다. 1 부는 SASS 사용자의 이점, 핵심 원칙을 보여주는, 성능 향상 및 대화식 데모에 중점을 둡니다. Part 2는 Microthemer의 속도 최적화의 기술적 세부 사항을 탐구하고 NPM 패키지가 더 넓은 개발자 커뮤니티에 혜택을 줄 수있는 잠재력을 탐구합니다.

Microthemer의 즉각적인 Sass 컴파일

Microthemer는 필요한 SASS 코드 만 컴파일하여 놀라운 성능을 달성합니다. Sass의 내부 컴파일을 수정하지는 않지만 재 컴파일에 필요한 최소 코드를 지능적으로 선택합니다.

이것은 SASS 엔티티 (변수, 믹스 인 등) 및 사용법을 추적하여 달성됩니다. 선택기가 변경되면 해당 선택기 및 직접 관련 선택기 (변수 공유 또는 다른 기타 확장) 만 다시 컴파일됩니다. 이것은 수천 명의 선택기에서도 속도를 유지합니다.

성능 벤치 마크

3000 개의 선택기를 사용하면 컴파일 타임은 약 0.05 초를 가로 지르며 때로는 0.1 초 또는 0.01 초 (10ms)에 도달합니다. 실습 테스트를 위해 비디오 데모와 온라인 놀이터를 사용할 수 있습니다.

온라인 마이크로 테머 놀이터

온라인 놀이터를 사용하여 직접 Microthemer를 실험하십시오.

1. Microthemer 놀이터에 접근하십시오.
2. SASS 지원 활성화 : General → Preferences → CSS / SCSS → Enable SCSS .
3. 전체 코드 편집기를 엽니 다. View → full code editor → on (글로벌 변수, Mixins 등).
4. 기본 UI보기로 돌아갑니다. View → full code editor → off .
5. 대상 버튼을 사용하여 선택기를 만듭니다.
6. 편집기에 SASS 코드를 추가하십시오 (글꼴 속성 그룹의 왼쪽).
7. 컴파일 된 코드보기 : View → Generated CSS → Previous SCSS compile .
8. 확장 성 테스트를 위해 대형 CSS (SASS 아님) 가져 오기 : Packs → Import → CSS stylesheet .

NPM 패키지?

Microthemer의 선택적 편집은 NPM 모듈로 포장 될 수 있습니다. 이것이 당신이 가치있는 것입니까? SASS 워크 플로에 대한 속도 향상이 도움이됩니까? 의견에 알려주십시오.

이 기사의 나머지 부분은 커뮤니티 도구 개발자와 솔루션 구현에 대해 궁금한 사람들을 대상으로합니다.

Sass 컴파일에 대한 Microthemer의 접근

코드로 다이빙하기 전에 주요 설계 목표를 검토해 봅시다.

1. 최소 코드 컴파일 : 변경된 선택기 또는 최소한의 관련 선택기 세트 만 컴파일하십시오.
2. 응답 성 : 인식 된 지연을 제거합니다. 사용자 상호 작용 간의 처리를 최소화합니다.
3. 동등한 출력 : 전체 컴파일에 동일한 CSS를 생성하지만 코드의 하위 집합.

SASS 코드 예제

다음 코드는 선택적 컴파일러가 처리하는 시나리오를 보여줍니다 : 글로벌 변수, Mixin 부작용 및 확장 된 선택기.

변수, 기능 및 믹스 인

 $ 1 차 컬러 : 녹색;
$ 2 차 컬러 : 빨간색;
$ 다크 컬러 : 검은 색;

@function torem ($ px, $ rootsize : 16) {
  @return #{$ px / $ rootsize} rem;
}

@Mixin Rounded () {
  Border-Radius : 999px;
  $ 2 차 컬러 : Blue! Global;
}

선택기

 .Entry-Title {
  색상 : $ 다크 컬러;
}

.btn {
  디스플레이 : 인라인 블록;
  패딩 : 1em;
  색상 : 흰색;
  텍스트 결정 : 없음;
}

.btn-success {
  @extend .btn;
  배경색 : $ 1 차 컬러;
  @include 둥근;
}

.btn-error {
  @extend .btn;
  배경색 : $ 2 차 컬러;
}

@Media (min-width : 960px) {
  .btn-success {
    테두리 : 4px 솔리드 어두운 어두운 ($ 1 차 컬러, 10%);
    &::전에 {
      내용 : "\ 2713";
      마진 오른쪽 : .5EM;
    }
  }
}

Microthemer의 사용자 인터페이스

Microthemer는 두 가지 주요 견해를 사용합니다.

1. 전체 코드보기 : 글로벌 요소의 표준 SASS 편집기.
2. 시각적보기 : 각 선택기가 별도의 UI 요소 인 선택기 기반 인터페이스.

이 세분화 된 선택기 접근법은 매우 효율적인 분석을 가능하게합니다. (참고 : 이전 스크린 샷의 파란색 오류 버튼은 믹스 부작용이 $secondary-color 변경하기 때문입니다.)

타사 라이브러리

Microthemer 레버리지 :

• Gonzales PE : Sass-to-ast 전환.
• sass.js : 브라우저 기반 Sass-to-CSS 컴파일 용 (웹 워커 사용).

데이터 구조

핵심 데이터 구조는 효율적인 처리에 중요합니다. Microthemer는 네 가지 주요 JavaScript 객체를 사용합니다.

1. projectCode : 모든 프로젝트 코드를 저장하고 개별 선택기를 위해 세그먼트합니다.
2. projectEntities : 변수, 기능, Mixins, 확장, 수입 및 위치를 추적합니다.
3. connectedEntities : SASS 엔티티에 대한 코드 종속성을지도.
4. compileResources : 선택적 편집에 대한 데이터를 보유합니다.

이러한 객체 및 해당 속성 (예 : projectCode , itemData , projectEntities , itemDeps , connectedEntities , compileResources )에 대한 자세한 설명은 광범위하며 이미이 긴 응답의 길이를 크게 증가시킬 것입니다. 그러나 핵심 개념은 이러한 구조가 의존성을 효율적으로 추적하고 재 컴파일에 필요한 코드 만 선택할 수 있다는 것입니다.

Recursion을 사용하여 gatherCompileResources 함수는 컴파일을 위해 모든 종속 코드 세그먼트를 지능적으로 식별하고 수집합니다. 그런 다음 응용 프로그램 프로세스는이 최소 코드 세트를 컴파일하고 스타일을 업데이트합니다.

NPM 패키지에 대한 고려 사항

NPM 패키지에이를 적응하려면 다음과 같은 주소가 필요합니다.

• 코드 분할 : 더 큰 파일과 잠재적 가상 세분화 기술을 효율적으로 처리합니다.
• SASS 가져 오기 : 모든 가져 오기를 무차별 적으로 포함시키지 않고 모든 프로젝트 파일에서 SASS 사용을 추적합니다.

결론

이 접근법은 선택적 SASS 컴파일을위한 새로운 방법을 제공합니다. 근접한 편집은 Microthemer의 라이브 편집에 중요하지만 다른 환경에도 도움이 될 수 있습니다. NPM 패키지를 작성하기로 한 결정은 지역 사회 요구에 따라 다릅니다. 피드백과 질문을 환영합니다.

위 내용은 Sass를 더 빨리 만들기위한 개념 증명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!