Progateで「Sass」を勉強したのでそのアウトプット記事【その3】

HTML&CSS

こんにちは。

今日は天気予報で最高気温が6℃だったのでとても寒かったですね(><)

事務所内は暖房がきいていますが、それでも手先が冷たくて思うように動かず打ち間違えてしまいました(^^;

もう冬は飽きたので早く春になって欲しいです笑

 

では本題に入ります^^

一昨日から引き続きSassの復習です!

 

import

importとは外部のSassファイルを読み込むことです。

そのファイルの中の変数などが使えるようになります!

 

例えば変数をまとめたファイルを作って使いたいファイル内で読み込ませるという使い方があります。

これによって変数を記述した箇所が分かりやすいので開発現場でもよく使われるみたいですね(^○^)

使い方

まず、Sassファイルを作ります。

ここでは名前は 「_variables.scss」とします。

 

そのファイルの中で変数を定義しているとします。

$txt-color: #282828;

$tit-bc: #ccc;

 

そして読み込み先のファイル名が 「stylesheet.scss」とします。

ここに

 

@import“読み込み先のファル名”;

 

といった形で記述します!

ですので、

 

@import”_variables.scss”;

となります。

 

ちなみに「_(アンダースコア)」と「.scss(拡張子)」は省略できます!

 

 

そもそもSassをインストールする必要がある

そもそも、Sassってインストールしないと使えないんだということにびっくりしました!

先輩と一緒に自分が使っているMacにインストールしたのですがなかなか苦戦しました(^^;

 

Macの場合ターミナルという黒い画面からインストールする方法と、エディターの拡張機能を使う方法があるみたいです。

今回はターミナルから無事インストールできました。

最中にエラーがでまくったのですが、よくわからぬうちにできていました(^^;

 

Sassの本で有名なこちらのサイトを参考にインストールしました!

Mac 環境にSassをインストールする | Web制作者のためのSassの教科書 - 公式サポートサイト

 

Sassに関しては一旦今日で記事は終わりにしようと思います!

では今日はここまで〜〜!

 

コメント

タイトルとURLをコピーしました