Riot.jsでは、標準でスタイルシートにLessを使用することができます。 その際の使用方法は簡単で、スタイルタグにtypeを指定するだけです。

1
2
3

<style type="less">
   ...
</style>

扨、ここで、イマドキな皆さんはLessじゃなくてSass(SCSS)を使いたい！と思うかもしれません(思いますよね？) なので、Sassを使えるようにしてみましょう。

基本方針

基本的には、riot.parser.css.sassにSassのコンパイラ関数を作成するだけです。 riot.parser.css.sassには、引数として、

  • タグ名
  • stylesheet が渡されます。この、第二引数をコンパイルして返す関数を作成すれば良いのです。

ランタイムコンパイルでSass(SCSS)を使用する

ランタイムコンパイル時はsass.jsを使用します。 <head>タグ内で、https://cdn.rawgit.com/medialize/sass.js/v0.6.3/dist/sass.jsを読み込むなどすれば良いでしょう。 その上で、タグのマウント前に以下の記述を追加します。

1
2
3
4

riot.parsers.css.sass = function(tagName, stylesheet) {  
  var result = Sass.compile(stylesheet);
  return result;
};

gulp-riotプリコンパイルでSass(SCSS)を使用する

glup-riotでプリコンパイルする際にSassを使用するには、node-sassを使用して、gulpfile.jsに以下のように記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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