WordPress에서 CSS에서 Sass로 전환

이 기사는 원래 인터넷 잡지 265 호에 게재되었습니다.

모든 훌륭한 개발자는 반복적 인 작업을 줄이고 컴퓨터가 평범하고 무의미한 작업을 처리 할 수있는 방법을 찾고 있습니다. Sass와 같은 CSS 전처리 기는 프런트 엔드 코딩 프로세스를 자동화하는 데 도움이되는 몇 가지 유용한 도구를 제공합니다. 예를 들어 Sass에서는 변수를 사용할 수 있습니다. 따라서 긴 CSS 파일을 통해 '찾기 및 바꾸기'명령을 실행하여 색상 값을 조정하는 대신 변수 정의를 간단히 변경할 수 있습니다.



Sass를 사용하면 반복되는 스타일 코드 블록을 생성하는 함수를 작성할 수도 있습니다. 예를 들어 버튼 함수는 색상이나 스타일을 매개 변수로 받아들이고 사이트의 버튼 UI에 대한 모든 표준 CSS (테두리 반경, 그라디언트, 텍스트 색상 등)를 생성 할 수 있습니다. 또한 거대한 스타일 시트를 체계적인 모듈로 나눌 수도 있습니다. 거의 모든 CMS, 플러그인 및 웹 앱은 코드 유지 관리를 개선하기 위해 디렉토리와 부분을 사용합니다. Sass를 사용하면 CSS로이를 수행 할 수 있습니다.



이 튜토리얼에서 설명하는 기술은 다음을 사용하는 Sass에만 해당됩니다. SCSS 구문 ,하지만 대부분의 다른 전처리기에 적용 가능합니다. 적게 또는 첨필 -뿐만 아니라.

테마 스타일 시트 변환

사용중인 WordPress 테마에 이미 Sass 파일이 포함되어있는 경우 기존 테마 스타일 시트를 Sass로 변환하는 프로세스가 자동으로 수행됩니다. 저는 일반적으로 Automattic (underscores.me)의 Underscores 템플릿으로 새로운 테마를 시작합니다. 웹 사이트에서 새 테마 패키지를 만들 때 '_sassify!' '고급 옵션'링크를 클릭하면 옵션이 표시됩니다. 빈 테마를 다운로드 할 때 Automattic의 기본 Sass 라이브러리를 제공합니다.



밑줄

Underscores WordPress 테마는 사용자가 이미 Sass 부분이 포함 된 테마 버전을 다운로드 할 수있는 옵션을 제공합니다.

그러나 빌드하거나 수정하는 테마에 Sass 파일이 포함되지 않은 경우 기존 CSS 파일을 Sass로 변환하는 것으로 시작합니다. 이 단계는 Sass (SCSS) 사용의 주요 이점을 보여줍니다. Sass 컴파일러는 문제없이 일반 CSS를 읽습니다. 원본 style.css를 Sass로 사용하기 위해해야 ​​할 일은 그것을 복제하고 style.scss로 이름을 바꾸는 것입니다.

Sass 부분 설정

앞서 Sass가 수천 줄의 CSS를 부분적이라고하는 모듈 식 파일로 나눌 수있게하여 워크 플로우를 개선한다고 언급했습니다. 컴파일러 메서드를 시작하기 전에이 단계를 살펴 보겠습니다.



기존 CSS 파일을 Sass로 변환 한 경우 지금까지 얻은 것은 원본 CSS 파일만큼 다루기 힘든 .scss 파일뿐입니다. 이 시점에서 변수를 사용하고 믹스 인 또는 함수를 작성할 수 있지만 Sass는 아직 모듈화되지 않았거나 구성되지 않았습니다. CSS 파일을 개별 용도에 맞는 섹션으로 그룹화하려고합니다. 목표는 파일 이름을 기반으로 코드를 찾을 수있는 위치를 파악하는 것입니다.

