Jekyll의 인라인 CS-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

Jekyll의 인라인 CS

Christopher Nolan

Feb 21, 2025 am 10:57 AM

Jekyll의 인라인 CS 키 테이크 아웃

Jekyll의 inline CSS는 CSS가 적은 사이트에 유용한 도구가 될 수 있습니다. 첫 번째 서버 라운드 트립에서 모든 스타일을 보낼 수 있으므로 외부 스타일 시트가 필요하지 않습니다. 이것은 페이지의 상단 및 주요 컨텐츠 영역의 모양을 형성하는 중요한 스타일을 제공하는 데 특히 효과적입니다. Jekyll에서는 스타일을 _includes 폴더에 직접 포함시킨 다음 문서의 헤드 내부에서 가져올 수 있습니다. SASS를 사용하는 경우 SCSSify 필터를 사용하여 SASS 형식 문자열을 CSS로 변환하여 스타일을 인화 할 때에도 SASS를 사용할 수있는 기능을 유지할 수 있습니다. Jekyll의 SCSSify 필터는 _Config.yml에서 SASS 구성을 존중합니다. 따라서 구성 파일에서 출력 스타일을 압축하도록 설정하면 필터가 압축 된 CSS로 SASS를 컴파일하여 미니 화를 돕습니다.

나는 오랫동안 Jekyll의 팬이었습니다. 약간의 결함이 있으며 항상 작업에 가장 적합한 도구는 아니지만 일부 상황에서는 훌륭한 도구가 될 수 있습니다. 나는 그것으로 구축 한 웹 사이트 수에 대해 수를 잃었습니다.

최근에, 나는 Jekyll과 함께 또 다른 사이트를 만들었습니다.

당신은 중요한 CSS에 대해 들어 보셨을 것입니다. 개념의 배후에있는 아이디어는 브라우저에 가능한 한 빨리 브라우저에 중요한 스타일 (페이지의 상단 및 기본 콘텐츠 영역을 담당하는 것)을 제공하는 것입니다. 컨텐츠에 액세스하기 전에 지연이 없도록. 14KB 미만으로 페이지 상단을 렌더링하는 데 필요한 것을 보내는 것이 좋다는 일반적인 규칙이 있습니다. 왜냐하면 서버가 하나의 왕복에서 얼마나 많이 처리 할 수 있기 때문입니다. Google Pagespeed Insights는 문서에서 이에 대한 자세한 정보를 제공하므로 왜 이런 식으로 작동하는지 알고 싶다면 자유롭게 살펴보십시오. 그 정도까지, CSS가 충분히 작다면 (SJSJ와 마찬가지로) 에서 모든 것을 인화하고 외부 스타일 시트를 귀찮게하지 않고 첫 번째 왕복에서 모두 함께 보낼 수 있습니다. 그것은 매우 일반적이지는 않지만, 그것이 꽤 rad입니다.

jekyll로 돌아 가기

그래서 내 아이디어는 문서 헤드에 Jekyll의 문서를 읽은 적이 있다면 SCSSIFY와 SASSIFY 필터가 있음을 알 수 있습니다. 문서에 따르면 이것은 다음과 같이 허용합니다

SASS- 또는 SCSS 형식 문자열을 CSS로 변환합니다

좋아요. 그것은 우리 가이 파일에 전체 파일을 파이프하여 SASS를 사용할 수 있음을 의미합니다. 유일한 문제는 { % 포함 %}와 같은 블록에 필터를 적용 할 수 없다는 것입니다. 트릭은 파일의 내용을 변수로 캡처 한 다음 ({ % capture %} 덕분)를 출력 할 때이 변수에 필터를 적용하는 것입니다.

Tada (다시)! <🎜 🎜>
미수는 어떻습니까? <🎜 🎜>
이 SCSSify 필터의 좋은 점은 _Config.yml에서 SASS 구성을 존중한다는 것입니다. 따라서 구성 파일에서 출력 스타일을 압축으로 설정하면 필터가 압축 된 CSS로 SASS를 컴파일합니다.

Tada (한 번 더)! <🎜 🎜>

최종 생각 <🎜 🎜>
보시다시피,이 기사에는 획기적인 것이 없었습니다. 그러나 나는 다른 날이 문제에 대해 생각하는 데 시간을 보내기 전에 _includes 폴더에 스타일을 쓸 수 있다는 것이 실제로 일어나지 않았다고 말해야합니다.
물론,이 모든 아이디어는 14KB보다 큰 스타일 시트를 다룰 때 부족하여 일부 도구로 중요한 CSS를 추출해야합니다. 그러나 작은 페이지와 사이트의 경우 - 매우 편리합니다!

실제 프로젝트에서 어떻게 작동하는지 확인하려면 SJSJ 저장소에서 파일을 확인할 수 있습니다.

_includes/head.html <🎜

<,> 도움이되기를 바랍니다

jekyll 의 인라인 CSS에 대한 질문이 자주 묻습니다

