タグ

CSSとsassに関するd_NA_sER186のブックマーク (3)

  • gulpで自分が編集しているscssをcssCombしたい - Qiita

    cssCombは便利だ。 でもgulpでの導入方法を調べてみると、プロパティの並び順を整えてコンパイルする方法しか見つからなかった。 個人的にはコンパイル後の綺麗さはどうでもよくて、編集するファイルこそ綺麗にしたい。 やりたいこと scssを保存するたびに下記を実行したい そのscsscssCombで整える cssにコンパイル 結論 これで実現できる { "devDependencies": { "gulp": "^3.9.1", "gulp-changed-in-place": "^2.0.3", "gulp-compass": "^2.1.0", "gulp-csscomb": "^3.0.8", "gulp-watch": "^4.3.5" } } var changedInPlace = require('gulp-changed-in-place'); var compass

    gulpで自分が編集しているscssをcssCombしたい - Qiita
  • Sassを使いたくなる!便利機能をまとめてみました。 | MONSTER DIVE

    前回は効率的な制作環境を作るために、Gruntについて紹介しました。今回はCSSを効率よく書くことができるSassについて紹介したいと思います。 Sassを使い始めて1年ほど経ちますが、その便利さに、今ではコーディングをする上で欠かせなくなりました。 CSSの場合は、同じスタイルを何度も定義したり、プロパティの変更の修正が面倒だったりします。 Sassを使うと、CSSでは面倒なことを解決できるだけでなく、変数が利用できたり、スタイルの使い回しができたり、for文や四則演算まで使えます! それらを使いこなせば、CSSをより便利で効率的に書くことが出来る。CSS設計もしやすくなります。CSSのパワーアップさせた言語、それがSass!のような感じです。 Sass特長 セレクタがネスト(入れ子)になっているので見やすい。また、セレクタの変更に柔軟に対応できる セレクタの使い回し(extend)がで

    Sassを使いたくなる!便利機能をまとめてみました。 | MONSTER DIVE
  • Sass解説 - extend, mixin, function | MONSTER DIVE

    Sassを使い始めたとき、ネストや変数などは比較的わかりやすいのですが、今回は"便利なんだけどイマイチどれを使っていいかわからない"、extend、mixin、functionについて比較したいと思います。 Sassにはもちろん色々な便利機能があるので、Sassで何が出来るのだろう?と探してこの記事に来たヒトは、弊社KentaroのSassを使いたくなる!便利機能をまとめてみました。をご覧ください。 ここでは、Sass(SCSS記法)のextend(継承)、mixin(ミックスイン)、function(自作関数)に絞って紹介してみます。 特にextend、mixinは、どちらを使っても変わらない場合もあり、好みがわかれるかもしれませんが、ここは自分ルールで分けているので、ご容赦を。 extend(継承) このextend、mixin、functionの中で、まず最初に紹介されているのがex

    Sass解説 - extend, mixin, function | MONSTER DIVE
  • 1