๐Ÿ‘‹ PugใจSassใ‚’ใ‚„ใ‚ใŸใ„่ฉฑ

ใ‚„ใ‚ใŸใ„ใจๆ€ใฃใŸ่จ˜ๆ†ถใ‚’่‡ชๅˆ†ๅ‘ใ‘ใฎใƒกใƒขใจใ—ใฆๆฎ‹ใ—ใฆใŠใใ€‚

ใชใœใ‚„ใ‚ใ‚ˆใ†ใจๆ€ใฃใŸใฎใ‹

  • Sass๏ผˆScss๏ผ‰ใ‚’ๆ›ธใ‹ใชใใชใฃใŸ
    • ไป•ไบ‹ใงใฏ็”Ÿใฎ CSS ใ‚’ๆ›ธใ„ใฆใ‚‹
    • CSS ่‡ชไฝ“ใŒใ ใ„ใถ็†Ÿใ‚Œใฆใใฆใ„ใ‚‹ใฎใงใ€ใ‚ใ–ใ‚ใ–็’ฐๅขƒใ‚’็”จๆ„ใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚‹ Sass ใ‚’ไฝฟใ‚ใชใใฆใ‚‚่‰ฏใใชใฃใฆใใŸ
    • ใ‚คใƒณใƒ‡ใƒณใƒˆ่จ˜ๆณ•ใฏๆฅฝใ ใ‘ใฉใ€ใใ‚Œใ‚ˆใ‚Šใ‚‚ใ„ใกใ„ใก็’ฐๅขƒใ‚’ใ‚ปใƒƒใƒˆใ‚ขใƒƒใƒ—ใ™ใ‚‹ใฎใŒใƒ€ใƒซใ„
  • Slim ใ‚’ๆ›ธใๆ…ฃใ‚Œใฆใ„ใŸใฎใง Pug ใ‚’ไฝฟใฃใฆใ„ใŸใ‘ใฉใ€Slim ใ‚‚ๆ›ธใ‹ใชใใชใฃใŸ
    • ไป•ไบ‹ใŒ ERB ใ ใฃใŸใ—ใ€ๆœ€่ฟ‘ใฏ Vue ใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใซ็ฝฎใๆ›ใˆใฆใ‚‹ใ—ใ€Vue ใงใ‚‚ HTML ใ‚’ๆ›ธใ„ใฆใ‚‹
    • ใใ‚‚ใใ‚‚ Pug ใ‚’ใ‚ตใƒใƒผใƒˆใ—ใฆใ‚‹ใƒ„ใƒผใƒซใฏใ‚ใพใ‚Šใชใ„โ€ฆใ‹ใ‚‰ๆฏŽๅ›žๅฐŽๅ…ฅๆ™‚ใซใ‚ใ‚Œใ“ใ‚Œ่ชฟในใพใใฃใฆไฝฟใฃใฆใŸใ‘ใฉใ€ใ‚ใ‚“ใฉใใ•ใใชใฃใŸ
    • ใ‚คใƒณใƒ‡ใƒณใƒˆ่จ˜ๆณ•ใฏๆฅฝใ ใ‘ใฉใ€ใใ‚‚ใใ‚‚ใ‚จใƒ‡ใ‚ฃใ‚ฟใฎ่ฃœๅฎŒๆฉŸ่ƒฝใŒๅ……ๅฎŸใ—ใฆใ„ใ‚Œใฐ็”Ÿใฎ HTML ใ ใฃใฆใ•ใปใฉ้ขๅ€’ใงใฏใชใ„ใ—ใ€ใใ‚Œใ‚ˆใ‚ŠๅฐŽๅ…ฅๆ™‚ใซใ„ใ‚ใ„ใ‚่ชฟในใพใใ‚‹ใปใ†ใŒๆ™‚้–“ใ‹ใ‹ใฃใฆใ€Œใใ‚Œใ‚‚ใฉใ†ใชใฎ๏ผŸใ€ใฃใฆใชใฃใฆใ—ใพใฃใŸ

