こんにちは。beaglesoftの真鍋です。
CSSはデザインを定義するために利用するのですが、画面が複雑になればなるほど管理が難しくなります。特に、CSSでは変数の宣言やクラスのネストができないことがとても不便に感じられます。
そこで、ビルド処理を実行することでCSSを出力するようなCSSの拡張機能が幾つか作られました。その中でもRubyと親和性の高いSassについて試してみたのでまとめてみました。
参考にした書籍
今回はフロントエンドエンジニアのための現在とこれからの必須知識
- 作者: 斉藤祐也,水野隼登,谷拓樹,菅原のびすけ,林優一,古沢宏太
- 出版社/メーカー: マイナビ出版
- 発売日: 2016/01/28
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
Sassを利用するための準備
Sass: Syntactically Awesome Style SheetsはRubyGemsで提供されいてるのでGemのインストールを行います。
╭─ymanabe@Yoichiro-no-MacBook-Pro ~/projects/gulp_example2 ‹2.2.4› ‹master› ╰─$ gem install sass 130 ↵ Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing documentation for sass-3.4.22 Installing ri documentation for sass-3.4.22 Done installing documentation for sass after 5 seconds 1 gem installed
Sassへ変更するCSSを作成する
Sassを作成する前に通常のCSSを作成したいと思います。
.tittle1 {
color: #0f0f0f;
font-size: 20px;
}
.text1 {
color: #0f0f0f;
font-size: 16px;
}
/* 以下のURLを参考にしました。 */
/* CSSで作るツールチップ | Web’Notes http://webnonotes.com/css/tooltip/ */
div.tooltip1 {
color: #555;
display: inline-block; /* インライン要素化 */
border-bottom: dashed 1px #555; /* 下線を引く */
}
/* ツールチップ部分を隠す */
div.tooltip1 span {
display: none;
}
/* マウスオーバー */
div.tooltip1:hover {
position: relative;
color: #333;
}
/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
display: block; /* ボックス要素にする */
position: absolute; /* relativeからの絶対位置 */
top: 25px;
font-size: 90%;
color: #0f0f0f;
background-color: #5BB2C1;
width: 205px;
padding: 5px;
border-radius: 3px;
z-index: 100;
}
/* フキダシ部分を作成 */
div.tooltip1 span:before {
content: '';
display: block;
position: absolute; /* relativeからの絶対位置 */
height: 0;
width: 0;
top: -13px;
left: 15px;
border: 13px transparent solid;
border-right-width: 0;
border-left-color: #5BB2C1;
transform: rotate(270deg); /* 傾きをつける */
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
z-index: 100;
}
※このCSSファイルの作成ではtooltipの吹き出しをCSSで作るツールチップ | Web’Notesの内容を元に作成いたしました。（フォント色などは変更しています。）ありがとうございます。
また、あわせてこのCSSファイルを読み込むHTMLファイルを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GulpExample</title>
<link type="text/css" href="style/example.css" rel="stylesheet" />
</head>
<body>
<h1 class="title1">これはタイトル</h1>
<p class="text1">これはテキスト</p>
<div class="tooltip1">マウスを上にのせて下さい
<span>これはサンプルです</span>
</div>
</body>
</html>
この結果表示されるHTMLは以下のとおりとなります。
CSSをSassに変更する
次に作成したCSSをSassを利用して書き換えたいと思います。まずは単純にフォントカラーを変数にしてみます。
$text-font-color: #0f0f0f;
.tittle1{
color: $text-font-color;
font-size: 20px;
}
.text1{
color: $text-font-color;
font-size: 16px;
}
/* 以下のURLを参考にしました。 */
/* CSSで作るツールチップ | Web’Notes http://webnonotes.com/css/tooltip/ */
div.tooltip1{
color: $text-font-color;
display: inline-block; /* インライン要素化 */
border-bottom:dashed 1px $text-font-color; /* 下線を引く */
}
$tooltip-back-ground-color: #5BB2C1;
/* ツールチップ部分を隠す */
div.tooltip1 span {
display: none;
}
/* マウスオーバー */
div.tooltip1:hover {
position: relative;
color: #333;
}
/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
display: block; /* ボックス要素にする */
position: absolute; /* relativeからの絶対位置 */
top: 25px;
font-size: 90%;
color: $text-font-color;
background-color: $tooltip-back-ground-color;
width: 205px;
padding: 5px;
border-radius:3px;
z-index:100;
}
/* フキダシ部分を作成 */
div.tooltip1 span:before{
content:'';
display:block;
position:absolute; /* relativeからの絶対位置 */
height:0;
width:0;
top:-13px;
left:15px;
border:13px transparent solid;
border-right-width:0;
border-left-color:$tooltip-back-ground-color;
transform:rotate(270deg); /* 傾きをつける */
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
z-index:100;
}
今回は$text-font-color: #0f0f0f;と$tooltip-back-ground-color: #5BB2C1;を変数として宣言しました。
SassからCSSを生成する
SassからCSSを生成するには以下のコマンドを実行します。
sass [変換対象のSassファイル] [変換後のcssファイル]
ただ、一般的には--watchオプションを付けて変更を監視するようです。
sass --watch [変換対象のSassファイル] [変換後のcssファイル]
今回はとりあえずSassファイルをCSSファイルへ変換したいので--watchオプションは付けないで実行したいと思います。
╭─ymanabe@Yoichiro-no-MacBook-Pro ~/projects/gulp_example2/public/style ‹2.2.4› ‹master*› ╰─$ sass example.scss example_from_sass.css ╭─ymanabe@Yoichiro-no-MacBook-Pro ~/projects/gulp_example2/public/style ‹2.2.4› ‹master*› ╰─$ ll total 32 -rw-r--r-- 1 ymanabe staff 1.4K 4 7 10:09 example.css -rw-r--r-- 1 ymanabe staff 1.5K 4 7 10:12 example.scss -rw-r--r-- 1 ymanabe staff 1.4K 4 7 10:13 example_from_sass.css -rw-r--r-- 1 ymanabe staff 1.0K 4 7 10:13 example_from_sass.css.map
この通り、CSSファイルとSassとCSSのマッピングに関するmapファイルも作成されています。
生成されたファイルの内容を確認します。
@charset "UTF-8";
.tittle1 {
color: #0f0f0f;
font-size: 20px;
}
.text1 {
color: #0f0f0f;
font-size: 16px;
}
/* 以下のURLを参考にしました。 */
/* CSSで作るツールチップ | Web’Notes http://webnonotes.com/css/tooltip/ */
div.tooltip1 {
color: #0f0f0f;
display: inline-block;
/* インライン要素化 */
border-bottom: dashed 1px #0f0f0f;
/* 下線を引く */
}
/* ツールチップ部分を隠す */
div.tooltip1 span {
display: none;
}
/* マウスオーバー */
div.tooltip1:hover {
position: relative;
color: #333;
}
/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
display: block;
/* ボックス要素にする */
position: absolute;
/* relativeからの絶対位置 */
top: 25px;
font-size: 90%;
color: #0f0f0f;
background-color: #5BB2C1;
width: 205px;
padding: 5px;
border-radius: 3px;
z-index: 100;
}
/* フキダシ部分を作成 */
div.tooltip1 span:before {
content: '';
display: block;
position: absolute;
/* relativeからの絶対位置 */
height: 0;
width: 0;
top: -13px;
left: 15px;
border: 13px transparent solid;
border-right-width: 0;
border-left-color: #5BB2C1;
transform: rotate(270deg);
/* 傾きをつける */
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
z-index: 100;
}
/*# sourceMappingURL=example_from_sass.css.map */
この通り、たしかに変数が設定されたCSSファイルが作成されています。
まとめ
Sassをはじめて利用してみて、とっつきにくい印象があったのですが印象だけでとてもわかり易くそして使いやすいことがわかりました。次回以降はもう少しSassの機能について見ていきたいと思います。
ソースコード
今回のソースコードは以下のリポジトリにあります。参考にしてください。
https://github.com/yoichiro-manabe/gulp_example2
※リポジトリがgulp_example2となっているのですが、READMEにあるとおりgulpについて試していたリポジトリをそのまま利用したためです。綺麗にリポジトリを管理できていないのですが、そこは「ノリと勢いだけ」で頑張ったということでご容赦を。
