Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
Sassユーザー定義関数のテスト
除夜の鐘をBGMにBowerパッケージのhail2u-scss-functionsのテストを書いていた。Gruntでコンパイルして期待される結果と付き合わせるだけだけど、あるとないのとでは大違いな気がしないでもない。 パーシャル読み込んで使ってみるSCSSファイルと、それのコンパイル結果として想定されるCSSファイルを書き、Gruntのgrunt-contrib-sassプラグインでコンパイルし、CSSファイルの内容をgrunt-contrib-nodeunitプラグインのstrictEqual()を使って突き合わせるというテスト。Sassの全般的なテストを書くのは難しいけど、ユーザー定義関数やミックスインなどはこういう形で書ける。 手間がかかる割には報われないような気がするけど、世界中のミックスインとユーザー定義関数にテストがあればそれも変わるんじゃないかと思いながら書いた。変わんないか
「Web制作者のためのSassの教科書」をいただきました | Webデザインのタネ
下3つはIE7を無視したサイトならとくに@includeを使う必要がないかもしれませんが、自動的にIE用に別途スタイルを書いてくれるのもありがたいですね。 CompassのTypographyモジュールのリファレンス（英語） CompassのUtilitiesモジュールのリファレンス（英語） 英語のリファレンスは画面の左側がメニューになってるになっているので、そっちを見てコードを見ていくと全体感がわかりやすかったです。 Compassのヘルパー（275ページ） Compassのヘルパーはimage-width()とかimage-height()みたいな便利なものもありますが、これ知っておけばもっと省力できた！っていうのがセレクター系のヘルパーです。 headings関数 h1, h2, h3, h4, h5みたいに連続する見出しにスタイルを当てることが多いので、ないかなーと思ってたのですが
フリーのSass,LessコンパイラKoala【Win,Mac】
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
Chromeがバージョン27でSassのソースマップに対応したけど、あれ？ | Sou-Lablog
ソウラブログまたはソウラボログ。WebなどのBlog。多分。Chromeバージョン27がリリースされSassのソースマップに対応しました。 ソースマップとはコンパイルされたりMinifyされた元の位置を教えてくれるファイルです。 jQueryも対応したりしたアレです。私は主にSassで使用しています。 ソースマップの出力方法 Sassは時期のバージョン3.3より対応しています。現在はアルファ版をインストールすることで使えます。 使用するには–sourcemapオプションを使います。 $ sass --sourcemap input.scss:output.css こんな感じでソースマップオプションを付けるだけ。 これでコンパイルすれば上記例だと「output.css.map」というMapファイルが生成します。 ブラウザの設定方法 Chromeもそのまんまでは使えなくてデベロッパーツー
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
実践Sass 前編
17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2013/05/sasslesscoffeescriptkoala.html