SassチュートリアルSass＆Compassを使ったオンラインvCardの構築

今日、我々はSassについての議論を続けるつもりです、そしてこれは我々のSassシリーズの最後の部分になるでしょう。今回は、理論的なアプローチではなく、もう少し実用的になります。 SassとCompassを使ってオンラインのvCardを作成します。.

アイデアは、vCardは色とサイズのために、簡単に調整可能であるべきだということです。このプロセスでは、SassとCompassの機能をいくつか使用します。 変数、ミックスイン、オペレーション、セレクタの継承、ネストしたルール そして コンパスヘルパー. このシリーズの以前の投稿を見逃した場合は、続行する前にまずそれらの記事をご覧ください。.

計画とワイヤーフレーミング

SassとCompassで作業するとき, 計画は不可欠です. 私たちは通常、最終結果（ページやWebサイトなど）がどのようになるかについて、全体像を把握する必要があります。アイデアのためにBehanceやDribbbleのようないくつかのサイトを閲覧することは役に立つでしょう。以下の例のように、アイデアを紙にドラフトするか、ワイヤーフレームに組み立てることができます。.

上の画像からわかるように、私たちのvCardは含まれています 連絡先情報 'John'について - 写真のプロフィール、名前、メールアドレス、電話番号などのJohnに関する情報、および彼が誰であるか、または何をしているかについての簡単な説明。それが私たちの「バイオ」部門になります.

以下はソーシャルボタンの形での彼のソーシャルアイデンティティーです。これが私たちの「社会的」セクションになります.

資産の準備

コーディングを始める前に、準備をするための基本事項をいくつか紹介します。 SassとCompassがあなたのマシンにインストールされているはずです。.

（あなたがそれらをインストールしたかどうかわからない場合は、このコマンドを実行することができます sass -v または コンパス-v スルー コマンドプロンプトまたは端末 あるいは、GUIで作業したい場合は、Scout Appのようなアプリケーションをいつでも使用できます。）

また、ModernPictogramsのような場所から入手できるフォントアイコンやソーシャルメディアアイコンなどのいくつかのアセットも必要になります。.

最後に、このチュートリアルではコマンドプロンプト/ターミナルを使用しているので、次の2つのコマンドでディレクトリに移動してCompassプロジェクトを実行する必要があります。 コンパスinit そして コンパス時計.

HTMLマークアップ

下記は私達のvCardのHTMLマークアップです、それはかなり簡単です。すべてのセクションは論理的なHTML5タグで囲まれています

      ソリク・フィルダウス
 [email protected]
 （+62）1.2345.678.9
 Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Suspendisse dolor neque、pellentesque quisを選ぶ、convallisはamet tellusを座る。 Etiam et auctor arcu.
 
 
 
   フェイスブック
  Twitter
 グーグル+
 ドリブル

あなたが上で見ることができるように、社会的アイデンティティは「社会的」に含まれましたsectionはリスト要素内に構造化されているため、並べて表示することが簡単にできます。それぞれに、この規約に従ってクラス名が与えられています。 ソーシャルフェイスブック, ソーシャルツイッター, ソーシャルグーグル 等々.

コンパス設定

でいくつかの行をコメント解除して、コンパスを少し構成する必要があります。 config.rb 次のようにファイル

 ＃ここで好みの出力スタイルを選択できます（コマンドラインで上書きできます）。output_style =：extended＃コンパスヘルパー関数を介してアセットへの相対パスを有効にする。コメント解除：relative_assets = true＃セレクタの元の場所を表示するデバッグコメントを無効にします。コメント解除：line_comments = false

見つからない場合 config.rb ファイル、あなたはおそらくこのコマンドを実行していない コンパスinit プロジェクトディレクトリ内.

ファイルのインポート

コンパスを使用するので、インポートする必要があります。

 @import "コンパス";

私の個人的な好みは、出力がより一貫してレンダリングされるようにブラウザからデフォルトスタイルをリセットすることです。この場合、コンパスにはリセットモジュールがあります。このモジュールはEric MeyerのCSSリセットに基づいており、を使ってインポートすることができます。

 @import "コンパス/リセット";

しかし、私はNormalizeを使うのを好む Sass / Scssフォーマットもあります. ここでファイルをダウンロードして保存してください。 セス 作業ディレクトリとそれを私たちのスタイルシートにインポートする.

 @import "正規化";

おすすめ読書： CSSスタイルの優先度の確認

変数

スタイルシートには確かにいくつかの定数値があるので、それらを変数に格納し、以下の2つの変数によってvCardの基本色が定義されます。.

 $ base：#fff; $ dark：暗くします（$ base、10％）。

しながら $ width 下の変数は私たちのページの幅になります。それは他の要素サイズを定義するための基礎にもなります.

 $幅：500ピクセル。 $スペース：$幅/ 25。 // = 20ピクセル

そしてその $スペース ご覧のとおり、変数はvCardのデフォルトの間隔または列サイズになります。この例では、 20px;

コンパスには、画像サイズを検出するためのヘルパーもあります。次のように、この機能をピクチャプロファイルで使用します。

 $ img：image-width（ "me.jpg"）+（（$ space / 4）* 2）;

