RiotJS × Sass

RiotJS良いですよ。

自由度が高いためエンタープライズには向かない印象だけど
気軽にサクッとアプリを作るには良さそう。
JQueryを始め、いろんなJSライブラリと組み合わせやすいし
なんといっても軽量なのでCordovaと組み合わせるには良いかも。

そんで、、Sass使いたいよね？そうだよね、きっとね。わかるわかる。
でも公式でSassとの連携の情報がないんですなー。でも出来るよ。

すでに出回っている情報だけど、備忘録のため投稿します。
RiotJSをプリコンパイルする環境を想定。
まあみんなそうしてるんでしょ。

1.各種ライブラリをプロジェクトにインストール

下記の３つのライブラリが必要

• gulp
• gulp-riot
• node-sass

$ npm install --save-dev gulp

$ npm install --save-dev gulp-riot

$ npm install --save-dev node-sass

2.プロジェクト直下にgulpfile.jsを作成

ここでは、tagsフォルダ配下の.tagファイルに対して
Sassの記述をCSSに変換した上で、js/tagsフォルダ配下に吐き出している。
ここは各人の好きなようにすれば良いと思いマッスル。

var gulp = require('gulp');  
var riot = require('gulp-riot');  
var sass = require('node-sass');

gulp.task('riot', function() {  
  gulp
    .src('tags/*.tag')
    .pipe(riot({
      parsers: {
        css: {
          sass: function(tagName, css) {
            var result = sass.renderSync({
              data: css
            });
            return result.css.toString();
          },
        },
      },
    }))
    .pipe(gulp.dest('./js/tags'))
    ;
});
 

3.コンポーネント作成

今回はフォントの色と背景色を変数に入れるという至極簡単な例で実装した。
サルでも分かるはず。
もちろんこれはtagsフォルダ下に配置。

<app>  
  <h1>Riot.js で Sass を導入して使う方法</h1>
  <style type='scss'>
  $font-color: blue;
  $theme-color: red;
  h1 {
    color: $font-color;
    background-color: $theme-color;
  }
  </style>
</app> 

★styleタグにtypeを指定する点がポイントずらー

4.gulpコマンド実行

$ gulp riot

そうするとjs/tagsフォルダ配下にapp.jsファイルが出力されるはず。
中身はこんな感じ。

riot.tag2('app', '<h1>Riot.js で Sass を導入して使う方法</h1>', 'h1 { color: blue; background-color: red; }', '', ); 

ちゃんとSassがCSSに変換されているはず。未来ずら〜！！