<span><span>@import "../../src/less/uikit.less";</span> </span><span><span>@import "button.less";</span></span>
위 코드에서는 기본 버튼의 텍스트 및 배경색에 대한 변수를 정상, 호버링 및 활성 상태에서 수정했습니다. 다른 특정 버튼의 경우 이러한 변수도 변경해야합니다.
<p>
<in>에서 후크를 사용합니다
<u> Uikit 변수 수정은 간단한 수정을 처리 할 때 프레임 워크 구성 요소의 모양을 변경하는 가장 쉬운 방법입니다. 그러나 새로운 규칙을 추가하거나 핵심 규칙을 끊지 않고 기존 규칙을 변경하는 것과 같은보다 복잡한 사용자 정의의 경우 Uikit은 특별한 메커니즘을 제공합니다. <hook> 후크 <p>를 사용하여 변경 사항을 안전하게 추가합니다. 이것을 실제로 보자. 버튼 안에 변수 아래에 다음 코드를 넣습니다.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<hook> 여기서 버튼 구성 요소의 후크는 테두리 반경과 드롭 쉐이도 효과를 추가하는 데 사용됩니다. <p>
<specific> 더 구체적인 변화를 위해 Uikit은 기타 고리를 제공합니다. 각 구성 요소에는 그러한 후크가 있습니다. 이는 새로운 선택기를 생성하거나 사용자 정의에 사용할 수있는 변수 나 후크가없는 선택기를 수정하는 데 유용합니다. 다음 코드를 추가하여이를 시연하겠습니다
</specific></p>
<the> 여기서 우리는 비활성화되지 않은 모든 활성화 버튼에 대한 드롭 쉐이드를 제거합니다. 그런 다음 모든 주에서 링크의 밑줄을 제거합니다. 마지막으로, 우리는 버튼 링크의 개요를 제거하고 대신 링크가 집중 될 때 표시된 멋진 테두리를 추가합니다. 버튼을 저장합니다. 없음 파일. <p>
<can> 참고 : 해당.없는 파일의 끝을 보면 특정 구성 요소에 사용 가능한 모든 후크를 볼 수 있습니다. 버튼 구성 요소의 예는 다음과 같습니다
</can></p>
<main> 이제 메인 테마가 준비되었으며 커스터마이저에서 확인할 수 있습니다. 페이지를 다시로드하고 즐기십시오. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">gulp indexthemes</pre><div class="contentsignin">로그인 후 복사</div></div>
<p> </p>
<les> 테마를위한 스타일 만들기
<ready> 이제 테마 스타일을 만들 준비가되었습니다. Dark Theme 디렉토리에서 "Styles"라는 새 폴더를 만들고 내부에는 "Blue"라는 다른 폴더를 만들 것입니다. 해당 폴더에서 빈 스타일을 만듭니다. 버튼에서 처음 세 줄의 코드를 복사하고 파일에 붙여 넣은 다음 @Button-Color의 값을 #09F로 변경하고 파일을 저장하십시오. 파일의 내용은 다음과 같습니다
</ready></les></main></the></hook></hook></u></in></p>
<index> 새로 생성 된 스타일을 포함시키기 위해 터미널에서 Gulp Indexemes를 다시 실행 한 다음 커스터마이저로 돌아가서 페이지를 새로 고치십시오. 이제 테마 목록 끝에 "Dark-Blue"옵션이 표시됩니다. 그것을 선택하면 이제 버튼이 멋진 파란색 악센트로 나타납니다. 녹색 스타일의 경우 동일한 절차를 반복하고 대신 #9C0의 색상 값을 사용하십시오.
<ied> 테마에 만족하면이 작업을 실행하여 테마를 구축 할 수 있습니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span><span>@import "uikit.less"</span></span></pre><div class="contentsignin">로그인 후 복사</div></div>
<the> 이것은 어두운 테마를 구축하고 Uikit 루트 디렉토리의 "Dist"폴더에 넣습니다. 그런 다음 "CSS"폴더에는 uikit.dark.css 및 uikit.dark.min.css 파일이 있습니다. 불행히도이 파일에는 메인 테마의 스타일 만 포함되어 있습니다. 파란색과 녹색 스타일은 포함되어 있지 않습니다. 그러나 다음에 설명 하겠지만 GUI Customizer를 사용하여 CSS 파일도 얻을 수 있습니다.
GUI Customizer 사용 <i>
<how> 나는 특정 프로세스의 기본 메커니즘을 항상 아는 것이 좋기 때문에 테마를 수동으로 만드는 방법을 보여주었습니다. 그러나 복잡한 수정이 필요하지 않으면 GUI 사용자 정의기를 직접 사용할 수 있습니다. 필요한 단계를 살펴 보겠습니다. <p></p>
<ul>
<izer> Customizer로 이동하여 사용자 정의하려는 테마를 선택하십시오.
<panel> 왼쪽 패널을 사용하여 변수를 수정하십시오. 일반적으로 글로벌 변수 만 표시됩니다. 구성 요소의 변수가 보이려면 "고급 모드"옵션을 활성화해야합니다. 기본적으로 다른 변수를 통해 값을 정의하는 변수가 숨겨져 있습니다. 고급 모드에서는 이러한 종류의 변수를 포함하는 그룹 옆에 "(more)"버튼을 볼 수 있습니다.
<you> 원하는 변경 사항을 작성하고 "CSS GET"버튼을 누르십시오. 테마의 최종 CSS 파일을 제공합니다. 이 버튼을 사용하여 파란색 및 녹색 스타일의 CSS 파일을 얻을 수 있습니다. "다크 블루"또는 "어두운 녹색"을 선택하고 버튼을 클릭하십시오. <li>
</li>
<a> 최소화 버전을 원한다면 "CSS 미니"옵션을 확인하십시오.
<left> 왼쪽에서 오른쪽으로 언어를 사용하는 경우 "RTL 모드"를 확인하면 전체 테마가 자동으로 변환됩니다.
<li>
</li>
<the> "CSS get"버튼 대신 "get get"버튼을 누르면 출력 파일에는 변경된 변수 만 포함됩니다. 이런 식으로 테마 변형을 만들 때 스타일을 자동으로 만들 수 있습니다. <li>
<br>
모든 테마는 Customizer.json 파일을 사용하여 기본적으로 또는 고급 모드에서만 표시되는 변수를 정의합니다. 이 파일을 수정하면 Customizer의 왼쪽 패널에서 변수의 가시성 및 가용성을 제어 할 수 있습니다. 이에 대한 자세한 내용은 Customizer.json 페이지를 참조하십시오
<you> 참고 : INDEXTheMES 작업을 실행할 때 테마가 고유 한 Customizer.json 파일이없는 경우 (새 테마를 생성하는 경우) Uikit은 기본 테마 (/Themes/에서 파일을 사용합니다. 기본/customizer.json). 이 파일을 사용자 정의하려면 테마의 루트 디렉토리에 복사하여 붙여 넣고 Gulp IndexTemes를 다시 실행하여 테마를 업데이트해야합니다. <ul>.
<li> 결론
<custom> 당신은 특정 프론트 엔드 프레임 워크를 사용자 정의하는 것이 처음에 보일 수있는 것만 큼 어려운 작업이 아니라는 것을 알았습니다. Gulp에 대한 지식과 추가 노력으로 특정 프레임 워크로 구축 된 것으로 표시되지 않고 군중에서 눈에 띄는 웹 사이트를 독특하게 만들 수 있습니다.
<questions> gulp and Less 와 함께 사용자 정의 Uikit 테마에 대한 질문 자주 질문을 자주 묻습니다.
<create> gulp를 사용하여 사용자 정의 Uikit 테마를 만들 수있는 방법은 무엇입니까? <li> </li> Gulp를 사용하여 사용자 정의 Uikit 테마를 만들면 여러 단계가 포함됩니다. 먼저 컴퓨터에 node.js 및 npm을 설치해야합니다. 그런 다음 NPM을 사용하여 Gulp를 설치해야합니다. 그런 다음 Github에서 Uikit 저장소를 복제하고 종속성을 설치할 수 있습니다. 이 작업을 마치면 Theme.less 파일에서 더 적은 변수를 수정하여 사용자 정의 테마를 만들 수 있습니다. 그런 다음 Gulp를 사용하여 테마를 컴파일 할 수 있습니다. Gulp는 프로젝트에 포함시킬 수있는 CSS 파일을 생성합니다.<benefits> uikit 테마를 만드는 데있어 Gulp 사용의 이점은 무엇입니까? <h3> gulp는 Uikit 테마를 만드는 데 몇 가지 이점을 제공합니다. Gulp는 미니 화, 컴파일, 장치 테스트 및 라인과 같은 반복적 인 작업을 자동화 할 수있는 작업 러너입니다. 이것은 당신에게 많은 시간과 노력을 절약 할 수 있습니다. 반면에 CSS 사전 프로세서는 CSS, 믹스 인, 기능 및 CSS를보다 유지 관리 가능하고 확장 가능하게 만들 수있는 기타 기능을 사용할 수있는 CSS 사전 프로세서입니다. Uikit 테마를 만들기 위해 Sass 또는 Stylus와 같은 CSS 프리 프로세서? </h3> 예, Sass 또는 Sass와 같은 다른 CSS 프리 프로세서를 사용할 수 있습니다. 스타일러스는 Uikit 테마를 만듭니다. 그러나 Uikit은 적은 상태로 구축되었으므로 적은 코드를 Sass 또는 Stylus로 변환하기 위해 추가 작업을 수행해야 할 수도 있습니다. <p> 색상, 글꼴 및 글꼴을 사용자 정의하고 어떻게 사용자 정의 할 수 있습니까? Uikit 테마의 다른 요소? </p> 테마의 덜 변수를 수정하여 Uikit 테마의 색상, 글꼴 및 기타 요소를 사용자 정의 할 수 있습니다. 예를 들어 @1 차 컬러 변수를 수정하여 기본 색상을 변경할 수 있습니다. @font-family-base 변수를 수정하여 글꼴 패밀리를 변경할 수도 있습니다. <h3> Uikit 테마에 사용자 정의 구성 요소를 추가하려면 Uikit 테마에 사용자 정의 구성 요소를 추가 할 수 있습니다. 새로운 파일을 새로운 파일을 만들어 테마로 가져 오면 파일이 없습니다. 그런 다음 Uikit Mixins와 변수를 사용하여 구성 요소를 스타일링 할 수 있습니다. </h3> 사용자 정의 Uikit 테마를 어떻게 테스트 할 수 있습니까? <p> 생성 된 CSS 파일을 html 파일과 웹 브라우저에서 열 수 있습니다. 그런 다음 요소를 검사하고 예상대로 스타일이 있는지 확인할 수 있습니다. </p> <h3> 제작을 위해 사용자 정의 Uikit 테마를 최적화 할 수 있습니까? </h3> Gulp를 사용하여 제작을 위해 사용자 정의 Uikit 테마를 최적화 할 수 있습니다. CSS 파일을 조정합니다. 이렇게하면 파일 크기가 줄어들고 웹 사이트의로드 속도가 향상됩니다. <p> 테마 우림과 같은 마켓 플레이스에서 내 사용자 정의 Uikit 테마를 판매 할 수 있습니까? </p> 예, 마켓 플레이스에서 사용자 정의 Uikit 테마를 판매 할 수 있습니다. 테마 우림처럼. 그러나 테마가 마켓 플레이스의 품질 표준을 충족하고 판매하는 데 필요한 권한이 있는지 확인해야합니다. <h3> 새 버전의 Uikit이 출시 될 때 내 사용자 정의 Uikit 테마를 업데이트 할 수 있습니까? ? </h3> 새 버전의 변경 사항을 테마로 병합하여 새 버전의 Uikit이 출시 될 때 사용자 정의 Uikit 테마를 업데이트 할 수 있습니다. 그런 다음 테마를 테스트하여 새 버전에서 올바르게 작동하는지 확인할 수 있습니다. <p> WordPress 테마에서 내 사용자 정의 Uikit 테마를 사용할 수 있습니까? </p> 예, 사용자 정의 Uikit을 사용할 수 있습니다. WordPress 테마의 테마. WordPress 테마에 생성 된 CSS 파일을 포함시키고 템플릿에서 Uikit 클래스를 사용하면됩니다.</benefits></create></questions></custom>
</li>
</ul></you>
</li></the></left></a></you></panel></izer>
</ul></how></i></the></ied></index>위 내용은 Gulp 이하의 맞춤형 Uikit 테마를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
