css

コードメモ / css

Sassってみよう!〜@for @while編〜

@for@while

今回は@for、@whileのループ処理についてです。
私が個人的に一番「Sassを使っていてよかった〜」としみじみ思う機能です。
cssだと大量にコピペして書いていたコードもループ処理を用いると数行の記述で済むので仕事が捗ります。
続きを読む

Sassってみよう!〜@import編〜

@import編

cssでもお馴染みの@importですが、Sassでは少しだけ使い方が異なります。

cssの場合、@importで指定したcssファイルはあくまで外部ファイルとしてリンクされたカタチで読み込まれますが、
Sassの場合は、@importで指定したscssファイルはコンパイルするとひとつのcssファイルとして書き出されます。
続きを読む

Sassってみよう!〜@mixin編〜

mixin編

今回は@mixin

@mixinはスタイルをまとめて定義することが出来る便利な機能です。
これだけみると前回ご紹介した@extendと似ているのですが、@mixinは引数を使えるという点と、@extendと違いセレクタがグルーピングされない、という点において違いがあります。

続きを読む

Sassってみよう!〜@extend編〜

@extend編

今回は@extendについてです。

@extendは指定したセレクタのスタイルを「継承」してくれる便利な機能です。これを使うと、見出し周りや表組み、ボタンなどの部品をcssのコード量を増やさずに、すっきりと効率よく管理できるようになります。その上、使い方はとても簡単なので、是非とも活用したい機能のひとつです。

続きを読む

Sassってみよう!〜コンパイル編〜

(※当記事ではSass = SCSSとしています。)
前回のインストール編に続き、今回はコンパイル編
そもそも前回、何のためにSassをインストールしたかと言えば「コンパイル」するためです。せっかくのScssも、cssにコンパイルしないとそのままでは使えないのです。そこで、いつものごとく簡単に備忘録してみました。
この記事では「ターミナル」「Dreamweaver」でのケースをご紹介します。
続きを読む

Sassってみよう!〜インストール編〜

Sassのインストールにちょっと手こずったので備忘録。
といっても、作業自体は5分もかからないので
Sassに興味がある方はこの機会にインストールだけでもしてみてはいかがでしょうか。
(※インストール編となっていますが、今後、続編を書くかは気分次第です(^_^;)
続きを読む

便利なEmmet

そんなにガシガシ使いこなしている訳ではないですが、
(効率を要求されるような仕事もしてないですし。)
やはり知っていると便利な「Emmet」
続きを読む

1 / 212