Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Sassの基本
Translation of Sass: Sass Basics Sassを使えるようにするには、まずあなたのプロジェクトにSassをセットアップする必要があります。もし単にこの文書を読みに来ただけなら、そのまま読み進めてください。しかしながらまずSassをインストールすることを薦めます。インストール手順の解説を読めば、セットアップに必要なことは全て知ることができるでしょう。 プリプロセス 変数 ネスト パーシャル インポート ミックスイン 継承 演算子 プリプロセス CSSはただそれだけで楽しいものです。しかし、スタイルシートは大きく、より複雑に、そしてメンテナンスしづらくなっていってしまいます。プリプロセッサーが改善するのはそういったところです。SassはまだCSSにない機能、例えば変数やネスト、ミックスイン、そして継承などの機能を使えるようにし、CSSを再び楽しい物にしてくれます。
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL
Sassとかいろんな機能ありますよね、でもぶっちゃけそんなにいっぱい機能あっても使わないし( ･´ω･｀) 案外、//ダブスラでコメントアウトできるのが一番嬉しかったりもします今日このごろです。 @import というわけで、そんな僕がSassを使うと思ったのも@importを使いたかったからという至極単純な動機によるものです。@import自体は普通のCSSでも使えますが、パフォーマンス的に難がありまして、あんまり使う気になれない、かといってファイル管理はページ単位やコンポーネント単位でちゃんとやらないと後々めんどいなというジレンマもあります。 そうゆうわけで、なんで普通の@importがダメなのか説明します。 IEにおいて@importはページ下部に置いた<link>タグのような挙動をします。 Best Practices for Speeding Up Your Web Site Y
パフォーマンスからみる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のルール」というものがある。その中
Sassオレオレリファレンス
このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
[Sass] Sass 3.2で実装された新機能がヤバい
8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて ただでさえヤバイくらい高機能なSassがますますパワーアップした。 Sass信者のみなさんはすでにお使いでしょうか？ 晒したソースはオンラインコンパイラで試せます。 jsdo.itも対応してます。 @content これはmixinにブロックコンテンツを渡せるようにする合言葉。 mixinを作る時、渡されたブロックコンテンツを入れたい場所に@contentを配置すると @mixin iphone { @media only screen and (max-width: 480px) { @content; } } @includeするときに波括弧で括ってコンテンツを渡せるようになる。 @include iphone { body { color: red } } コンパイルすればこのとおり、@mixinの内容＋渡した
![[Sass] Sass 3.2で実装された新機能がヤバい](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台