CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法
CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法 CompassでCSSスプライトを作成する際に画像間に余白を取らないとRetina対応した際に奇数のサイズの画像などがあると表示が少しおかしくなります。 all-<map>-sprites(true);の場合は$<map>-spacing:10px;などのconfigで設定できるのですが、sprite-map()などでは余白が確保されません。 sprite-map()では以下のようにすると余白を取ることができます。 sprites: sprite-map("sprites/*.png", $spacing: 20px); 参考:Individual sprite spacing in the sprite-map function doesn't work · Issue #934 · chriseppste
実践Sass 後編
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次： 1. Sassとは／機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは／機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================
楽しいCSSこと「Sass」の3.1が異様な進化：Rails Hub情報局：エンジニアライフ
HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。 Hamlのほうは、今回はSassの分離が大きなトピックである以外は変化はありません。変化が大きいのは「Brainy Betty」と名付けられたSass 3.1.0のほうです（brainyって脳みそが詰まっていて頭が良いという意味ですね。変な名前を付ける人たちです……。Sass自体も、生意気な女という意味で使われる「sassy girl」にかけているんだ
Simple CSS color management with SASS | 12 Spokes
May 2, 2012 Simple CSS color management with SASS Chris How-to, SASS, Web Design & Development 0 When I first got my CSS on (did I really just say that?) back in 2006, managing color values in my style sheet was pretty simple: I had my colors for text, and then my colors for elements with solid backgrounds, and that was about it. If I had my act together, maybe I’d write a comment at the top of my
Semantic CSS Grids With SASS (bjorkoy.com)
You design websites, and since you’re brimming with empathy, you want to use a grid-based layout to ensure a minimum amount of confused users. Great! However, you also design a lot of websites, and find yourself doing the same operations for setting up a basic grid at each ⌘+N. Not good. The way to fix this is a sort of design framework. The problem with such a framework has often been mixing pres
Sassのリスト
Sassではいわゆる「配列」のような複数のデータを格納するリストを作れる……というのだけど使ったことなかった。リファレンスでもさらっと流されてるし、リストを使う@eachの説明でもベタに並べてあるだけで、どうやって作ってどうやって使うのかイメージできなかった。変数の値を空白区切りにしたらリストな変数になるということはどう考えてもリファレンスからは読み取れないと思う。 基本 特に難しいこともなく空白(かカンマ)区切りで指定するとリストになる。 $lists: foo bar buz; .test { property: $lists; } リストな変数であってもそのまま参照した場合は普通の変数と同じようにそのまま(空白区切りのまま)出力される。 .test { property: foo bar buz } リストの特定のインデックスの値を参照するにはnth()関数を使う。 .test {
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
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; // たくさんの指
博天堂手机网址_首页
01 多年振动筛设备制造经验 专注标准检验筛，食品振动筛，化工振动筛，粉末振动筛，振动料斗等设备研发制造。 02 强大的研发团队 专业的振动筛开发工程师，精心设计，确保每一款产品都与众不同。 03 规模大、产能高 公司自有1500平厂房、50多名员工,流水线模具生产，年产能达上百台。 04 快速生产 专业模具流水线作业，模块化生产，确保批量产品的快速加工。 05 知名企业首选合作伙伴 世界500强国家等知名企业的合作伙伴。 06 量身定制 我们还能根据客户所属需求，为您定制专属的振动筛解决方案。 新乡市博天堂手机网址专业振动机械有限公司（原新乡市专业振动机械厂）是生产振动筛分设备的专业企业，公司坐落于新乡市北环寺庄顶工业区，滨临京广铁路、107国道，距省会郑州70Km，地理位置优越，交通、通讯设施便利。是一家集振动设备、振动源研发、生产、销售、服务于一体的现代化企业。 公司拥有丰富的振动筛
【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1
シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。 まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1をDL（zip：約50kb） 実際のページを見る ページを見ても、あんまり意味が無いっすね。えぇ。 いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。 なので、一つの参考までにって感じでしょうか。 んでは、続きにて中身の説明なんぞをしていきます。 中身のご説
Sass&CompassでPath風のメニューを作ってみた - teppeis blog
2012/12/31 フォロー記事書きました: 1年前のSass/Compassを振り返ってみた みんな気になってしょうがないPathのアレを、Sass, Compass, CSS3 Animationsのお勉強をかねて作ってみました。Chrome, Safari, Firefox, IE10で動きます。 Demo: http://teppeis.github.com/menu-like-path/ Source: https://github.com/teppeis/menu-like-path 「CSSでPath風メニュー」っていうのは国内外ですでにたくさんあるので、気になったところなどSass&Compass寄りでいくつか書きます。 SCSSの記述量はCSSの約5分の1 今回作ったもので、SCSSで約300行（後述の自作ライブラリ含む）、コンパイル後はCSSで約1550行になりました
簡単に使える Compass のオススメ機能 - log
こんにちわ。 Gaji-Labo の @neotag です。今日は Less & Sass Advent calendar 2011 の24日目です。 アドベントカレンダーは乗り遅れるとネタ切れ危険ですね。 さて、 Compass という Sass 用の Framework がありまして。それがそこそこ便利なので、使い方が簡単なものをかいつまんでご紹介です。 http://compass-style.org/ インストール方法は下記のとおり。 $ gem install compass 目次 sass --watch のオプションをプロジェクトごとに管理 画像の高さと横幅を取得 Sprite を自動生成 開発用CSSと納品用CSSで画像の読み込み先を変更する 開発用と本番用で色々変えてみる ■その1 sass --watch のオプションをプロジェクトごとに管理 この記事を公開する前に確認
Sass で Singleton を実現し、安心してクラスを再利用する | nodot
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
Least – TOKI WOKI.
GitHub - jlong/sass-bootstrap-defunct: This project has been superceeded by an official Bootstrap Sass port. Please use:
Web Design Tips To Help You Succeed - Web Design
css2sass
Menu like Path