Sassの記法

Pocket

Sassの記法

hirasawaさんのブログ【Sassを覚えよう!Vol.4】Sassの基本的な記述方法を参考にSassの記法をなぞっていきます。

bonesの理解が目標なので、Bonesのサイト で使用しているLESS or Sass CompilerのWinLESSを使います。

使用方法は、松風さんのブログMach3.laBlogを参照してください。

cssとlessのフォルダーを作成

c:\
└─CSSフォルダー
   └─lessフォルダー

lessファイルコンパイル

としたmain.lessファイルを作成しlessフォルダーに入れる。

Winlessツールにlessフォルダーを登録する。
右下のCompileボタンを押す。
cssフォルダー内にmain.cssファイル(下記)が作成される。

例1

上をheader.lessとしてCompileすると、下記header.cssが作成される。

例2 &親セレクタの参照

Compileすると下のcssが出力される(minify offの場合)

例3 &親セレクタの参照

Compileすると下のcssが出力される(minify offの場合)

例4コメント

Compileすると下のcssが出力される(minify offの場合)

例5変数 – Variables

Compileすると下のcssが出力される(minify offの場合)

例6

Compileすると下のcssが出力される(minify offの場合)

前へ戻る 次へ進む

こちらの方のサイトがお勧めです。bonesの特徴を押さえるをよんだらよくわかりました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする