先週は、次男がインフルエンザになり、さらに自分がうつされ、一週間休んでました。@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依存せずにすむはず。
