Sass와 스타일 타일

반응 형 웹 디자인은 새로운 정상이되었으며, 많은 디자이너, 개발자 및 조직은 정적 샘플 스크립트가 더 이상 웹 사이트를 고객에게 보여주는 효과적인 방법이 아니라는 것을 깨달았습니다. 스티븐 헤이 (Stephen Hay)가 말했듯이 :

"우리는 페이지가 아니라 구성 요소 시스템을 설계했습니다."

뷰포트가 변경되고 레이아웃이 조정되면 이러한 구성 요소는 재 배열되어 다양한 컨테이너 크기로 크기를 조정합니다. 많은 디자이너는 단일 웹 사이트 디자인을 위해 다양한 화면 크기의 3-4 정적 샘플 초안을 구축하는 대신 완전히 상세한 샘플 초안을 구축하지 않고도 고객이 디자인 방향을 이해하고 승인하도록 "스타일 타일"으로 전환합니다. 고객이 모든 일자리를 거부하는 위험). Style Tile은 "여러 Photoshop 모델에 투자하지 않고 고객에게 인터페이스 선택을 표시하도록 설계되었습니다. 때로는 요소 콜라주 또는 UI 맵이라고합니다.

이것은 이상적인 마크가 아닐 수도 있지만 ( 대신 절대

를 사용할 수 있음)이 데모에는 작동합니다.

이 작업이 완료된 후에는 고객을 위해 이러한 색상 샘플을 레이아웃하려면 CSS가 필요합니다. 우리는 Sass를 사용하여 더 쉽게 만들 수 있습니다. Sass 매핑은 이러한 색상 값을 저장하는 훌륭한 방법입니다.

(5 개 이상의 변수가 아닌)이 값을지도에 저장함으로써 이제 반복하고 CSS를 자동으로 생성 할 수 있습니다.

제목 타이틀 스타일에 매핑을 사용할 수도 있습니다. 다음 예는 색상 매핑보다 조금 더 복잡합니다.

타이틀 스타일에 더 복잡해지면 괜찮습니다. 색상, 문자 간격 또는 텍스트 변환과 같은 속성을 추가하려면 다음 예제와 같이 중첩 된 매핑을 사용해야합니다.

이 시점에서, 당신은 "CSS에 직접 중첩 된 맵핑 된 데이터를 직접 작성하지 않습니까? CSS처럼 보이며 Sass와 함께 일이 일어나도록 많은 시간을 절약하지 못했습니다." 더 쉽게 기술을 사용하면 기술이 더 쉽게 사용되지 않으면 사용하지 마십시오. 그러나이 복잡한 매핑이 프로젝트에 효과가있는 경우 사용하십시오!

버튼 Sass 매핑의 간단한 사용으로 돌아가서 버튼은 스타일 타일을 자동화 할 수있는 또 다른 좋은 기회입니다.

이 코드 스 니펫은 위의 팔레트와 동일한 색상을 기반으로 버튼의 CSS를 생성합니다. 다른 UI 버튼 색상 세트가있는 경우

에 다른 매핑을 사용할 수 있습니다.

다음은 Codepen 의이 기사의 모든 코드입니다. 코드 펜 링크

<code class="language-html"><ul class="color-palette">
  <li class="color-blue"><span class="swatch">Blue</span></li>
  <li class="color-red"><span class="swatch">Red</span></li>
  <li class="color-green"><span class="swatch">Green</span></li>
  <li class="color-gray"><span class="swatch">Gray</span></li>
  <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li>
</ul></code>

스타일 가이드 생성기 위의 팁은 우리를 위해 중복 CSS를 작성하는 데 도움이되지만 CSS와 일치하도록 HTML을 작성해야합니다. 필요한 마커를 생성하기위한 훌륭한 도구도 있습니다. $button-colors 이 도구를 자세히 설명하지는 않지만 예제와 문서를 확인할 수 있습니다.

Styledocco는 CSS 주석 블록으로 표시되고 일치하는 HTML을 생성하는 NPM 모듈입니다.

홀로그램은 CSS 주석 블록에서 마크 다운을 사용하여 스타일 가이드 마크 업을 만드는 루비 보석입니다.

결론 스타일 타일은 예기치 않게 고정 크기의 픽셀-완벽한 웹 사이트를 받고 있다고 확신하지 않고 고객에게 디자인 비전을 보여줄 수있는 좋은 방법입니다. 그들은 고객이 웹 사이트의 유창성을 이해하면서도 여전히 시각적 디자인의 특성을 전달하도록 돕습니다. Sass를 사용하면 매핑 및 루핑과 같은 도구를 사용하여 이러한 스타일 타일을 더 쉽게 생성 할 수 있습니다. sass를 사용하여 스타일 타일이나 프로토 타이핑을 더 쉽게 만들 수 있습니까? 의견에 알려주십시오!

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