概要
SassはCSSを効率的に書くための記法
Sassには2つの記法がある
- SASS(拡張子は.sass)
- SCSS(拡張子は.scss)
SASSとSCSSで書き方の違いがある例
SASSの場合
.div
.container
color: red
SCSSの場合
.div {
.container {
color: red;
}
}
SASSの方が最初に作られたが、デザイナーに不評だったこともありCSSっぽいSCSSが現在の主流となっているので本記事はSCSSの記法をまとめることとする
Sassの導入方法(Mac)
Sassを動かすにはrubyが必要なのであらかじめ入れておく
gemを使ってSassをインストールする
$ sudo gem update --system $ sudo gem install sass
Sass利用の流れ
① SCSS(.scss)ファイルを作成
② 作成したファイルに対してsassプログラムを噛ませるとCSSファイルが作成される
例として以下の内容でsample.scssを用意する
#main {
width: 90%;
p {
font-size: 14px;
}
}
これをsassコマンドを噛ませるとcssに変換してくれる
// --style expandedはインデントを整形するオプション
$ sass --style expanded sample.scss
#main {
width: 90%;
}
#main p {
font-size: 14px;
}
cssファイルとして保存を行う場合
$ sass --style expanded sample.scss:sample.css
変更を監視する
scssファイルに変更があった時にリアルタイムに.cssにも反映させる
$ sass --style expanded --watch sample.scss:sample.css >>> Sass is watching for changes. Press Ctrl-C to stop. (変更を終了したい場合はCtrl+Cを押す)
SCSSの書き方
ホバーの書き方
a {
text-decoration: none;
// &は親要素(今回はa)のセレクタを表す
&:hover {
font-weight: bold;
}
}
変数の使い方
変数のデータ型としては以下の5つが存在する
- 数値
- 文字列
- 真偽
- 色
- リスト
変数やif文を使っている例
$fontSize: 14px;
$imgDir: "../img/";
$mainColor: red;
$SubColor: rgba(255,0,0,0.9);
$debugMode: true;
#main {
font-size: $fontSize - 2px;
background: url($imgDir + "sample.png");
// 以下の書き方でも可
// background: url("#{$imgDir}sample.png");
color: $mainColor;
// 比較演算子は== != < > <= >=などが使える
@if $debugMode == true {
font-weight: bold;
} @else {
font-weight: nomal;
}
}
上記のSCSSはsassを通すと以下のように変換される
#main {
font-size: 12px;
background: url("../img/bg.png");
color: red;
font-weight: bold;
}
ループ
// ループ for
@for $i from 1 through 2 {
.xa#{$i} { font-size: #{$i}px; }
}
// ループ while
$i: 5;
@while $i < 7 {
.xb#{$i} { font-size: #{$i}px; }
$i: $i + 1;
}
cssに変換した結果↓
.xa1 {
font-size: 1px;
}
.xa2 {
font-size: 2px;
}
.xb5 {
font-size: 5px;
}
.xb6 {
font-size: 6px;
}
リスト
$items: sample1, sample2;
@each $item in $items {
.#{$item}-label { background: url(../img/#{$item}_bg.png) 0 0 no-repeat; }
}
cssに変換した結果↓
.sample1-label {
background: url(../img/sample1_bg.png) 0 0 no-repeat;
}
.sample2-label {
background: url(../img/sample2_bg.png) 0 0 no-repeat;
}
マップ
Sass v3.3から実装された機能
$siteColors: (
info: #aaaaaa,
warning: #ffc107,
danger: #dc3545
);
// eachを使う方法
@each $key, $color in $siteColors {
.#{$key} {
background-color: $color;
}
}
// 単体で使う方法
a {
color: map-get($siteColors, 'info');
}
cssに変換した結果↓
.info {
background-color: #aaaaaa;
}
.warning {
background-color: #ffc107;
}
.danger {
background-color: #dc3545;
}
a {
color: #aaaaaa;
}
関数
$siteWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count) {
$padding: 5px;
$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
@return $columnWidth;
}
.grid {
float: left;
width: getColumnWidth($siteWidth, $columnCount);
}
cssに変換した結果↓
.grid {
float: left;
width: 184px;
}
デバッグ
printデバッグみたいに、@debugをするとビルド時にデバッグログを出してくれる
@function getWidth($hoge) {
@debug $hoge;
@return $hoge;
}
.sample {
width: getWidth(1px);
}
デバッグログが出力される例
$ scss --style expanded a.scss a.scss:2 DEBUG: 1px
別ファイルに分ける方法
_で始まるファイル名にする必要がある、この分割したファイルをpartialと呼ぶ
- main.scss
- _settings.scss
- _functions.scss
上記のように分割したいとしてmain.scssでpartialを読み込む方法
@import "settings"; @import "functions";
mixinについて
似たようなCSS設定をまとめることができる
@mixin font {
font-size: 12px;
font-weight: bold;
}
.label {
color: red;
@include font;
}
cssに変換した結果↓
.label {
color: red;
font-size: 12px;
font-weight: bold;
}
引数も設定できる
// 初期値12pxとしている例
@mixin font($size:12px) {
font-size: $size;
font-weight: bold;
}
.label {
color: red;
@include font(18px);
}
結果は省略
extend(継承)について
スタイルを継承する
.msg {
font-size: 12px;
font-weight: bold;
}
.errorMsg {
@extend .msg;
color: red;
}
.warningMsg {
@extend .msg;
color: orange;
}
cssに変換した結果↓
.msg, .errorMsg, .warningMsg {
font-size: 12px;
font-weight: bold;
}
.errorMsg {
color: red;
}
.warningMsg {
color: orange;
}
mixinとの違い
- mixinの場合だと共通部分がerrorMsg, warningMsgそれぞれ重複して書き込まれてしまう
- 継承していることを明示的に記述できるのでわかりやすい
Nuxt.jsでSCSSを使う
個人でNuxt.jsを使うことがあって、SCSSで実装してみようと思ったのでついでにメモ
まずはnuxt.jsのソースコードを準備
$ yarn global add vue-cli $ vue init nuxt-community/starter-template sass_sample $ cd sass_sample $ yarn install $ yarn dev
http://localhost:3000/ でNuxtのページが見れるようになったはず
この状態で以下の修正を加える
$ yarn add -D node-sass sass-loader $ vim pages/index.vue - <style> + <style lang="scss">
styleに「lang=”scss”」と記述するとscssが記述できる
コメントを書く
コメント一覧