タグ

Sassに関するfagaiのブックマーク (3)

  • gulpでsassをコンパイルするタスクを作る - yutaponのブログ

    何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-

    gulpでsassをコンパイルするタスクを作る - yutaponのブログ
  • [CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ

    15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記のをオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの -Sassの教科書 box-sizing(ボックスサイズ) opacity(不透明度) column-width(カラム幅) circle(円形) font-size(フォントサイズ) box-shadow(ボックスシャドウ) xPos(要素の座標) vertical-align(天地の中央に配置) flexbox(フレックスボックス) flex(モダンブラウザの旧仕様にも対応したflexの指定) flex-order(表示の順番) flex-direction(表示の方向) gra

    [CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
  • 【Sassを覚えよう!Vol.6】黒い画面での実際の運用に関して

    ボクがSassを覚えるにあたって一番のネックだった部分がこれから書く内容なんですが、黒い画面でSassが動作する所までは進んでも、これから実際に案件ベースで使っていくにはどうしたら良いかって部分。 と言うより、黒い画面を起動して都度手打ちしてウンタラカンタラみたいなのは、正直面倒過ぎて実用的じゃないな、と思ってた部分がとても大きいです。 黒い画面に関する知識も殆ど無いので、何かよく分かんないなーって感じでした。 実際問題として、RubyとSassのインストールだけなら、ちょっと気になってる分かりそうな人(あ、ボクでもいいんですけどね)に、『分かんないから教えて(・∀・)!』って言ってみれば、モンクを言いつつもやってくれると思いますよ。えぇ。 あ、ヤローは自分でやりましょうね。 軽く話が反れましたが、そろそろ題に。 scssファイルを監視 前回、無事にテストが出来たと思いますが、あのままで

    【Sassを覚えよう!Vol.6】黒い画面での実際の運用に関して
  • 1