チャットワークがLESSを使う理由 | チャットワーククリエーターズブログ
ChatWork デザイン部の赤堀巴絵です！ ChatWork Advent Calendar５日目を担当します〜。 ご存知の方もいらっしゃると思いますが、チャットワークアプリ側はLESSで運用されています。なんでLESSで運用してるの？と聞かれることがあるのでブログで紹介したいと思います。 チャットワークがLESSを選んだ経緯まずCSSプリプロセッサの導入を社内で検討し導入しようとなった時期が2011年11月頃でした。導入にあたって問題になったことがありました。 社内のOSの開発環境がWinとMacでバラバラ社内でCSSプリプロセッサの知識が浸透していないまず、SassだとみんなにRubyをいれてもらうというハードルがありました。スタイルシートはデザイナーもコーダーもシステムエンジニアも触る状況だったので全員の環境に合わせて構築するのが難しいと考えました。 また、社内でまだCSSプリプロ
昔のCSSをLessとかSassにしたいの
ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。 しかし、世の中には便利なツールを作ってくださる開
WordPressでSass,Lessが使える！Jetpackでブラウザからコンパイル！
WordPress.com(ブログサービスのほう)のCSSエディターがSass・Lessに対応したようです。 WordPress.comの機能はパッケージ型のWordPressでもJetpackプラグインにより提供されているので早速試してみました。 とりあえずプラグインをインストール。 1. プラグインからJetpack by WordPress.comをインストール。 2. WordPress.comのアカウントが必要なので登録しアカウント認証。 インストールと認証が完了するとJetPackのメニューが現れます。 JetPackのメニューからカスタムCSSを選択。 もしくは、「外観」から追加された「CSS編集」。 CSSスタイルシートエディター画面にいきます。 この「カスタムCSS」とは、テーマのstyle.cssとは別のCSSで、 テーマのCSSをいじらずに外観を編集する際に使用します
CSS エディターが CSS プリプロセッサ Sass・LESS に対応
WordPress.com では CSS エディタに便利な拡張機能を追加してくれる、CSS プリプロセッサの Sass と LESS に対応しました。 CSS（カスケーディング・スタイル・シート）は、コンテンツとその表示制御を分けるために便利なツールです。投稿者はコンテンツを書くことだけに集中でき、CSS に表示やフォーマットのルールを任せることできます。CSS はサイトの外観をカスタマイズするのにとても役に立ちますが、ただ、管理が煩雑になることもあります。 この解決方法として「CSS プリプロセッサ」があります。 （CSS をあまり使ったことがない方は、まずは CSS 入門チュートリアルをご覧ください。すでにセレクタについてよく理解している方は、以下を参考にスタイルをメンテナンスしやすくなる CSS プリプロセッサを活用してみてください） CSS プリプロセッサは CSS の拡張機能で、
超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン | TM Life
CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します. LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます. Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです. table of contents サンプル Step 00 まずは基本となるマークアップとスタイルを! Step 01 要素をボタンスタイル化する mixins を定義しよう Step 02 空だと意味が無い! 引数のパラメータを適応させよう Step 03 見た目をゴージャスに! 光沢を出そう Step 04 ブラッシュアップ! hover や action 時の変化 サンプル サンプルです. マ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
