WordPress 개발자를위한 Sass

Sass : WordPress 테마 개발을 간소화합니다.

강력한 CSS 전 처리기 인 Sass는 WordPress 테마 개발자에게 상당한 이점을 제공합니다. 이 기사는 더 나은 코드 조직, 더 빠른 스타일 및 유지 관리 가능성을 위해 SASS를 활용하는 방법을 살펴 봅니다.

주요 혜택 :

강화 된 조직 : Sass는 대형 스타일 시트를 작고 관리 가능한 "부분"으로 나누어 코드 가독성을 개선하고 유지 보수를 단순화 할 수 있습니다. 여기에는 중첩 셀렉터를 사용하고 재사용 가능한 믹스 인을 생성하는 것이 포함됩니다 효율성 증가 :

믹스 인과 기능 반복 코드를 제거하여 스타일링 프로세스를 가속화합니다. 확장 가능하고 유지 관리 가능한 코드 : 변수 및 논리 기능은 클리너,보다 적응 가능한 코드베이스를 촉진합니다. Sass를 워크 플로에 통합 :

이상적으로는 이미 SASS 파일을 통합 한 테마로 시작합니다 (밑줄은 인기있는 선택입니다). 그러나 테마가 CSS 만 사용하는 경우

>
• 로 변환하는 것은 첫 번째 단계입니다. 기존 CSS는 유효한 SCSS 구문이며 원활한 전환을 보장합니다. 부분을 사용하여 조직 :
초기 변환 후 를 작고 테마
• 파일 (부분)을 밑줄 (예 : )으로 접두사로 나눕니다. 이 부분을 문을 사용하여 메인 파일로 가져와 CSS 계단식을 보존하기위한 올바른 순서를 유지하십시오. 문 (예 : )에서 밑줄과 파일 확장자를 생략하십시오. 유지 관리에 대한 리팩토링 :
리팩토링은 코드 선명도와 유지 관리를 향상시킵니다. 더 나은 가독성을위한 Nest Selectors 및 반복 된 특성을 Mixins로 교체하십시오 (Bourbon 또는 Common Mixins의 Compass와 같은 라이브러리 사용을 고려하십시오). 공급 업체 접두사에 Mixins를 사용하는 것은 일반적으로 AutoPrefixer를 사용하는 것보다 효율적입니다.
• WordPress의 SASS를 컴파일하는 : WordPress는 컴파일 된 CSS 파일이 테마의 루트 디렉토리에 위치하고 맨 위에 특정 WordPress 주석을 포함해야합니다.
컴파일 메소드 :

GUI 컴파일러 :
• Codekit, Koala, Scout 및 Compass.App은 SASS를 컴파일하기위한 사용자 친화적 인 인터페이스를 제공합니다. CLI 컴파일러 : Sass and Compass는 명령 줄 도구를 제공합니다. A
파일을 사용하는 Compass는 출력 스타일 (확장 또는 압축), 입력/출력 디렉토리 등을 구성 할 수 있습니다. 명령은 변경 사항에 자동으로 재 컴파일됩니다.
• WordPress 보존 주석 : 필수 WordPress 주석이 컴파일 된 에 포함되도록하려면 파일에 느낌표 ()로 접두사를 접두사하십시오. 이것은 압축 중에 제거를 방지합니다. config.rb compass watch 부분 구성 :
개선 된 조직을 위해 폴더를 사용하여 부분을 구조화하십시오. 디렉토리 경로를 사용하여 폴더 내에서 부분을 가져옵니다 (예 : ). 제안 된 폴더 구조 :

(변수, 믹스 인, 재설정, 타이포그래피) (그리드, 헤더, 바닥 글) (버튼, 메뉴, 형태) (홈, 특정 페이지 스타일)

추가 리소스 :

style.css Chris Coyier의 "Compass Comping and WordPress 테마" Andy Leverenz의 "WordPress와 함께 Sass를 사용하는 방법" Hugo Giraudel의 "Sass 프로젝트를위한 아키텍처" ! 자주 묻는 질문 (FAQ) : style.scss (이 FAQ는 위의 기사 본문 내에서 답변되므로 중복성을 피하기 위해 여기서 생략됩니다.)

위 내용은 WordPress 개발자를위한 Sass의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!