こんにちは、田中真奈美( @momo29_aus )です。
この記事はTwitterなど見かけた有識者の知識や、職業訓練校で学んだことなどをまとめた「Sass」の自分用メモです。
Sassの種類
SASS記法とSCSS記法と2種類ある
⇒SCSS記法「style.scss」がわかりやすいはず
※この記事ではSCSS記法についてまとめています
SCSSでの記述(例)
@charset "UTF-8";
@import "_reset.scss"; // @importを使ってファイルを読み込む
// 変数の設定
// mixinの設定
②@importを使ってファイルを読み込む
③変数を設定する
④mixinを設定する
変数の設定
// 変数の設定
$main-color: #xxx;
$unit: 8px;
$point-tablet: 979px;
$point-lsp: 640px;
$point-sp: 480px;
mixin
// mixin
@mixin tablet {
@media ( max-width: $point-tablet ) {
@content;
}
}
@mixin lsp {
@media ( max-width: $point-lsp ) {
@content;
}
}
@mixin sp {
@media ( max-width: $point-sp ) {
@content;
}
}
具体的な使い方
// ex
header {
width: 100%;
border-bottom: 4px solid $main-color;
}
.g-nav a {
display: block;
padding: 10px 20px;
color: $main-color;
@include sp {
padding: 10px 0;
font-size: 14px;
text-align: center;
}
&:hover {
color: #xxx;
}
}
(中略)
&>a {
display: block;
padding: $unit*2;
color: #xxx;
@include lsp {
padding: $unit*2;
text-align: center;
font-size: 14px;
}
&:hover {
text-decoration: underline;
}
}
パーシャルファイルとは?
_(アンダースコア)をファイルの前につけることでパーシャルファイル化することができます
@importを使って複数のファイルを同時に読み込める
@import機能を使う場合、importで読み込むファイルは、コンパイルする必要はないのでパーシャルファイルにする
複数のパーシャルファイルを読み込む場合は読み込む順番に気をつける
Sassを使う準備( VS Code 、Live Sass Compilerでの設定 )
設定ファイルの記述を変更することで、コンパイルするCSSファイルの「記述形式」/「CSSの拡張子」/「CSSファイルの保存場所」などを設定できます。
VScodeの拡張機能→Live Sass Compilerの設定(歯車マーク)→拡張機能の設定
下記の記述を変更します。
"liveSassCompile.settings.formats": [
{
"format" : "compresed",
"extensitionName" : ".css",
"savePath" : "~/../css"
}
]
format:compressed→圧縮されてコンパイルされる
expanded→圧縮されずにコンパイルされる
(他にもnested, compactなどが設定できます。)
extensitionName:コンパイル後のファイルの拡張子を設定します
savePath:コンパイル後のファイルをどの階層に置くか、フォルダ名を何にするか設定します
“../css”にしておけば、SCSSフォルダと同じ階層にCSSファルダがつくられて、その中にstyle.cssが生成されます
Sassの使い方(コンパイルの仕方)
②「Watch Sass」を押してコンパイルする
③コンパイルされたCSSファイル(style.css)をいつものようにhead内のリンクで読み込む
フォルダの構造
VScodeでは、Live Sass Compilerを設定することでCSSフォルダやstyle.cssが「Watch Sass」を押すことで自動生成されます。
階層はこんな感じです↓
上記画像内で自分で作る必要があるのは、
style.scssファイルとそれを入れるSCSSフォルダ、それとindex.htmlです。
もちろん、フォルダ名やファイル名は任意で決められます。
コメント