日本語でCSSを書きたい

Transcript

1. 1.

   ೔ຊޠͰCSSΛॻ͖͍ͨ Meguro.es#2 in Drecom 2016/02/10

2. 2.

   ྫ͑͹͜Μͳײ͡Ͱ……ɻ .foo { ෯: 200px; ߴ͞: 200px; എܠ৭: ࡩ৭; }

   .bar { ৭: ҉ࠇ৭; ߦἧ͑: தԝدͤ; ଠ͞: ଠ͘; ߦߴ: 1.4; }
3. 3.

   postcss-japanese-stylesheets

4. 4.

   ҆৺͍ͯͩ͘͠͞npmͷ࿩Ͱ͢

5. 5.

   whoami • @ikkou • g1983ers • Drecom • Front-end Engineer?

   • Meguro.esͷதͷਓ
6. 6.

   postcss-japanese-stylesheets • PostCSS ͷϓϥάΠϯͱͯ͠ಈ࡞͠·͢ • Ұ෦ͷϓϩύςΟͱ஋Λ೔ຊޠͰهड़Ͱ͖·͢ • ಛʹ࿨৭ʹྗΛೖΕ͍ͯ·͢ • e.g.

   ҉ࠇ৭, ۚࢳ੃৭, ໪๨૲৭
7. 7.

   PostCSS PostCSS is a tool for transforming styles with JS

   plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. ฏͨ͘ݴ͑͹ɺPostCSS ͸ɺJavaScriptͷϓϥά ΠϯΛࣗ༝ʹ૊Έ߹ΘͤͯɺCSSΛੜ੒͢Δπʔ ϧͰ͢
8. 8.

   PostCSSͷϓϥάΠϯ ͨ͘͞Μ͋Γ·͢ʂ https://github.com/postcss/postcss/blob/ master/docs/plugins.md ͪͳΈʹ postcss-japanese-stylesheets ͸ɺΧς ΰϦͱͯ͠͸ Fun ʹଐ͢ΔωλཁૉΛؚΉϓϥά

   ΠϯͰ͢ɻ
9. 9.

   PostCSSϓϥάΠϯͷ࡞Γํ var postcss = require('postcss'); module.exports = postcss.plugin('postcss-japanese-stylesheets', function (opts)

   { opts = opts || {}; return function (css) { css.eachDecl(function transformDecl(decl) { decl.prop = decl.prop.replace('৭', 'color'); }); }; }); postcss-japanese-stylesheets ͷΑ͏ͳɺจࣈྻ Λஔ͖׵͑Δఔ౓ͷ಺༰Ͱ͋Ε͹ɺ͜ͷΑ͏ʹࢸ ۃ؆୯ʹ࡞Δ͜ͱ͕ग़དྷ·͢
10. 10.

    ରԠ͍ͯ͠ΔϓϥύςΟͷྫ • എܠը૾ -> background-image • ৭ -> color •

    ߴ͞ -> height • ෯ -> width • ϑΥϯτ໊ -> font-family • ଠ͞ -> font-weight
11. 11.

    ରԠ͍ͯ͠Δ஋ͷྫ • ࿨໊ 465छྨ!! • தԝدͤ -> center • ۉ౳ׂ෇

    -> justify • ଠ͍ | ଠ͘ -> bold and • !ॏཁ -> !important
12. 12.

    PostCSSͷϓϥάΠϯ͸؆୯ʹ࡞Ε·͢

13. 13.

    ٸ͖ΐɺࠓ೔࡞ͬͯࠓ೔ެ։͠·ͨ͠

14. 14.

    npm΁ͷެ։΋೉͋͘͠Γ·ͤΜ

15. 15.

    ָ͍͠PostCSSϥΠϑΛ!!