現在、arm-band/kiribi_ususamaで、ejsの変数とScssで共通の値を使用したいと考え、1つのYAMLファイル(commonvar.yml)に記述する方法を採用しています。commonvar.ymlはヘッダの高さやメインカラーなどを記述しています。80pxejsにcommonvar.ymlの内容を渡すために、gulp-ejsを使用して以下のようなタスクを組んでいます(簡略化のために途中関係のないところは省略したり修正したりしています)。.pipe(gulp.dest(DIST_HTML_PATH))})fs.readFileSyncを利用してファイルを読み込み、yamlとしてパースしてcommonVarに代入。}))でejsに渡す、と。Scssは直接渡す方法がなさそうなので、以下のようにしています。done()})commonvar.ymlをテキストファイルとして読み込み、Scssの構文に(無理やり)変換し、scssファイルとして出力、と。上手い方法があれば良いのですが......。経緯ここまでの前提を基に、今回は以下のようなニーズを満たしたいと考えました。キービジュアルで使うキャッチコピー的なテキストが存在、かつ1文字ずつspanタグを付与したい(ejsでfor文で回す)Scssで一文字ずつエフェクトを付けたい(animation-delayを1.のspanごとにずらしたいので、Scssで文字数カウント(str-length)をしたい)そこで、「commonvar.ymlにキャッチコピーを記述しておけば、両方で使えるのではないか?」と考えたわけです。catch2を追加したわけです。catch2は構文エラーになってしまいます。そこで、yaml2sassタスクの中のダブルクォーテーションを外す処理をなくして、commonvar.ymlのカラーコードのダブルクォーテーションを外してしまえば良さそうです。"JavaScriptを制する!"しかし、これではejsタスクでカラーコードが上手く認識されず、theme-colorが空文字列になってしまいました。前置きが長くなりました。ここまでの経緯を踏まえて、この課題を解決するためにcommonvar.ymlのうち、「値がカラーコードであるもののみダブルクォーテーションを外す」ようにyaml2sassタスクの中の処理を変更することにしました。いうことで、修正した結果が以下のコードとなります。})コールバック関数はtestやmatchにはなさそうだったので、replaceを二段構えにする形となりました。外側のreplaceの第一引数が正規表現で(前後にダブルクーテーション付きの)カラーコードを判定している部分。条件にマッチした場合にコールバック関数に入り、内側のarguments[0]にマッチした部分の文字列が入っています。そのため、arguments[0]のダブルクォーテーションを外せば、課題で上げた「値がカラーコードであるもののみダブルクォーテーションを外す」という処理が実現できます。いうことで、これでテストプログラムを書いてOKだったので、採用。Qiitaカラーコードこの記事を書いた人アルム=バンドフロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。RasPiで遊んだり、趣味で開発したり。