Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PostCSS and cssnext

PostCSS and cssnext

at html5j, 61th.

Masaaki Morishita

November 26, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er/hatenablog.com

    • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ
  2. Autoprefixer ʮCan$I$Useʯͱ͍͏αΠτͷσʔλΛࢀ র͍ͯ͠Δ input: .flex { display: flex; } output:

    .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  3. Custom'proper+es input: :root { --color: red; } div { color:

    var(--color); } output: div { color: red; }
  4. Custom'media'queries input: @custom-media --small-viewport (max-width: 30em); @media (--small-viewport) { /*

    styles for small viewport */ } output: @media (max-width: 30em) { /* styles for small viewport */ } • ϝσΟΞΫΤϦʔͷmax%width:,30emͱ͔ʹ໊લΛ෇͚ͯ؅ཧ ͢Δ͜ͱ͕Ͱ͖·͢ɻ
  5. Media&query&ranges input: @media screen and (width >= 500px) and (width

    <= 1200px) { .foo { display: block; } } output: @media screen and (min-width: 500px) and (max-width: 1200px) { .bar { display: block; } }
  6. Custom'selectors input: @custom-selector :--heading h1, h2, h3; article :--heading +

    p { margin-top: 0; } output: article h1 + p, article h2 + p, article h3 + p { margin-top: 0; }
  7. CSS#@apply#Rule#(by#postcss2apply) :root { --toolbar-theme: { background-color: hsl(120, 70%, 95%); border-radius:

    4px; border: 1px solid var(--theme-color late); }; --toolbar-title-theme: { color: green; }; } .toolbar { @apply --toolbar-theme; } .toolbar > .title { @apply --toolbar-title-theme; }
  8. CSS#Extend#Rule#(by#postcss4extend) .error { color: red; border: thick dotted red; }

    .serious-error { @extend .error; font-weight: bold; }