분리하고 싶은 일부 코드 모듈에는 탐색, 타이포그래피 스타일, 사이드 바 위젯, 바닥 글 및 그리드 시스템이 포함됩니다 (이 목록은 포괄적 인 것은 아니지만 시작점 일뿐입니다).

그런 다음 CSS의 각 모듈 섹션을 잘라내어 자체 Sass 부분에 붙여 넣습니다. Sass 부분의 파일 이름은 항상 밑줄 (_)로 시작합니다. 이것은 컴파일러가이 Sass 파일을 기반으로 고유 한 CSS 파일을 작성하지 않도록 지시합니다.

Sass로 가득 찬 폴더를 감시하고 CSS를 자동으로 생성하는 컴파일러 앱은 style.scss를 기반으로 style.css를 생성하지만 _navigation.scss를 기반으로 navigation.css를 생성하지 않습니다. 방금 만든 모든 부분을 컴파일하려면 기본 Sass 파일에서 @import합니다.

코드 블록을 부분으로 복사 할 때마다 기본 .scss 파일에서 @import 'partial-name';으로 바꿉니다. 바닥 글 스타일을 _footer.scss로 이동하는 경우 @import 'footer';를 추가합니다. 가져 오기에 _ 또는 .scss를 포함하지 말고 파일 이름 만 포함하십시오.

실제로 구성하고 머리글 탐색과 바닥 글 탐색을 / navigation / 폴더의 두 부분으로 나누려면 가져 오기에 폴더 이름을 포함합니다.

@import 'navigation/header-nav'; // imports /navigation/_header-nav.scss @import 'navigation/footer-nav'; // imports /navigation/_footer-nav.scss

CSS 캐스케이드는 여전히 Sass로 작성된 코드에 적용된다는 것을 기억하는 것이 중요합니다. 나중에 가져온 부분으로 작성된 스타일은 이전에 가져온 부분의 스타일을 재정의 할 수 있습니다.

포토샵에서 개체를 뒤집는 방법

또한 기본 Sass 파일의 시작 부분에 믹스 인과 변수가 포함 된 부분을 가져 와서 나중에 부분 부분이 실제로 해당 변수와 믹스 인을 사용할 수 있도록하는 것이 좋습니다.

WordPress 댓글

WordPress style.css 요구 사항에 따라 컴파일러가 style.css 상단에 WordPress 주석을 유지하는지 확인해야합니다. Sass의 output_style이 : compressed로 설정되면 CSS를 컴파일 할 때 모든 주석을 제거합니다.

이러한 주석이 그대로 유지되도록하려면 style.scss의 주석 블록 시작 부분에 느낌표 (!)를 추가하십시오.

/*! Theme Name: Sassy WordPress Theme Theme URI: http://jamessteinbach.com/sass/ Author: James Steinbach Author URI: http://jamessteinbach.com Description: From CSS to Sass Sample Theme Code */ // Import all your .scss partials below

CSS를 Sass로 리팩터링

이제 긴 스타일 시트를 더 작은 모듈 식 부분으로 나누었으므로 Sass 기본 설정에 맞게 원본 CSS를 리팩터링 할 수 있습니다. 코드 리팩토링에 유용한 Sass 도구로는 변수, 중첩, 함수 및 믹스 인이 있습니다.

일부 색상을 변경하거나 표준 유형 척도를 설정하려는 경우 변수는 모든 데이터를 한곳에 저장하고 사이트 전체를 쉽게 변경할 수있는 가장 좋은 방법입니다. _variables.scss라는 부분을 아직 만들지 않았다면 지금 수행하고 기본 Sass 파일의 맨 위에 가져 오는 것이 좋습니다. 다음은 해당 부분에 입력 할 수있는 몇 가지 변수입니다.

$red: #FF4136; $blue: #0074D9; $blue-dark: #001F3F; $orange: #FF851B $type-small: 12px; $type-medium: 16px; $type-large: 21px; $type-hero: 44px;

이러한 변수를 설정 한 후에는 부분을 검색하고 값을 변수 이름으로 바꿀 수 있습니다.

body { color: $blue-dark; } .page-title { font-size: $type-large; }

