ウェブパ[web制作・ホームページ制作]

CSSの悩みはSassで解決!|ウェブパは神戸・大阪をはじめ全国対応のWebサイト(ホームページ)制作パックプランです。

電話番号 078-333-9333

に関する画像

線画像
トップ > インフォメーション > BLOG > CSSの悩みはSassで解決!

に関するタイトル画像

線画像

2017.05.31

BLOG

CSSの悩みはSassで解決!

この記事をシェアする

こんにちは。kurofuneです。
もう使われてる方もけっこうおられるかと思いますが、本編ではSassについてサクッとご紹介したいと思います。
まず、なぜSassを使うのか。
必要はあるのか?
CSSがあるのだから。わざわざそんなもの覚えるのは大変じゃないか。
私も思いました。
しかし、まだ私も使いはじめて日が浅いんですが、「果てしなく便利なんだ!」って感じました。
是非、まだCSSで頑張ってる方がおられたらSassの便利さを一度見ていただければ幸いです。


目次


・Sassとは
・ネスト
・継承
・変数
・配列と繰り返し(each)
mixin(自分で設定を自由に作れる!)

 

Sassとは

SASS(.sass)SCSS(.scss)SassにはSASS文法とSCSS文法の2種類がある簡単に訳すと素晴らしいスタイルシートSyntactically Awesome StyleSheetSass


Sassを使う前に


●SassはRubyで動かす仕組みになっているので、コンパイルしてCSSを生成する必要があるんですね。
DW(CC)を使ってる方は、Rubyをインストールしなくてもすぐに使えるみたいです。

●日本語のファイル名(Windowsのユーザーネームに日本語を付けている方なんかも)では、Sassが上手く動かないので必ずファイル名はローマ字で作成して下さい。

 

ネスト

ネストとは入れ子構造のことです。
CSSを書く時くろうするのが・・・
liやaに指定するにもその都度親要素のクラス名から記述しないといけないですよね?
Sassで記述する時は、ネスト構造を活用するので何度も親要素のクラス名を記述しなくてもOKなんですね。

 

継承

継承はその名の通り、同じ指定を別のクラスでも引用することができちゃうんです。

 

変数

変数を使うことで、各指定に名前をつけるものだと考えて下さい。
例えば、繰り返し出て来るimageのパスの記述。ファイル名を確認するの面倒くさいと思ったことはありませんか?

CSSだと…

 

Sassなら!

 

配列を使って繰り返し(@each)


配列で各設定に名前を付け、繰り返し設定する必要のあるnav部分の設定やタイトル部分でデザインに使えますよ。

CSSだと…

 

Sassなら!

 

mixin(自分で設定を自由に作れる!)

配列で各設定に名前を付け、繰り返し設定する必要のあるnav部分の設定やタイトル部分でデザインに使えますよ。

CSSだと…

 

Sassなら!

 

予めよく使う指定をmixinで作っておいて、使いたい時に下記のように記述すればOK!

 

 

最後に

いかがでしたか?
最初は、少し戸惑うかもしれませんが、一度規則を覚えてしまえば、コードをシンプルに記述できるので修正や変更の時も快適になりますよ!
気になった方は是非一度使ってみて下さいね!

 

 

 

edited by:kurofune

トップに戻る