인라인 CSS와 외부 CSS의 차이점은 무엇입니까?
인라인 CSS는 '스타일'속성을 사용하여 CSS가 HTML 태그 내에 직접 적용되는 방법입니다. 이 방법은 페이지의 특정 요소에 고유 한 스타일을 적용하는 데 유용합니다. 반면 외부 CSS에는 HTML 문서의 외부 .CSS 파일에 링크하는 것이 포함됩니다. 이 방법은 재사용 성을 촉진하고 중복성을 줄이기 때문에 여러 페이지에 동일한 스타일을 적용하려는 경우 유리합니다. Jekyll에서 인라인 CSS를 어떻게 사용할 수 있습니까? <🎜 🎜>
Jekyll에서 인라인 CSS를 사용하려면 '스타일'속성을 사용하여 HTML 태그 내에 CSS를 직접 적용해야합니다. 예를 들어, 단락의 색상을 빨간색으로 변경하려면 다음을 씁니다. 이것은 빨간색 단락입니다. . Jekyll에서 인라인 CSS를 사용할 때 CSS 속성은 CamelCase로 작성해야합니다. <🎜 🎜> Jekyll에서 인라인 CSS를 사용해야하는 이유
Jekyll의 인라인 CSS는 고유 한 적용 할 때 유익합니다. 단일 페이지의 특정 요소에 대한 스타일. 외부 또는 내부 CSS의 상충되는 스타일을 능가하여 웹 페이지의 외관을보다 잘 제어 할 수 있습니다. 그러나 HTML 문서가 과도하게 사용되면 지저분하고 유지하기가 어려울 수 있으므로 인라인 CSS를 드물게 사용하는 것이 가장 좋습니다.
Jekyll에서 인라인 CS와 외부 CSS를 모두 사용할 수 있습니까? <🎜 🎜> 예. Jekyll에서 인라인 CSS와 외부 CSS를 모두 사용할 수 있습니다. 그러나 인라인 CSS는 외부 CS보다 특이성이 높습니다. 이것은 상충되는 스타일이있는 경우 인라인 CSS가 외부 CSS를 무시할 것임을 의미합니다. <🎜 🎜> Jekyll에서 인라인 CSS를 어떻게 무시할 수 있습니까? <🎜
Jekyll에서 인라인 CS를 재정의하는 방법이 까다로울 수 있습니다. 높은 특이성. 그러나 외부 또는 내부 CSS에서 '! 중요한'규칙을 사용하여 인라인 CSS를 무시할 수 있습니다. 예를 들어, 단락의 색상을 빨간색으로 설정하는 인라인 스타일이있는 경우 다음과 같이 외부 CSS에서이를 무시할 수 있습니다. jekyll의 인라인 CSS? Jekyll의 인라인 CSS는 개별 요소에 대한 높은 수준의 제어를 제공하지만 그 제한 사항이 있습니다. HTML 문서를 지저분하고 과도하게 사용하는 경우 유지하기가 어려울 수 있습니다. 스타일을 각 요소에 수동으로 적용해야하므로 재사용 성을 촉진하지 않습니다. <🎜 🎜>
인라인 CSS가 내 Jekyll 사이트의 로딩 속도에 어떤 영향을 미치는가? 인라인 CSS가 잠재적으로 증가 할 수 있습니다. 브라우저가 외부 CSS 파일을 가져 오기 위해 추가 HTTP 요청을 작성할 필요가 없기 때문에 Jekyll 사이트의로드 속도. 그러나 CSS가 많으면 외부 CSS를 사용하여 HTML 문서를 깨끗하고 유지 관리하기 쉽게 유지하는 것이 좋습니다. <🎜 🎜> jekyll에서 인라인 CSS와 함께 CSS 클래스와 ID를 사용할 수 있습니까?
아니요, Jekyll에서 인라인 CSS와 함께 CSS 클래스 및 ID를 사용할 수 없습니다. 인라인 CSS는 '스타일'속성을 사용하여 HTML 요소에 직접 적용되며 클래스 나 ID를 지원하지 않습니다. 클래스 나 ID를 사용하려면 외부 또는 내부 CSS를 사용해야합니다. <🎜 🎜> Jekyll의 인라인 CSS와 함께 미디어 쿼리를 어떻게 사용할 수 있습니까? <🎜 🎜> 불행히도, 인라인으로 미디어 쿼리를 사용할 수 없습니다. Jekyll의 CSS. 미디어 쿼리는 외부 또는 내부 CSS에서 다른 장치 나 화면 크기에 대해 다른 스타일을 적용하기 위해 사용됩니다. 미디어 쿼리를 사용해야하는 경우 외부 또는 내부 CSS를 사용해야합니다.
jekyll에서 인라인 CSS와 함께 의사 클래스와 의사 요소를 사용할 수 있습니까? <🎜 🎜>
아니요. 의사 급 및 의사 요소는 외부 또는 내부 CSS에서 요소의 특정 부분을 스타일링하거나 특수 효과를 추가하기 위해 사용됩니다. 의사 클래스 또는 의사 요소를 사용하려면 외부 또는 내부 CSS를 사용해야합니다.