Toro_Unit

タグ: Sass

  • gulp-sass-bulk-importを使ってSassの@importをすっきり管理する。

    皆さんSass書いてますかー！gulpしてますかー！

    唐突ですがRubyのgemにsass-globbingというものがありまして、そいつを使うと、

    @import "object/component/*.scss";
@import "object/project/*.scss";
@import "object/utility/*.scss";

    みたいな感じで該当するファイルを勝手に読み込んでくれるという実に便利なgemです。Ruby版のSassで使えます。

    参考: sass-globbingでSassファイルをお手軽管理 – Qiita

    ただ。。。。
    やっぱり速度面はnode-sassの方が良いし、WindowsでRubyどうするの？とか聞かれるのがかったるいし、ruby-sassだとそれのバージョン管理もしないといけないし、bundlerの使い方とか聞かれるのも面倒くさいです。gulp-ruby-sassもなんか書き方が特殊だし。。。

    package.json、composer.json、(たまにbower.json)、Gemfileを管理するのは地獄過ぎる気がしたので、gulp-sassでやりきりたいなぁと思ってましたけど、それはそれで@import地獄になります。PHPですらautoload出来るんだから何とかしてくれよと思うわけです。

    別にrailsとかmiddleman案件だったら良いんだろうけど、あいにくこちらはレンタルサーバー案件メインのWordPressが得意な田舎のフロントエンドエンジニアと来てます。

    なので、gulp-sassでもsass-globbing的なコトが出来たら楽だなぁと思って探してたらありました。

    mathisonian/gulp-sass-bulk-import

    サンプルコード

    var gulp = require('gulp');
var bulkSass = require('gulp-sass-bulk-import');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('src/styles/**/*.scss')
        .pipe(bulkSass())
        .pipe(sass())
        .pipe(gulp.dest('dist/styles'));
});

    こんな感じで、gulp-sassの直前にpipeしてあげれば動きます。

    とりあえず半月触ってますけど、とくにバグっぽいものには出会ってません。見つけたらプルリクエスト投げましょう。

    注意事項

    基本的に名前順にファイルが読まれるので、ちゃんとモジュール化できてないCSSだと、読み込み順の関係でおかしくなったりします。まぁそれは、CSSの設計がおかしいと思うので、メロン本とか読んでSMACSSなりFLOCSSなりITCSSなりやればいいんじゃないでしょうかね。

     

  • Compass 1.0.0.rc.0 がついにsourcemapに対応した件

    Sass/SCSSフレームワークのCompassの1.0.0.rc.0(執筆しているときの最新版は1.0.0.rc.1)が、ようやくSource Mapを出力できるようになりました。Source Mapとは、コンパイル後のcssからデバッグコンソールでコンパイル前のソースが見えるあれです。

    出力の仕方は、config.rbに

    sass_options = { :sourcemap => true }

    としておくだけ。

    インストール方法は、

    gem install compass --pre

    とするか、bundleや、rails、middlemanなんかを使っている場合は、Gemfileに

    gem 'compass', '~> 1.0.0.rc.0'

    と書いてから、

    bundle install

    すれば良いです。

  • SassとかScssだとか、CSSプリプロセッサでBEMるときのはまりどころ

    すっかりBEM道を邁進中の今日のこの頃ですが、ちょっとSCSSでやったときのはまりごと。

    別に、https://gist.github.com/juno/6182957でも言及されているとおり、全てのセレクタをBEMにする必要はないのですが、BEMってないCSSを同時に使うには、ちょっと注意が必要です。

    たとえば

    .hoge {
	
	p {
		margin: 1em;
	}
	
	&__piyo {
		margin: 0;
	}
}

    こんなやつ。

    .hoge {
	
	p {
		margin: 1em;
	}
	
	.piyo {
		margin: 0;
	}
}

    とCSSと書くのと、同じノリで書くと痛い目に見ます。
    NO BEM であれば、.hoge p.piyoのmarginは0なのですが、
    BEMった場合、.hoge pのほうが、BEMったセレクタの.hoge__piyoより優先度が高くなってしまいます。結果、先ほどのpのmarginは1emとなります。なので、BEMなCSSを書くのを結構強制されがちです。

    CSSのオーバーライドがしづらくなるわけですね。

    WordPressやら、CMSの本文部分のCSSを書くときにちょっと面倒なコトになりそうです。

    その代わり、破綻しにくいCSSを作りやすいかもしれません。
    SMACSSで言うところのbaseの設計が大変にはなったり、かといってbaseにごりごり書きすぎると、モジュール周りでmarginやらpaddingのリセットをいっぱい書く羽目になったり。

    難しいですね。CSS。