【Sassを覚えよう！Vol.9】変数と演算で効率的に
ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
Sass を今すぐ実務で使おうよ！ « NAVER Engineers' Blog
はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・！？ ぜんぜんそんなことないですよ！( ･`ω･´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします（個人の感想です）。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので（丸投げ）、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって？ 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、
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
Generate CSS Sprites on the Fly with Lemonade
Hi, I’m Nico Hagenburger I enjoy designing clean, simple websites and developing web applications in Ruby on Rails. Lemonade is deprecated from now on. I’m working on Compass Sprites with Chris Eppstein and Scott Davis from now on. Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration,
実践Sass 前編
17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
sass --watch したら Listen has fallen back to polling …とか言われたので / JeffreyFrancesco.org
sass --watch したら Listen has fallen back to polling …とか言われたので 公開日: 2012年5月15日 タグ: mac, sass, memo 以前作成した CSS（元は SCSS で書いてある）にいくつか追加と修正が必要になったので、久々に Tarminal から sass --watch したら、 WARNING: Listen has fallen back to polling, learn more at https://github.com/guard/listen#fallback. とか警告が出て、その状態で SCSS ファイルを変更しても CSS に変更が反映されなくなっていた。convert は普通に動作する様子。一応そこに書いてある URL に目を通してはみたけど、何がなんやら。涙 検索してみると、どうやら Windo
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する | CSS-EBLOG
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する カテゴリ：sass 2011年12月20日 22:45 この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。 sassを使った繰り返し処理の基本 sassにはプログラム言語と同じような処理が存在します。 その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。 単純な繰り返し処理 sassには繰り返し処理に使える文として、@each と @for があります。 JSなどではおなじみですね。 使い方も、他のプログラム言語のものと同じです。 @eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。 また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@function
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
http://sassmatic.com/
ちゃんとCSSを書くために - CSS/Sass設計の話
compass-style.org is almost here!
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
メモログ
実践Sass 後編
http://atnd.org/events/21919