non vorrei lavorare

ブログ名の通りです。javascript three.js mruby rust OCaml golang julialang blender

atom-shell-starterでSASSを扱えるようにした

先週は、次男がインフルエンザになり、さらに自分がうつされ、一週間休んでました。kjunichiです。
 

背景

atom-shell-starterを使って、アプリを作った際に、アプリ起動時のローディングアニメーションをCSSベースで作成したら、素のCSSだと、ベンダープレフィックスの対応等で、同じような記述を何度も書く羽目になった。これでは非効率と、存在はしてはいたが、手を出さずにいたCSSメタ言語を扱い始めた。当初はNode.jsと親和性の高いLESSで書いたのだが、atom-shell-starterに付属するlessは版が古く、自分が調べた、方法が新しい書き方だったようで、コンパイルエラーとなってしまった。どうせ、CSSメタ言語周りをいじるなら、SASSもやってみようという事になり、atom-shell-starterにGruntのプラグインを追加して、SASSを扱えるようにしてみた。

やり方

SASSのインストール

gem install sass

rbenvの場合は、インストール後に

rbenv rehash

.gitignoreへの追加

ルート直下の.gitignoreの最終行に以下を追加

.sass-cache/

build/package.json

ルート配下ではなく、buildディレクトリ配下のpackage.jsonに以下を追加

  "grunt-lesslint": "0.13.0",
+ "grunt-contrib-sass": "0.8.1",
  "grunt-peg": "~1.1.0",
  "grunt-peg": "~1.1.0",
+ "grunt-scss-lint": "^0.3.4",
  "grunt-shell": "~0.3.1",

build/Gruntfile.coffee

Gruntプラグインの追加

  grunt.loadNpmTasks('grunt-lesslint')
+ grunt.loadNpmTasks('grunt-scss-lint')
  grunt.loadNpmTasks('grunt-cson')
  grunt.loadNpmTasks('grunt-contrib-less')
+ grunt.loadNpmTasks('grunt-contrib-sass')
  grunt.loadNpmTasks('grunt-shell')

sassの設定を定義

   lessConfig =
      options:
        paths: [
          'static'
        ]
      glob_to_multiple:
        expand: true
        src: [
          'static/**/*.less'
        ]
        dest: appDir
        ext: '.css'

+  sassConfig =
+    options:
+      style: [
+        'expanded'
+      ]
+    glob_to_multiple:
+      expand: true
+      src: [
+        'static/**/*.scss'
+      ]
+      dest: appDir
+      ext: '.css'

  csonConfig =

sassの設定を追加

  less: lessConfig

+ sass: sassConfig

  cson: csonConfig

scsslintルールを追加

      'static/**/*.less'
    ]
  ]
+ scsslint:
+ src: [
+ 'static/**/*.scss'
+ ]
+
  'build-atom-shell':
  • compileタスクにsassを追加
  • lintタスクにscsslintを追加
  grunt.initConfig(opts)
- grunt.registerTask('compile', ['coffee', 'cson'])
- grunt.registerTask('lint', ['coffeelint', 'csslint', 'lesslint'])
+ grunt.registerTask('compile', ['coffee', 'cson', 'sass'])
+ grunt.registerTask('lint', ['coffeelint', 'csslint', 'lesslint', 'scsslint'])
  grunt.registerTask('test', ['shell:kill-app', 'run-specs'])

.scss-lint.ymlファイルの作成

空のファイルで良いので、ルート直下に用意しておく

touch .scss-lint.yml

ビルドするには

static配下に.scssファイルを作成して、index.htmlなりでそれを参照する記述を追加したら、

script/build

でビルド可能。

実行は

script/run

まとめ

SASSのlintがGemのSASSに依存しているようで、今回の方法だと、LESSでは必要ない、Rubyが必須となっている。

JavaScript実装のSASSのlintがあり、Gruntのプラグインがあれば、そちらを使うことで、Ruby依存せずにすむはず。

関連記事

1年後の記事

2年後の記事