日本語でCSSを書きたい

Meguro.es#2 の飛び込みLTで発表した資料です。
http://meguroes.connpass.com/event/25018/

Transcript

1. ೔ຊޠͰCSSΛॻ͖͍ͨ Meguro.es#2 in Drecom 2016/02/10
2. ྫ͑͹͜Μͳײ͡Ͱ……ɻ .foo { ෯: 200px; ߴ͞: 200px; എܠ৭: ࡩ৭; } .bar { ৭: ҉ࠇ৭; ߦἧ͑: தԝدͤ; ଠ͞: ଠ͘; ߦߴ: 1.4; }
3. postcss-japanese-stylesheets
4. ҆৺͍ͯͩ͘͠͞npmͷ࿩Ͱ͢
5. whoami • @ikkou • g1983ers • Drecom • Front-end Engineer? • Meguro.esͷதͷਓ
6. postcss-japanese-stylesheets • PostCSS ͷϓϥάΠϯͱͯ͠ಈ࡞͠·͢ • Ұ෦ͷϓϩύςΟͱ஋Λ೔ຊޠͰهड़Ͱ͖·͢ • ಛʹ࿨৭ʹྗΛೖΕ͍ͯ·͢ • e.g. ҉ࠇ৭, ۚࢳ੃৭, ໪๨૲৭
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. PostCSSͷϓϥάΠϯ ͨ͘͞Μ͋Γ·͢ʂ https://github.com/postcss/postcss/blob/ master/docs/plugins.md ͪͳΈʹ postcss-japanese-stylesheets ͸ɺΧς ΰϦͱͯ͠͸ Fun ʹଐ͢ΔωλཁૉΛؚΉϓϥά ΠϯͰ͢ɻ
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. ରԠ͍ͯ͠ΔϓϥύςΟͷྫ • എܠը૾ -> background-image • ৭ -> color • ߴ͞ -> height • ෯ -> width • ϑΥϯτ໊ -> font-family • ଠ͞ -> font-weight
11. ରԠ͍ͯ͠Δ஋ͷྫ • ࿨໊ 465छྨ!! • தԝدͤ -> center • ۉ౳ׂ෇ -> justify • ଠ͍ | ଠ͘ -> bold and • !ॏཁ -> !important
12. PostCSSͷϓϥάΠϯ͸؆୯ʹ࡞Ε·͢
13. ٸ͖ΐɺࠓ೔࡞ͬͯࠓ೔ެ։͠·ͨ͠
14. npm΁ͷެ։΋೉͋͘͠Γ·ͤΜ
15. ָ͍͠PostCSSϥΠϑΛ!!