CSS Nite LP26「CSS Preprocessor Shootout」のフォローアップを公開しました｜CSS Nite公式サイト
ベストセッション20192019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。 2010年から2019年のベスト・セッションCSS Niteベスト・セッション2019CSS Niteベスト・セッション2018CSS Niteベスト・セッション2017CSS Niteベスト・セッション2016CSS Niteベスト・セッション2015CSS Niteベスト・セッション2013CSS Niteベスト・セッション2012CSS Niteベスト・セッション20112010年のベスト20セッション CSS Niteについて CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2017年10月で丸12年。 これまでに、600回を超える関連イベントを通し
昔のCSSをLessとかSassにしたいの
ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。 しかし、世の中には便利なツールを作ってくださる開
撃ち合いお疲れさまでした（CSS Nite LP26）
先日のCSS Nite LP, Disk 26「CSS Preprocessor Shootout」でStylusのご紹介をさせていただきました。 Stylus nib - CSS3 extensions for Stylus enja-oss/stylus · GitHub 自分事で恐縮ですが、StylusでSass/LESSという2大巨星と闘いつつ、CyberAgent3人組の共通裏テーマ「ちゃんとCSS書け」というニュアンスを伝えるのは、正直不安な部分もありました。しかしながら、アンケートを見る限りは極端な不評もなく、Twitterを見る限りは概ね好評だったようで本当に良かったです。 今回のセッションで、Stylusの魅力はもちろん、CSSとプリプロセッサの関わりや諸問題について、みなさんに伝わるものがあったなら幸いです。 rework visionmedia/rework · Gi
CSS Nite LP26 CSS Preprocessor Shootout | Mima Design Memotto
1月12日、CSS Nite LP26 CSS Preprocessor Shootoutへ行ってきました。 今回も内容が濃く非常にためになりました。 以下、メモ書きです。 ◇基礎講演：CSSの設計◇ 高津戸壮さん（ピクセルグリッド） 設計について CSSを書いているとごちゃごちゃになるので、 うまいこと設計する必要がある。 ただ、コードを書くだけではちゃんとした設計はできない。 ページ設計の段階から考える必要がある。 ・モジュール名を基準に書く 干渉しないなどのメリット色々 ・モジュール一覧を作る どこだっけと探したり、同じモジュールを二度作ったりすることを防ぐ ・具体的過ぎず抽象的過ぎない命名を ・余白のルールを設ける なるべく単純に ・細かいデザイン 細かい余白の調節と量産効率性を考える。 ＊オススメ マージン用のモジュールを作る。 デザインを細かく再現する必要
CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 - Mitsu.log();
2013-01-14 CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 昨日、CSS Nite LP, Disk 26に行ってきました。今回のテーマはCSS Preprocessor Shootout。 CSSの設計をどうすべきかというテーマの基調講演ののち、前半はCSSプリプロセッサ SASS/LESS/Stylusそれぞれのお話、中盤はそれらを使うためのツールのお話、後半は実務で使われている企業の方々の事例、最後にCSSデザインの過去・現在・未来についてと、豪華登壇者による全10セッションでした。時間にして5時間半の長丁場でしたが、面白くて興奮しすぎて全然苦じゃなかった笑。参加した人には後で資料のフォローアップがある（確か３ヶ月後くらいには参加してない人向けにもオープンになるはず）ので、ここでは自分が気になった部分のざっ
LESS/Sass+Compass/Stylusなどをコンパイルするアレコレ – A Memorandum
知ってる限りでちょっとまとめておきました。LESSやSass+Compass、Stylusをコンパイルできる各種ツールです（それらのMixins集なんかは入れていません）。中には、HTMLのテンプレートエンジンなんかもあわせてコンパイルできるのも含まれています。何かのご参考になれば。 GUIでどうにかしたいあなたへ 1. CodeKit CodeKitは、有償のアプリケーションでOS Xでしか使えません。対応しているプリプロセッサやテンプレートエンジンの種類は圧倒的に多いのが特徴です。とりあえず使いそうなものをあげると、LESS、Sass/Compass（とそのmixinであるBourbon）、StylusといったCSSプリプロセッサの類、IEの4095個セレクタの問題を回避するBless。そしてHamlにJadeにSlimといったテンプレートエンジン、CoffeeScriptにNode.
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように変数「@xxx」を使って値を定義することができます。 @radius: 10px; @bg-color: #fff; @padding: 10px; .foo { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .bar { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-ra
Useful CSS3 Less Mixins | CSS-Tricks
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur @
LESS & Sass Advent Calendar 2011
.day1 { content: "Sassで行こう！"; voice-family: hell2u; } .day2 { content: "CSSとフレームワークとメタ言語"; voice-family: debiru; } .day3 { content: "Sass を今すぐ実務で使おうよ！"; voice-family: tacamy; } .day4 { content: "LESS初心者向けのナニカ"; voice-family: sigwyg; } .day5 { content: "スマートフォン向けサイト作成時のSass活用法"; voice-family: mattari_panda; } .day6 { content: "sassの抑えておきたいfunctionの使い方"; voice-family: a_t; } .day7 { content: "Sass実戦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inspiretrends.com
Css preprocessorの始めかた