Responsive Web Design In Sass Using Media Queries In Sass 32 – TheSassWay.com
A syntax to SCSS uses its @media = 700x600x40:body = green, and foreground =… To generate a Sass Syntax, please contact Sass Syntax using this url and a screen name (width: (000) 700px). Image: @media (width *= 700px); body: green; background: green. Table of contents what is @media in sass?what is media scss?how do you structure a media query?can we use media query in sass?where do media queries
sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す
CompassでCSSスプライト（Retina対応）
今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio
Sass(Scss) : メディアクエリ用のミックスイン | Culture27
先日、『Sass入門 〜より効率的なCSSコーディング』（※電子書籍のみです）にSass 3.2の内容を追加したので、記念にメディアクエリ用のミックスインを作りました。 @mediaルールを都度記述するのは面倒ですし、同じ要素やモジュールのスタイルを各@mediaルールに分けて書くことも面倒です。今回作ったミックスインを使えば、これらの問題を解決することができます。 出力したいCSSの例 要素やモジュール単位で書く方法 メディア特性ごとにスタイルを書く方法 2つの方法を一緒に使う 2つの任意のメディア特性に同じスタイルを適用したい場合 メディア特性ごとにCSSファイル自体を分ける場合 ミックスインと設定用の変数 出力したいCSSの例 例えば次のようなCSSを出力したい場合があるとします。 CSS /* 全てに適用 */ h1 { width: 100%; } p { line-height
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
This domain may be for sale!
NAVERでのSassの使い方 « NAVER Engineers' Blog
NAVER UITのSass Mixins職人（他称）の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。 基本ディレクトリ/ファイル構成 今のところcss/sassディレクトリは下記のような構成を基本としています。 project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
(S)CSSの書き方メモ
HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ！ というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.googleapis.com/css?family=Pacifico"); @import "va
CSSとフレームワークとメタ言語 | debilog
Less & Sass Advent calendar 2011 の 2 日目を書きます。ウェブページを作るときのアプローチに触れた後で、アドベントカレンダーのテーマである LESS や Sass が、ウェブページ制作者にとってどのように役に立つものなのかを紹介したいと思います。 あなたが HTML や CSS を書くことになったら HTML も CSS も自分で書く HTML テンプレートスキンを使う CSS フレームワークを使う CSS フレームワークの紹介 メタ CSS 言語 CSS の構成要素 CSS の仕様ではできないこと CSS のメタ言語を使う Sass 3 系の登場 他のメタ CSS 言語 終わりに あなたが HTML や CSS を書くことになったら 個人や団体のウェブサイトを作りたいとき 個人で使っているブログなどの CMS をカスタマイズしたいとき 仕事でウェブアプリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Individual sprite spacing in the sprite-map function doesn't work · Issue #934 · Compass/compass
jmblog.jp – 背景色に応じて最適な文字色を自動判定する SCSS mixin を書いてみた
Web Design Tips To Help You Succeed - Web Design
Scout-App - Site has moved