Sass
Sassとはなにか？
概要
cssを効率的に書くための記法
2つの記法
---.sass
---.scss（主流はこっちに）
公式サイト
sasa-lang.com
code:scss
main {
width: 90%;
p {
font-sixw: 40px;
}
}
scssは字下げで対応できる（mainの中のpを簡単に指定）
sassをcssに変換するコマンド・・・sass scss/xxx.scss:css/xxx.css
scssを自動的に変更を反映させる
→ --watch scss.css
scssの基本
ネスト構造
親要素の中の子要素にスタイルを指定していくとき、そのブロックの中で字下げをしてあげる。何構造にでもできる。
入れ子の構造の中で「＆」が使われたら、その親要素のセレクタを表している
Sassで変数を使う
code:scss
$baseFontSize: 14px;
width: 90%;
p {
font-size: baseFontSize;
.sub {
font-size: baseFontSize -2px;
}
}
}
文字列を扱う
code:scss
$imgDir: "../img/";
width: 90;
background: url("#{$imgDir}bg.png");
↑../img/bg.png
色を扱う
code:scss
$brandColor: red;←cssの書き方と同じ
width: 90%;
p {
color: $brandColor
}
}
@if文を使う
code:scss
$debugMode: true;
$x: 10;
@if $debugMode == true {
coor: red;
} @else {
color: green;
}
p{
@if $x > 20 {color: yellow }
}
}
リスト（似たようなデータをまとめて管理）
code:scss
$animals: cat, dog, tiger;
@each $animal in $animals {
.#{$animal}-icon {background: url("#{$animal}.png"; }
}
関数を使う
code:scss
$totalWidth: 940px;
$columnWidth: 5;
@function getColumnWidth($width, $count){
$padding: 10px;
$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
@return $columnWidth;
}
.grid{
float: left;
width: getColumnWidth($totalWidth, $columnWidth);
}
Sassで別ファイルを管理するときは、「＿」で始まるファイル名にする（partialsと呼ばれる）
@importで読み込む
@mixinを使う
複数の設定をまとめて管理できるような機能
code:scss
@mixin round($radius){
border-radius: $radius;
}
.label {
font-size: 12px;
@include round(5px);
}
↑mixinは引数を持つ事ができる
@extend（継承）を使う
code:scss
.msg{
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
color: white;
}
.errorMsg{
@extend .msg;
background: red;
}
code:scss
// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');
module.exports = {
// モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
mode: 'development',
// エントリーポイントの設定
entry: {
main: './src/index.js'
},
// 出力の設定
output: {
// 出力ファイルのディレクトリ名
path: ${__dirname}/public,
// 出力ファイル名
filename: "main.js"
},
module: {
rules: [
{
//対象になるファイルの拡張子を設定する
test: /\.scss/,
//使用するローダーを定義する
use: [
"style-loader",
//style-loader・・・Add exports of a module as style to DOM
{
loader: "css-loader",
options: {
url: true,
importLoaders: 2
}
},
{
loader: "sass-loader",
}
]
},
{
test: /\.(gif|png|jpeg|svg)$/,
loader: "url-loader"
}
]
}
};
ローダー
→ローダーとは、画像やCSSといったJavaScript以外のファイルをJavaScriptで扱えるように変換したり、各ファイルに対してバンドル前に処理を実行する機能
Sassのwebpack.config.jsの設定
test:\/.css/,
Sassの対象になる（言い方が正しいかはわかんない、、、）ものの拡張子を設定してる
loader: "sass-loader"
拡張子が.sassか、.scssっていうファイルをJSとしてコンパイルするためのローダーを設定してる
css-loader
cssをJavaScriptとして読み込むためのもの
extract-text-webpack-plugin
ビルドしたJSファイルの中からStyleの部分をCSSファイルとして吐き出してくれるもの。（今回はCSSファイルとして成果物に吐き出してないからなくてもいけるかも？）
node-sass
Node.jsで使えるSass
sass-loader
.sass/.scssの拡張子のものをJavaScriptとして読み込むためのもの
style-loader
stylesheetをJavaScriptで使えるようにするためのローダー
stylelint
cssのコードにミスがなく（自分が設定したルール通りに）コードが書かれているかみてくれるもの
stylelint-config-recommended-scss
lintするルールをオンにする
url-loader
画像をJSファイルにバンドルするためのローダー
主に参考にしたサイト
config関連で参考に
loaderやplugin関連で参考に
loaderの詳しい説明に関して参考に
url-loaderやwebpackに関する基本的なところを参考に
style-loaderに関して参考に