'중첩'이라는 Sass 기능을 사용하면 복잡한 선택기를 더 쉽게 읽을 수 있습니다. 시작 CSS에는 사이트 사이드 바의 여러 요소에 대한 스타일이 포함될 수 있습니다.

.sidebar h1 { //styles } .sidebar p { //styles } .sidebar ul { //styles }

다른 스타일 블록 내부에 스타일을 중첩 할 수 있으며 Sass는 선택기를 결합하여 복잡한 선택자를 만듭니다. 아래 코드는 원본 CSS와 동일한 출력으로 컴파일됩니다 (위 코드 참조).

.sidebar { h1 { //styles } p { //styles } ul { //styles } }

중첩에서 &는 그 위에있는 선택기의 전체 문자열에 대한 자리 표시 자로 사용할 수 있습니다. 중첩은 선택자 사이에 공백을두기 때문에 의사 클래스와 의사 요소를 사용할 때 유용 할 수 있습니다.

a { color: $blue; &:hover { color: $blue-dark; } } .clearfix { &::before, &::after { content: ''; display: table; clear: both; } }

&를 사용하여 선택기의 순서를 복제하거나 반대로 바꿀 수도 있습니다.

p { & + & { margin-top: 1em; } } .menu-link { color: $gray; .menu-item:hover & { color: $gray-light; } }

속성을 중첩하여 리팩토링하는 데 시간을 할애 할 가치가 있는지 궁금 할 수 있습니다. 중첩은 가독성을 높일 수 있지만 (주관적 임에도 불구하고) 신중하게 사용해야하는 도구이기도합니다. 대부분의 Sass 전문가는 Sass 중첩에 대해 '시작 규칙'을 권장합니다. 3 단계 이상 중첩하지 마십시오. Sass 중첩을 아껴 사용하는 것이 현명합니다. 워크 플로에서 의미가없는 경우 강요하지 마십시오.

Sass

Sass는 가장 성숙하고 안정적이며 강력한 전문가 급 CSS 확장 언어입니다.

CSS에서 특정 속성을 반복적으로 계산하는 경우 해당 프로세스를 Sass 함수로 바꿀 수 있습니다. 함수는 사용자가 제공 한 매개 변수를 가져와 값을 반환합니다. CSS 속성-값 쌍은 생성하지 않지만 값을 생성 할 수 있습니다.

다음은 마우스 오버시 희미한 색상을 계산하는 함수의 예입니다.

// This goes in _functions.scss: @function hover-color($color) { @return lighten($color, 10%); } // This is how you use the function in other partials: .button { background-color: $red; &:hover { background-color: hover-color($red); } }

반복되는 코드 블록을 믹스 인으로 대체하여 코드를 리팩터링 할 수도 있습니다. 유용한 믹스 인의 좋은 예는 clearfix입니다.

2017 년 비디오 편집을위한 최고의 맥북
// This goes in _mixins.scss: @mixin clearfix() { &::after { content: “”; display: table; clear: both; } } // This is how you use the mixin in other partials: .content-container { @include clearfix; }

Mixins는 매개 변수를 사용하여 맞춤형 출력을 생성 할 수도 있습니다. 이것은 버튼이나 경고와 같은 디자인 패턴에 매우 유용합니다.

// This goes in _mixins.scss: @mixin alert($color) { border-radius: .5em; box-shadow: 0 0 .25em 0 rgba(0,0,0,.5); border-top: 4px solid $color; color: $color; } // This is how you use this mixin: .alert-error { @include alert($red); } .alert-success { @include alert($green); }

underscores.me

underscores.me 테마는 부분을‘요소’,‘양식’,‘레이아웃’및‘미디어’를 포함한 폴더로 정렬합니다.

온라인에서 볼 수있는 일반적인 조언 중 하나는 크로스 브라우저 접두사에 믹스 인을 사용하는 것입니다. 그러나 나는 일반적으로 이것에 대해 권장하지 않습니다. 나는 그것을 발견 자동 접두사 접두사를 자동화하는 훨씬 더 좋은 방법입니다.

Autoprefixer를 실행할 수없고 Sass 믹스 인에 의존해야하는 경우 Compass 'mixin 라이브러리 사용자 구성을 허용하고 최신 상태로 유지 사용해도 되나요 데이터.

부분 정리

요약하자면, 테마의 기존 스타일 시트를 분리하고 일부 코드를 리팩토링하여 일을 더 깔끔하고 새시하게 만들었습니다. 이제 부분을 구성하여 장기적으로 유지 관리를 개선 할 수 있습니다.

CSS 구성

주니어 그래픽 디자이너는 무엇입니까
CSS 구성 Sass로 개발자는 변수, 중첩, 함수 및 믹스 인과 같은 도구를 사용하여 CSS를 구성하고 자동화 할 수 있습니다.

캐스케이드가 여전히 중요하다는 것을 기억하십시오. Sass 컴파일 된 CSS는 스타일 시트의 뒷부분에 나타나는 스타일이 이전에 나타나는 스타일을 재정의 할 수 있다는 점에서 일반 CSS와 같습니다. 일반적으로 특정 스타일을 가져 오기 전에 일반 스타일을 가져 오십시오.

유사한 부분을 폴더로 구성 할 수 있습니다. 디렉토리에서 Sass 부분을 가져 오는 방법에는 두 가지가 있습니다. 첫 번째는 다음과 같이 import 지시문의 폴더 이름을 포함하여 각 파일을 style.scss로 가져 오는 것입니다.

@import 'base/variables'; // imports _variables.scss from the /base/ directory @import 'base/mixins'; // imports mixins.scss from the /base/ directory @import 'base/grid'; // imports _grid.scss from the /base/ directory

두 번째 (그리고 확실히 더 복잡한) 방법은 해당 디렉토리 (다음 열)의 다른 부분을 가져 오는 각 디렉토리에 자리 표시 자 부분을 만드는 것입니다.

// in style.scss @import 'base/base'; // in /base/_base.scss @import 'variables'; // imports _variables.scss from the /base/ directory @import 'mixins'; // imports mixins.scss from the /base/ directory @import 'grid'; // imports _grid.scss from the /base/ directory

두 방법 모두 동일한 부분을 동일한 순서로 가져옵니다. 첫 번째 방법은 표면적으로 더 간단하지만 두 번째 방법은 style.scss를 깔끔하게 유지하고 복잡성을 의존하는 모듈로 이동시키는 장점이 있습니다.

Sass 부분을 구성하려는 개발자만큼 Sass 부분을 구성하는 방법은 거의 없습니다. 88 페이지의 '리소스'상자에서 몇 가지 좋은 옵션을 찾을 수 있습니다.

다음은 사용할 수있는 매우 간단한 조직 체계입니다.

  • / base / (변수, 믹스 인, 재설정, 타이포그래피)
  • / layout / (그리드, 머리글, 바닥 글)
  • / vendors / (플러그인, 공급 업체 등)
  • / components / (버튼, 메뉴, 양식, 위젯)
  • / pages / (홈, 방문 페이지, 포트폴리오)

합산

이 기사는 WordPress 테마 개발에서 Sass 사용의 잠재력을 탐구하기 시작합니다. 지금 더 많은 정보를 얻고 자 열망 할 가능성이 높습니다. 특히이 주제에 대해 처음 읽은 내용이라면 더욱 그렇습니다.

주제에 대한 자세한 내용은 '리소스'상자를 확인하세요.이 기사에는 Sass-WordPress 워크 플로에 대한 여러 변형이 포함되어 있습니다. 그들의 조언 중 일부는 내가 추천 한 것과 다르지만 (특히 부분 구성에 관한 주제) 괜찮습니다. 자신에게 맞는 기술과 워크 플로를 찾아보세요!

James Steinbach는이 튜토리얼과 함께 사용할 독점 스크린 캐스트를 만들었으며 아래에서 볼 수 있습니다.

말: 제임스 스타 인 바흐