Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8694

Sassの概要・SassからCSSに変換する

$
0
0

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Sassの概要や特徴、メリットについて
・ SassからCSSに変換する方法

概要

・ Sass

CSSの拡張言語で、CSSをより効率的に書くことができ、変数を扱ったり計算を行うことができます。
Sassのロゴを書いてみました。分かる方にはとても馴染み深いと思います(?)

スクリーンショット 2020-12-30 10.33.22.png

Sassファイルの特徴

・ Sassは通常のCSSファイルに記述することはできず、反対にSassファイルにCSSを記述することができます。

・ Sassファイルを扱う拡張子は.sass.scssの2つがあり、記法がそれぞれ異なります。

・ Sass記法

Sassファイルでは最初に作られた記法で、波括弧やセミコロンが不要という特徴がありますが、CSSとの書き方に差があり、あまり普及されなかったそうです。

.containerpcolor:#333font-size:2rempadding:3remsmallcolor:#000font-size:.875rem

・ Scss記法

.sassの後に作られたのが.scssです。こちらはCSSに良く似た記法でSassの機能が使うことができ、今ではこちらの書き方が主流のようです。

.containerp{color:#333;font-size:2rem;padding:3rem;small{color:#000;font-size:.875rem;}}

Sassファイルを使うメリット

Sassを使うメリットとして、次の3点が挙げられます。

・ 記述の簡略化ができる

・ プログラムのような処理ができる

・ 同じ値を使い回すことができる

・ 記述の簡略化

CSSでは親の要素から対象要素までのセレクタを何度も記述する必要がありますが、Sassではネスト(入れ子構造)することで、同じ親のセレクタをまとめることができ、親子関係が分かりやすくなり、親要素を複数回記述しなくてもよくなります。

index.html
<divclass="block"><h1class="title">Hello world!!</h1><pclass="text">Sass is <span>Smokin' Sexy Style!!</span></p></div>

■ CSSの例

style.css
.block{background-color:#000;}.block.title{color:#FFF;font-size:70px;text-align:center;}.block.text{font-size:15px;color:#FFF;}.block.textspan{color:red;font-size:20px;}

■ Sassの例

style.scss
.block{background-color:#000;.title{color:#FFF;font-size:70px;text-align:center;}.text{font-size:15px;color:#FFF;span{color:red;font-size:20px;}}}

・ プログラムのような処理ができる & 同じ値を使い回すことができる

変数

Sassでは変数や条件分岐などのプログラムの処理を記述することができます。
例えば、よく使うピクセル数やカラーコードなどを変数として定義しておくことで、変数名で何度も使うことができ、記述量が減ってコードが見やすくなります。変数を定義するには、$変数名: 値;のように記述します。

$h2:25px;block{font-size:$h2;}
mixin

まとまったスタイルを定義する機能です。変数は値を定義しますが、mixinはスタイルを定義するものです。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。
mixinを定義するには、@mixin mixin名 (){}、呼び出す時は、@includeと記述します。

@mixintemplate(){content:'';display:block;clear:both;}.menu{@includetemplate();...

SassからCSSに変換する方法

方法は2つありまして、プラグインを使うか、Webサービスを使う方法です。

・ 方法① Visual Studio Codeのプラグイン『easy sass』を使う

.Sassファイルを作成して、ファイルに記述します。

style.scss
.test{padding:1rem0;background:#eee;a{color:#aaa;}}

Visual Studio Codeの左ツールバーの一番下の四角いマークをクリックし、検索欄にeasy sassと入力します。

スクリーンショット 2020-12-30 13.17.23.png

インストールをクリックします。

スクリーンショット 2020-12-30 13.20.14.png

※ Sassがインストールされていないと、.sassファイルで記述しても文字の色が変わりませんので、その場合は検索窓でSassと入力し、Sassをインストールして下さい。
Sassのロゴはs79ns画伯が書いたものが上にあるので、参考にして下さい。

easy sassがインストールされている状態で、先程記述したstyle.scssを保存すると、style.scssの内容がそのままcssファイルとして自動作成されます。
style.min.cssは、style.scssの内容が1行になっており、改行やスペースを省くことで、ファイルサイズが圧縮されています。こちらのファイルを使うことで、Webサイトの読み込みの高速化を図ることができます。
従って、どの様にコンパイルされているかの検証用としてはstyle.cssを、本番環境用のファイルはstyle.scssを使い、ファイルの使い分けをするのが望ましいと思います。

スクリーンショット 2020-12-30 13.30.39.png

・ 方法 ② Webサービス『SassMeister』を利用する

少しだけSassの機能を確認したい時に便利で、SassMeisterはWebでSassファイルをコンパイルしてくれます。

スクリーンショット 2020-12-30 14.03.13.png

また、上のメニューバーの『Sass』→『Sass』をクリックすると、.scssから.sassの記述に変換も行ってくれます。

スクリーンショット 2020-12-30 14.05.09.png

左側が.sassの記述に変換されました。

スクリーンショット 2020-12-30 14.08.28.png


Viewing all articles
Browse latest Browse all 8694

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>