coming soon…
Sassに関するdeg84のブックマーク (18)
-
deg84 2013/12/27
-
-
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
-
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
-
Hyper → Highspeed → Development
2013/3/25 http://atnd.org/events/37175 の資料です。Read less
-
-
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
-
Compassのスプライト画像生成を速くする - Qiita
皆さん、Sass/Compass使ってますか？ 僕はCSS Spriteが面倒だったので使い始めました。 で、Compassのドキュメントを見てたらこうゆう記述を発見しました。 Compass generates PNG files using a pure-ruby library called chunky_png. This library can be made faster by installing a simple C extension called oily_png. Add it to your Gemfile if you have one in your project: http://compass-style.org/help/tutorials/spriting/ ざっくり言うと、デフォルトでPNGファイル作成するときはRuby製の chunky_png 使う
-
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
-
-
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
-
IE 9以下に存在するセレクター数制限にはまった - Syoichi's Tumblr
carbonless: 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。MSにもページがある模様（@os0xさんに教えてもらった！）。 A webpage that uses CSS styles does not render correctly in Internet Explorerこの問題は SCSSだと割とカジュアルにセレクター数が増えるCSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため）との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指
-
【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1
シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。 まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1をDL（zip：約50kb） 実際のページを見る ページを見ても、あんまり意味が無いっすね。えぇ。 いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。 なので、一つの参考までにって感じでしょうか。 んでは、続きにて中身の説明なんぞをしていきます。 中身のご説
-
【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
気付けば、Vol.10！ ずいぶん長編になってまいりました。 何気に、既に去年1年分のエントリー数を超えてるだなんて！ 今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。 ・・・はい、後者です。 さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！ ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。 ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。 や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なん
-
Sass の @extend はどこがすごいのか
この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。 さて、まずは @extend の基本的な機能についてざっとおさらい。@extend される側として一連のスタイルを定義したセレクタがあり、そのセレクタを @extend で継承しつつプロパティを追加したりして、新しいセレクタを作ります: // SCSS // 継承元のセレクタ .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
-
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
-
hamashun me : Windows PC に Ruby と Sass を導入する方法
Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語（って言い方でいいのかな）であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。 Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC（XPとVistaで試しました）にSassを導入する手順を紹介します。 Rubyのインストール SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。 インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。 ruby -v ruby 1.9 1p430(2010-08-16 revision 28998) みたいのが出たらgemのアップデートに進
-
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました