Milk+ea

Weblog Is My Hobby.

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

SASS

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

使い方

/*
 * linear-gradient
 * l-gradient(開始位置, 色List, 位置List)
 */
+l-gradient(top, #000 #333 #666 #999 #ccc #fff, 0% 20% 40% 60% 80% 100%)

/*
 * radial-gradient
 * r-gradient(色List, 位置List)
 */
+r-gradient(#000 #333 #666 #999 #ccc #fff, 0% 20% 40% 60% 80% 100%)
  • 開始位置には(left, top, -45deg, 45deg)のどれかを指定します。
  • 色と位置はSassのリスト形式（カンマなし）で書いていきます。色の１番目と位置の１番目がペアになって処理されます。

出力

// linear-gradient
{
background: black;
background: -webkit-linear-gradient(top, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: -moz-linear-gradient(top, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: -o-linear-gradient(top, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: linear-gradient(to bottom, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF000000", endColorstr="#FFFFFFFF", GradientType=0);
}

// radial-gradient
{
background: black;
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: -o-radial-gradient(center, ellipse cover, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: -ms-radial-gradient(center, ellipse cover, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
background: radial-gradient(ellipse at center, #000000 0%, #333333 20%, #666666 40%, #999999 60%, #cccccc 80%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF000000", endColorstr="#FFFFFFFF", GradientType=1);
}

-webkit-gradientはAndroidとかを想定してないなら表示しないようしました。
コードの$Androidというのをtrueにすると-webkit-gradientも出力されます。

Mixinコード

思ったより長くなってしまったので次のページで。

続きを読む

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

SASS

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: 10em;
  width: 10em;
  position: relative;
}
.triangle::before {
  content: "";
  position: absolute;
  border-style: solid;
  left: 5em;
  bottom: -1em;
  border-width: 1em 1em 0 1em;
  border-color: red transparent transparent transparent;
}
}

Mixinコード

続きを読む

【SublimeText】編集中のファイルをブラウザで開く、リロードできるパッケージ ２つ

Sublime Text

HTML,CSSの確認に便利。
フォルダ開いてダブルクリックで開くのが「面倒臭っせー」と思う人に（僕）。

環境

使うパッケージ

両方とも、Package Control(Windowsなら[ctrl+shift+p])からインストールできるってことなんですが、僕は何故かBrowserRefreshの方が失敗しちゃいます。
仕方ないので、zipでダウンロードしてPerformances -> Browse Packagesの中にコピーしました。

キーバインドを設定

Performances -> Key Bindings - User を開いて設定を追加します。

{
  "keys": ["alt+o"], "command": "browser_refresh", "args": {
    "auto_save": true,
    "delay": 0.5,
    "activate_browser": true,
    "browser_name" : "Google Chrome"
  }
},
{ "keys" : ["ctrl+alt+o"], "command": "side_bar_open_in_browser" }

[ctrl+alt+o]や[alt+o]は僕が勝手につけたショートカットです。好きなのをつけまそう。
上がBrowserRefresh、下がSideBarEnhancementsです。

使う

開きたいファイル（HTMLとか）のタブで[ctrl+alt+o]を入力するとGoogleChromeにそのファイルが表示されます。
後は、少し編集するたび[alt+o]すれば"ブラウザが現在開いいるタブ"をリロードしてアクティブ（デスクトップで一番前）に持ってきてくれます。

２カラムにして片方にCSS、もう片方にHTMLを置いてショートカット[ctrl+1, ctrl+2]で移動みたいにすると便利かも。