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

PostCSS and cssnext

PostCSS and cssnext

at html5j, 61th.

Avatar for Masaaki Morishita

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; }