Rececss를 소개합니다: Tailwind에 대한 단순하지만 사용자 정의가 가능한 대안

12105 단어 webdevcssshowdevproductivity
많은 프런트 엔드 개발자로서 CSS 유틸리티 클래스의 스타일 접근 방식의 이점을 깨달았습니다. Tailwind는 정말 훌륭한 도구이지만 내가 원하는 값, 클래스 이름 또는 상태를 사용하도록 구성하여 거의 소진되는 상황에 끊임없이 처해 있습니다.

그래서 저는 이 동기를 염두에 두고 재미있게 또 다른 css utils 생성기를 개발하기로 결정했습니다.
  • 범위 구문이 지원되는 자동 생성 단위 값입니다.
  • 미디어 쿼리로 출력 파일을 분할하는 기능.
  • 상태 유틸리티에 대한 추가 제어(:hover , :active , js 상태).
  • Emmet abbreviations 으로 기본 설정되는 풍부한 클래스 이름 사용자 정의.

    • 그리고 여기 내가 생각해 낸 것이 있습니다.


    다시 / 후퇴


    최소한의 완전 맞춤형 CSS 유틸리티 생성기




    구성




    // rececss.config.js

module.exports = {
  output: {
    path: ".",
    splitByMedia: true,
  },
  media: {
    md: "only screen and (min-width: 768px)",
    lg: "only screen and (min-width: 1024px)"
  },
  rules: {
    width: { $px: [50, 100], $pct: [100] },
    height: { $px: [50, 100] },
    padding: {
      edges: { $px: [[0, 50, 5]] }
    },
    margin: {
      edges: { $px: [-80, [0, 50, 5]] }
    },
    font: {
      size: { $px: [[8, 24, 2]] },
      family: { pri: "'Archivo Black', sans-serif", sec: "'Montserrat', sans-serif" },
    },
    border: {
      shorthand: { sep: "1px solid rgba(0,0,0,0.1)", frame: "10px solid #fff", },
      radius: { $px: [15], $pct: [50] },
    },
    background: {
      color: { light: "#fff", blue: "#ECF0FB", }
    },
    shadow: {
      box: { air: "0px 4px 12px rgba(0, 0, 0, 0.08)", }
    },
    color: { blue: "#51568A" },
  },
}

    용법



    이 구성이 포함된 폴더 내에서 실행npx rececss하면 나중에 마크업에서 사용할 수 있는 세 개의 개별 css 파일이 생성됩니다.

    <link href="./rececss.css" rel="stylesheet">
<link href="./rececss.md.css" rel="stylesheet" media="only screen and (min-width: 768px)">
<link href="./rececss.lg.css" rel="stylesheet" media="only screen and (min-width: 1024px)">
    media가 제공되면 브라우저는 미디어 쿼리와 일치하지 않는 스타일시트에 가장 낮은 값download priority을 적용합니다.

    작동 중인 생성된 클래스 이름을 확인하십시오.

    <body class="bgc_blue p_30">
  <div class="bgc_light bdrs_15 bxsh_air p_30 mt_50">
    <div class="d_f fxd_c ai_c md:fxd_r">
      <img
        src="./avatar.jpg"
        class="w_100 h_100 bd_frame bdrs_50% mt_-80 md:bdrs_15 md:mt_0 md:bd_n"
      />

      <div class="ta_c md:ta_l md:pl_15 md:d_f jc_sb fx_a ai_c">
        <div class="ph_10">
          <p class="ff_pri c_blue mv_10 fz_24 md:mt_0">Some Person</p>
          <p class="ff_sec m_0 mb_30 md:mb_0">JS Developer</p>
        </div>

        <div class="d_f jc_c">
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$6460</p>
            <p class="ff_sec">Income</p>
          </div>
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$1240</p>
            <p class="ff_sec">Expenses</p>
          </div>
          <div class="ph_15">
            <p class="ff_pri c_blue fz_20">$870</p>
            <p class="ff_sec">Loan</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

    결과:



    클래스 이름을 수정하는 방법, :hover , :focus 또는 javascript 기반 상태를 사용하는 방법에 관심이 있는 경우 설명서를 확인하십시오.

    이 프로젝트는 개발 초기 단계에 있으므로 피드백을 받는 것이 정말 기쁩니다. 문제를 자유롭게 여는 데 도움이 되려면 PR을 제출하거나 마음에 들면 별표를 하세요.


    다시 / 후퇴


    최소한의 완전 맞춤형 CSS 유틸리티 생성기





    읽어 주셔서 감사합니다.
    LibreOJ 2955. "NOIP2018"왕국보위【동적DP】
    #10250 ACM 호텔 [백준](H99.17)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage