Milk+ea

Weblog Is My Hobby.

Sass

Gulpを使ってBrowser Sync + Sass, Less or Stylus + Coffee Scriptなタスクを作る

超開発が楽になるWeb開発環境の作り方。Gulpを使ってBrowser Sync + Sass, Less or Stylus + Coffee Scriptなタスクを作ってみよう!

アニメーションで変形するCSSアイコンに挑戦

3本線からバツ印へアニメーションで変形するアイコンをCSSで作ってみた。

CSSだけで要素に行番号を強引に付ける

CSSだけで要素に行番号を強引に付ける方法を紹介します。またその場合に便利なSassのMixinも紹介します。

テーブル要素のCSSいくつか

Sasuli Sasuli - はてなブログ用CSS コチラからアクセスするとはてなブログでコピペで使えるCSSが表示(標準のデザインのみ) 既存のサイトに使用するには多少のCSSの知識は必要かもしれません。 このサイトにCSS(SASS)を貯めておき、はてなブログのテーマ…

やっぱりSassをネストして書きたい

(前) とりあえず適当にSassをネストのようにして書く。 // test $base : #fff $sub : #fff $accent: #Fff %test &:hover color: $accent .bland margin: 0 font-size: 2rem .bland-a color: $accent text-decoration: none +transition( .2s linear ) .con…

Sassのネストを解除するRakefileを作ろうと思っていろいろやってた。 やっぱネストで書いたほうが見やすいと思う。 けど全然進まねぇよおおお。正規表現むずい。 今日の分 こんなのがあったとして。 #alpha color: $black & #beta color: $white #gamma @ext…

SinatraでCompassを使う

viewsの中にSassファイルを入れるsassディレクトリを作成 メインのrubyファイルにこんな感じなのを書く c = Compass.configuration c.project_path = File.dirname(__FILE__) c.sass_dir = 'views/sass' get '/css/:name.css' do sass :"sass/#{params[:name…

Compassでプロジェクト外のSassファイルを使う

config.rbにadditional_import_pathsを追加するとプロジェクトディレクトリの外あるSassファイルも使えるようになるよう。 例えば[ユーザ名]ディレクトリにあるSassディレクトリならこう書くだけ。(Windows) additional_import_paths = ["/Users/[ユーザ名]/…

作ったSassのFunction

ifの逆。「じゃなかったら...」って読んでたらunlessぅ。 @function unless($if, $do_when_true, $do_when_false) @return if(not($if), $do_when_true, $do_when_false) // $num: 1em $hoge: unless(unitless($num), ok, no) swhich文みたいな。else ifって…

Sassでposition系を書くとき、ちょっと見やすくなるかも

どうでもいいこと。 Mixinの@contentを使うとちょっと見やすい、気がする。 インデントで分かりやすいし、書く場所が決まるから。 .test color: … font-size: … +relative top: 1px left: 2px text-align: … Mixin =relative position: relative @content =a…

SassでTransformのMixin

こんな感じで使う。 +trf(skewX 1, translate 1em 2em 3em, scale .5 2, rotate 1 2 3 90deg) 結果はこう。 -webkit-transform: skewX(1) translate3d(1em, 2em, 3em) scale(0.5, 2) rotate3d(1, 2, 3, 90deg); -ms-transform: skewX(1) translate3d(1em, 2e…

Sassの整理

ベンダープレフィックスの整理整頓ここを見ながら。 プロパティ関係でまとめる。 remあたりがごちゃごちゃ。 でも、em厨なので使いたい。

【Sass】自分で使いやすいと思うtranslateのmixinを作るった

CSS3のTransformでもMixinを作ってみました。 自分で使いやすくしようと考えて1つで translate scale rotate skew matrix を記述することができるように無理やりまとめました。 コードはこちら。Transformを1つにまとめたSassのMixin。 いくつか例 ベンダ…

【Susy】Sass,Compassでグリッドレイアウトしまそ

何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を…

【Sass】Borderで三角形を作るCSSのMixinも作ってみた

top, top left, right, right bottom, bottom, left bottom, left, left topに使えます(全部)。 @content初めて使ってみたけどナニコレすご。 例 .triangle height: 10em width: 10em +triangle(bottom, 1em, 1em, red) left: 5em 出力 .triangle { height…

【Sass】開始位置,色,位置の順番で書けるgradientのMixinを作ってみた

僕的に分かりやすく書けるようにした結果こんな感じのものができました。 以下のコードはすべてSASS形式です。 SCSS形式に書きなおそうと思ったけどツカレタョ…。 Ultimate CSS Gradient Generator - ColorZilla.comというジェネレーターサイトを参考にしました。…

Sass関数の動作

Module: Sass::Script::Functionsに載っている関数一覧なんだけど、ほんの一部しか使ったことなかった(知らなかった)ので全部の動作を自分で確認してみた。 そしてサイトにまとめてみた。見づらいんだけど。_ノ乙(、ン、)_ カラーの変換とか、変更前と後の色を…