3

More than 5 years have passed since last update.

Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)[Riot編]

Last updated at 2017-10-28Posted at 2017-10-28

親記事

主要な機能

tagを自作できる。
tag内で構造(HTML)とスタイル(CSS)を同一次元で管理できる。

従来のHTMLとの比較

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>hoge</title>
  </head>
  <body>
    <div class="item">
      <p class="big" style="font-size: 1.5em;">huga</p>
    </div>
    <div class="item">
      <p class="big" style="font-size: 1.5em;">moge</p>
    </div>
    <div class="item">
      <p class="big" style="font-size: 1.5em;">ohyo</p>
    </div>
  </body>
</html>

Riot

index.pug

doctype html
html
  head
    title hoge
  body
    item(text="huge")
    item(text="moge")
    item(text="ohyo")

item.tag

item
  p.big {text}

  script.
    import riot from "riot"
    this.text = opts.text

  style.
    .big
      font-size: 1.5em

比較考察

きれいにモジュール化できて楽に開発できそうです。

3

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

3