scss- базовой грамматики

файл

СКС файл делится на два типа:

1. Часть файла, имя файла начинается с _, которые могут ссылаться несколько файлов, например, _part1.scss, _part2.scss.
2. Файлы могут быть .sass или .scss; page.sass, page.scss.

Использование @import файла импорта инструкции.

переменная

$ Символ стартовых переменных, например: $ по умолчанию цвет, $ шрифт -размер.
Значения переменных! End по умолчанию указывает значение по умолчанию. $ По умолчанию цвет :! # 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;
}

Но используя синтаксис селектора СКС потомок:

.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

вя Настройка глобальная дерзость, ссылки css.loaderOptions и передать параметры препроцессору Loader

нужен так настроить только глобальный Vue в main.scss может использовать весь стиль SCSS.