scss-基本的な文法

ファイル

SCSSファイルは2種類に分けられます。

1. ファイルの一部は、ファイル名には、複数のファイルから参照できるよう_で始まる;例えば_part1.scss、_part2.scssため。
2. page.sass、page.scss;ファイルが.sassまたは.scssことができます。

命令のインポートファイル@import使用。

変数

スタート変数の$記号;例：$デフォルト色、$フォント -size。
変数値！エンドデフォルトでは、デフォルト値を示します。$デフォルト色:!＃333デフォルト;。

ミキサー

ミキサーを使用して定義@Mixin、ミキサ@includeコールを使用。
例えば：

@mixin button{
	width:100px;
	height:80px;
}

.a-button{
	@include button
}

最終的に解決されます。

.a-button{
	width:100px;
	height:80px;
}

もちろん、ミキサパラメータであってもよく、パラメータは、例えば、デフォルト値を設定してもよいです。

@mixin button-size($width:100px,$height:80px){
	width:$width;
	height:$height;
}

.a-button{
	@include button(200px,160px)
}

最終的に解決されます。

.a-button{
	width:200px;
	height:160px;
}

ネストされた構文

あなたは、子孫のセレクターを指定するには、ネストされた構文を使用することができます。
このようなネイティブの使用の子孫セレクタCSS：

.a{
	background-color:#666;
}
.a .b{
	background-color:#666;
}
.a .b .c{
	background-color:#666;
}
.a .b .c .d{
	background-color:#666;
}

しかし、SCSS使用して子孫セレクタの構文は次のとおりです。

.a{
	background-color:#666;
	.b{
		background-color:#666;
		.c{
			background-color:#666;
			.d{
				background-color:#666;
			}
		}
	}
}

このことを回避するには、書き込みセレクタに何度も繰り返しました。
親＆セレクタは
、必要に親＆セレクターを使用する際の擬似クラスセレクタを定義します。

a-input{
	width:100px;
	height:80px;
	&:hover{
		background:gray;
	}
	&:focus{
		background:white;
	}
}

正しい姿勢VUEを使用します

VUEのconfigureグローバルSASS、参照css.loaderOptionsとローダがプリプロセッサにオプションを渡す

ので、唯一main.scssでグローバルVUEを設定する必要がありますが、すべてのSCSSスタイルを使用することができます。