Riot.jsにSass(SCSS)を導入する


1 min read
Riot.jsにSass(SCSS)を導入する

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

<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を読み込むなどすれば良いでしょう。
その上で、タグのマウント前に以下の記述を追加します。

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に以下のように記述します。

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('./'))
    ;
});

Vagrantで起動したVMからBOXを作る
Previous article

Vagrantで起動したVMからBOXを作る

Vagrantで、centos/7等の標準的なBOXをベースにカスタムしたVMを保存しておいたり、配布したりするためにBOXを作る手順です。 自分用のメモとして。 VM内での操作 VBoxGuestAdditionsを導入する。 以下のソースを適当なファイルに保存する。(ここでは$HOME/ins.shとします。) このとき、二行目はVirtualboxのバージョンに合わせて適宜書き換える。 リストはこちら yum install -y wget kernel kernel-devel perl gcc wget http:

Go1.9rc1 is released!
Next article

Go1.9rc1 is released!

Go1.9rc1がリリースされました! そこで、Go1.9のリリースノートをさらっと見てみようと思います。 (まだrc1なので、今後変更される場合があります。ご注意を) 全部見ていくと、結構な量になりそうなので、すぐに影響のありそうな部分だけ、軽く見ていきましょう。 type alias Go1.9ではType Aliasというものが導入されます。 これはその名の通り、型に別名をつけられるというもの。 言葉で説明するより、コードを見た方が早いと思いますので、コードを用意しました。 package main import


Related Articles

Parcel + Riot.js
2 min read

GO TOP

🎉 You've successfully subscribed to something tech.!
OK