kokeblog

Sassの基礎

  • 2020年05月31日
  • 前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用できますが、今回は基本的なことを記事でまとめていきます。

    sass記法・scss記法

    Sassにはsass記法とscss記法があります。どちらも出力されるCSSは同じですが書き方は結構違います。

    sass記法

    sass記法はもともとSassで使われていた記法です。ファイルの拡張子は.sassになります。sass記法はCSSではおなじみの{}などを使わずにインデントのみで書いていきます。実際に書くと以下のような感じです。

    後ろにセミコロンなどはつけなくてもOKです。なんだかいつもの書き方とは明らかに違って、なじみのない感じがしますね~

    scss記法

    scss記法は先ほどのsassがあまり慣れないなと感じる人には便利な書き方になっています。ファイルの拡張子は.scssになります。通常のCSSと互換性があり、CSSとscssを混ぜて記述しても問題なくコンパイルできます。sass記法とは違って{}や;が必要です。実際に書くと下記のような感じです。

    少しいつもの書き方とは違いますがまだscss記法のほうがなじみがあって書きやすそうですよね!scss記法が後に作られたらしく、現在はこちらが主流の書き方になっています。私もscss記法でやっていこうかなと思います。

    sassでできること

    sassではただ入れ子にして書けるだけでなくいろいろとできることが多くなります。いろいろと機能があるみたいなので、今回はよく使いそうなものを数個まとめていこうと思います。

    変数

    sassではJavaScriptなどのプログラミング言語のように変数を使うことができます。サイトの全体で使うものを最初にあらかじめ宣言しておいて使っていく感じですね。下記のような感じで書きます。

    一番前に$を書くと変数として扱えます。全体で使うようなものを変数に入れておけばちょっと色を変えたりしたいときにすぐに変えれるので、修正がめちゃくちゃしやすいですね!

    演算

    同じ単位同士で四則演算もできるみたいですね。小数点や変数もつかえます。いつもの四則演算と同じで+、-、*、/を使います。

    @mixin(ミックスイン)

    便利な機能として@mixin(ミックスイン)というものがあります。この機能はあらかめてCSSを定義して別の場所で再利用できます。実際に書くと下記のようになります。

    最初に@mixin textでCSSを指定してpに@inclod text;で再利用しています。このままほかの場所でも再利用できるので便利ですね!

    まとめ

    今回はSassの基本的な書き方、使い方についてまとめました。通常のCSSに馴染んでいるのでなかなか慣れるまでは難しそうですが変数であったりいろいろと便利な機能が多いので使いこなせるようになっていきたいなと思います。私はデザイナー志望ですがデザイナーもコーディングできるようになるべきみたいなこともよく聞きますしね。今後はSassでCSSを書いていこうと思います。

    Pocket

    関連記事

    フォーム作成の備忘録

    CSSアニメーションの基礎

    jQueryでよくあるフェードインを作る

    jQueryの基礎

    カテゴリー