はてなブックマーク

一覧に戻る « 前 次 » 第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';

■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; }

一覧に戻る « 前 次 » 第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