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

related

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

CSSアニメーションの基礎

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。 CSSアニメーションには「transition」と

フロントエンド

2020.03.19

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

jQueryの基礎

今回は、JavaScriptのライブラリのjQueryの基礎部分をまとめていこうと思います。最近ではjQueryは微妙と聞くこともありますが個人的には素のJSよりも触ってみて扱いやすかったので勉強のた

フロントエンド

2020.04.09

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き