追加の添加の （（$ space / 4）* 2） 上記のコードでは、画像を囲む境界線を含む合計画像幅を計算します。フレームは通常2つの側面を持ちます。 上下左右, だからこそ、 除算結果 によって 2.

セレクタの継承

私たちのスタイルシートには、同じスタイル規則を持つセレクタがいくつかあるようです。コード内での繰り返しを避けるために、最初にこれらのスタイルを指定し、それらを次のように継承する必要があります。 @extend 必要に応じてディレクティブこの方法は、Sassでは、として知られています セレクタの継承, LESSにはない非常に便利な機能.

 .float-left float：left; box-sizing @include box-sizing（border-box）;。

スタイル

必要なことがすべて設定されたら、HTML文書の背景色から始めて、vCardをスタイル設定します。

 html 高さ：100％;背景色：$ base。

vCard

以下のスタイルはvCardラッパーを定義します。あなたが以前にLESSを使ったことがあれば、このコードはあなたにとってなじみがあり、要約するのが簡単です。.

 .vcard width：$ width;マージン：50px auto。背景色：暗くします（$ base、5％）。ボーダー：1pxソリッド$ダーク。 @include border-radius（3px）; ul パディング：0;マージン：0。 li list-style：none;

ラッパーの幅はからの値を継承します $ width 変数。背景色が濃い 5％ ベースカラーから、ボーダーカラーは暗くなりますが 10％. このカラーリングはSassカラー関数を使って達成されます.

vCardも持っています 3px Compass CSS 3 Mixinを使用して達成される丸い角の半径。 ボーダー半径（3ピクセル）.

バイオ課

このチュートリアルの最初の方で述べたように、vCardは2つのセクションに分けられます。以下のこれらのネストされたスタイルは、いくつかの詳細（名前、電子メール、および電話）を含む画像プロファイルを含む最初のセクションを定義します。.

 .bio border-bottom：1ピクセルx無地$ dark;パディング：$スペース。 @extend .boxサイズ。 img @extend.float-left;表示ブロック;ボーダー：（$ space / 4）solid #ffffff;  .detail @extend .float-left; @extend .boxサイズ。色：濃く（$ base、50％）;マージン：left：$ space;下：$ space / 2。 width：$ width  - （（$ space * 3）+ $ img）; li ＆：の前にwidth：$ space;高さ：$スペース。右マージン：$スペース。 font-family： "ModernPictogramsNormal"; ＆.name：content： "f";の前＆.email：content： "m";の前に＆.phone：content： "N";の前

上記のコードから、通知を受ける必要があると思われる点が1つあります。の幅 .細部 セレクタはこの式で指定されます $ width - （（$ space * 3）+ $ img）;.

この方程式は、詳細を動的に計算するために使用されます。 幅 vCardの合計幅からピクチャプロファイルの幅とスペース（余白と余白）を差し引くことによって.

社会課

以下のスタイルはvCardの2番目のセクション用です。ここでは普通のCSSと実際には違いはありませんが、それらは入れ子になっており、いくつかの値は変数で定義されています.

 .ソーシャル背景色：$暗い;幅：100％。パディング：$スペース。 @extend .boxサイズ。 ul text-align：center; li display：インラインブロック;幅：32ピクセル。高さ：32ピクセル。 テキスト装飾：なし。表示：インラインブロック。幅：100％。身長：100％。テキストインデント：100％。空白：ナラップ。オーバーフロー：隠れています。

このセクションでは、イメージスプライト手法を使用してソーシャルメディアのアイコンを表示します。コンパスには、その仕事をより速くするための機能があります。.

まず最初に、アイコンを特別なフォルダに置く必要があります - フォルダに名前を付けましょう。 /ソーシャル/, 例えば。スタイルシートに戻り、これらのアイコンを次のものと連結します。 @インポート ルール.

 @import "social / *。png";

の ソーシャル/ 上記は、アイコンを格納しているフォルダを参照してください。このフォルダは、画像フォルダ内にネストする必要があります。それでは、画像フォルダを見てみると、ランダムな文字で生成されたスプライト画像が表示されるはずです。 social-sc805f18607.png. この時点では、次の行を使ってスタイルを適用するまで、フロントエンドでは何も起こりません。.

 @すべての社会的精神を含む。

最終結果

最後に、すべての大変な作業を経て、次のような結果が得られます。

と思った場合 500px 幅が広すぎるので、値を変更するだけです。 $ width 変数 - 例えば, 350px - 残りは “魔法のように” 調整する。色変数を試すこともできます.

デモを見る
ソースをダウンロード

結論

このチュートリアルでは、SassとCompassを使って簡単なオンラインvCardを作成する方法を説明しました。これはほんの一例です。 SassとCompassは確かに強力ですが、時には必要ではありません。たとえば、数ページのWebサイトで作業していて、必要なスタイルの行数が少なくて済む場合は、SassとCompassの使用は過剰と見なされます。.

この記事はSassシリーズを締めくくるものであり、皆さんが楽しんでいただければ幸いです。この件に関して質問がある場合は、以下のコメントボックスに追加してください。.