ใ“ใฎใƒ–ใƒญใ‚ฐใฏ Liquid ใ‚’ไฝฟใ†

  • 11ty.js ่‡ชไฝ“ใฏ Nunjacks ๆŽจใ—ใ‚‰ใ—ใ„๏ผˆๅ…ฌๅผใ‚ตใ‚คใƒˆใฎใ‚ณใƒผใƒ‰ใ‚„ PullReqใ€Issue ใชใฉใ‚’็œบใ‚ใฆๅ‹ๆ‰‹ใซใใ†ๆ€ใฃใฆใ‚‹๏ผ‰ใฃใฝใ„ใ‘ใฉใ€ใ‚จใƒ‡ใ‚ฃใ‚ฟใงใ‚ตใƒใƒผใƒˆใ—ใฆใ‚‹ใƒ„ใƒผใƒซใŒใ‚ใ‚“ใพใ‚Šใชใ„ใ€‚ใ™ใใชใใจใ‚‚ NeoVim ใจใ„ใ†ใ‹ Treesitter ใ‚‚ใ‚ตใƒใƒผใƒˆใ•ใ‚Œใฆใชใ‹ใฃใŸโ€ฆโ€ฆ
  • ๆง‹ๆ–‡ใฏใ ใ„ใŸใ„ไผผใฆใ‚‹ใจใ„ใ†ใ‹ใปใผๅŒใ˜ใ ใ—ใ€Handlebars ใจใ‹ EJS ใ‚ˆใ‚Šใฏๅ…ฅใ‚Šใ‚„ใ™ใ„ใจๆ€ใฃใŸ
  • Sass ใฏ 2025 ๅนด 1 ๆœˆ 22 ๆ—ฅ็พๅœจใ€ใพใ ใ‚„ใ‚ใฆใชใ„ใ€‚Bulma ใ‚’ไฝฟใฃใฆใฆใ€ใ‚ซใ‚นใ‚ฟใƒ ้ƒจๅˆ†ใ ใ‘ Sass ใงๆ›ธใ„ใฆใ‚‹ใฎใงใใ“ใ ใ‘ๆ›ธใ็›ดใ™ๅฟ…่ฆใŒใ‚ใ‚‹ใ€‚ใใฎใ†ใกๆ›ธใๆ›ใˆใ‚‹ใ—ใ€ใชใ‚“ใชใ‚‰่ฆ‹ใŸ็›ฎใ‚’ๅค‰ใˆใŸใ„๏ผˆ็™ฝ่ƒŒๆ™ฏใฏ่‡ชๅˆ†ใฎ็›ฎใŒ่พ›ใ„๏ผ‰
  • ๅค‰ๆ›ดใ—ใŸ PullReq ใฏใ“ใ‚Œ โ†’ใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆใ‚’ Liquid ใซๅค‰ๆ›ดใ€11ty ใฎ Sass ใƒ—ใƒฉใ‚ฐใ‚คใƒณใ‚’ใ‚„ใ‚ใ‚‹ by ksmxxxxxx ยท Pull Request #216 ยท ksmxxxxxx/docs.ksmxxxxxx.page

Astro ใจใ‹ Nuxt.js ใฏ๏ผŸ

ๆต่กŒใฃใฆใ‚‹ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใซ็ฝฎใๆ›ใˆใ‚‹ใ“ใจใ‚‚่€ƒใˆใชใใฏใชใ„ใ‘ใฉใ€ใ€Œ่จ˜ไบ‹ใŒๆ›ธใ‘ใ‚Œใฐใ„ใ„ใ‹ใ‚‰ใ€ใใ“ใพใงๅฟ…่ฆใซๆ„Ÿใ˜ใชใ„ใ‚“ใ ใ‚ˆใชโ€ฆโ€ฆใ€ใจใ„ใ†ใŠๆฐ—ๆŒใกใ ใ€‚
ๅคใฎๅŒไบบใ‚ตใ‚คใƒˆไฝœใ‚‹ใฃใฆใชใฃใŸใ‚‰ใ‚‚ใ†ๅฐ‘ใ—ๅ‡ใฃใŸใ“ใจใ‚’ใ—ใŸใใชใ‚‹ใ ใ‚ใ†ใ—ใ€ใใ†ใชใ‚‹ใจ React ใจใ‹ Vue ใ‚‚ไฝฟใ„ใŸใใชใ‚Šใใ†ใ ใ‹ใ‚‰ไฝฟใŠใ†ใ‹ใชใฃใฆๆ€ใฃใฆใ‚‹ใ€‚
ใŒใ€ใƒ–ใƒญใ‚ฐใ‚ตใ‚คใƒˆใ ใฃใŸใ‚‰ใใ“ใพใงๆฉŸ่ƒฝใจใ‹ใ„ใ‚‰ใชใ„โ€ฆโ€ฆใจ่€ƒใˆใฆใ‚‹ใ€‚