サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
book.scss.jp
.box { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } // .box で使ったスタイルを継承 .item { @extend .box; } .box, .item { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } .btnBase { text-align: center; margin: 0 0 10px; a { display: block; padding: 10px 20px; background: #999; color: #fff; &:hover { background: #ccc; color: #333; } } } .imgL { float: left; margin-right: 15px; } @import
一覧に戻る « 前 次 » 第2章 Sassの利用環境を整えよう 2-3 Sassを最新版にアップデートしよう Rubyがインストールされているか確認する(バージョン確認)
@import url("main.css"); @import url(main.css); @import "main.css"; @import 'main.css'; /* メディアタイプの指定が有る場合 */ @import "main.css" projection, tv; @import url("main.scss"); @import url(main.scss); @import "main.scss"; @import 'main.scss';
一覧に戻る « 前 次 » 第6章 Sassを更に便利にする Compass 6-5 Compassの関数(Image Helpers) 画像関連の関数 画像のパスを補完をする(URL Helpers)
■RGB形式の色を操作する関数 ・rgb($red, $green, $blue) 10進数または%指定のRGB値を16進数のRGB値に変換します。 --------------------- ▼Sass .example { color: rgb(100,254,10); color: rgb(10%,5%,72%); } ------ ▼CSS(コンパイル後) .example { color: #64fe0a; color: #190cb7; } --------------------- ・rgba($red, $green, $blue, $alpha) RGBA値を10進数のRGBA値に変換します。CSSだと透明度付きの場合16進数で指定できませんが、16進数のRGB値を指定しても10進数に変換してくれます。また、キーワードも変換してくれます。 ----------------
.boxA { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
ここでは、Win,Macともに最近ユーザーが激増している「Sublime Text」でSassを快適に使えるようにするための、設定例を紹介します。 この設定は、著者の森田がSassのコーディングをする時に使っている設定(2013年8月現在)になりますので、あくまでも一つの参考として読んで頂き、使いづらいと感じる部分は、自分なりにカスタマイズしてより使いやすいエディタにしましょう。 キャプチャーはMacで撮っておりますが、Windowsも同じやり方で設定できます。 Sass用の設定を追加 まずは、SublimeTextを起動します。 SublimeTextを起動した状態 まず、機能を拡張するためにパッケージコントロールをインストールします。「Sublime Package Control」のサイトへアクセスしましょう。Installationページに記載されているソースをコピーします。 バー
一覧に戻る « 前 次 » 第2章 Sassの利用環境を整えよう 2-7 インストールや実行中にエラーが起こった場合の対処法 Macでsassのインストールができない ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /usr/bin directory. ERROR: While executing gem ... (Gem::RemoteSourceException) HTTP Response 302 fetching http://gems.rubyforge.org/yaml
#main { width: 600px; p { margin: 0 0 1em; em { color: #f00; } } small { font-size: small; } }
書籍内で出てきたURLや紹介したサイトなどの一覧です。 第1章 Sassのキホン Sassとは? Sassの公式サイト LESSの公式サイト Stylusの公式サイト PCSSの公式サイト Rooleの公式サイト TASSの公式サイト CSS Crushの公式サイト Sassを導入する前のギモンや不安 公式サイトの翻訳 - enja-oss/Sass · GitHub なにはともあれSassを触ってみよう Try Online - Sass SassMeister | The Sass Playground! jsdo.it Create a new Fiddle - jsFiddle Pens picked by the Editors of CodePen HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck 第2章 Sa
一覧に戻る « 前 次 » 第2章 Sassの利用環境を整えよう 2-2 Mac 環境にSassをインストールする Rubyがインストールされているか確認する(バージョン確認)
一覧に戻る « 前 次 » 第4章 高度な機能を覚えてSassを使いこなそう 4-2 柔軟なスタイルの定義が可能なミックスイン(@mixin) ミックスインの基本
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル/シェルスクリプトで簡単にコマンドを実行する GUI(Koala)で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト(Nested Roles) 親セレクタの参照 &(アンパサンド) プロパティのネスト(Nested P
このサイトは、2013年9月13日に発売した、書籍「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」の公式サポートサイトです。 2017年9月15日に改訂2版も発売しました! 改訂2版の発売に伴って、初版のサポートは終了させて頂きます。
一覧に戻る « 前 次 » 第5章 現場で使える実践Sassコーディング 5-4 スマホ・マルチデバイスで使える スマホサイトでよく見る、リストの矢印をミックスインで管理する $setPrefix: -webkit-, -moz-, -o-, null; // リンクリスト用の→矢印 @mixin linkIcon($color: #333){ &:before { content: ""; position: absolute; top: 50%; right: 15px; width: 10px; height: 10px; margin-top: -7px; border-top: 3px solid $color; border-right: 3px solid $color; @each $prefix in $setPrefix { #{$prefix}transform: r
このページを最初にブックマークしてみませんか?
『Web制作者のためのSassの教科書 - 公式サポートサイト』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く