Add stylelint for scss-linting, fix scss-files by scss-linting standards

.stylelintrc

+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "selector-class-pattern": null,
+    "scss/selector-no-redundant-nesting-selector": null,
+    "scss/dollar-variable-pattern": null,
+    "property-no-vendor-prefix": null
+  },
+  "ignoreFiles": ["builds/**", "**/reset.scss"]
+}

index.html

@@ -33,7 +33,7 @@
 			</ul>
 		</nav>
 	</header>
-	<menu id="menu">
+	<menu id="menu" class="menu">
 		<a href="#about"><span>О компании</span></a>
 		<a href="#products"><span>Продукты</span></a>
 		<a href="#services"><span>Услуги</span></a>

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "webpack-dev-server --open --host 91.232.225.11 --port 17001 --mode development",
     "lint": "npx eslint src/js/*.js",
+    "stylelint": "stylelint 'src/**/*.scss'",
     "build": "webpack --mode production"
   },
   "browserslist": [
@@ -31,8 +32,13 @@
     "postcss-loader": "^3.0.0",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
+    "stylelint": "^13.2.0",
+    "stylelint-webpack-plugin": "^1.2.3",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.2"
+  },
+  "dependencies": {
+    "stylelint-config-sass-guidelines": "^7.0.0"
   }
 }

src/scss/fonts/fonts.scss

 /* This stylesheet generated by Transfonter (https://transfonter.org) on October 5, 2017 10:21 PM */
 
 @font-face {
-	font-family: 'FuturaDemiC';
-	src: url('./fonts/FuturaDemiC.eot');
-	src: local('Futura Demi Cyrillic'), local('FuturaDemiC'),
-		url('./fonts/FuturaDemiC.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaDemiC.woff') format('woff'),
-		url('./fonts/FuturaDemiC.ttf') format('truetype');
-	font-weight: normal;
-	font-style: normal;
+  font-family: 'FuturaDemiC';
+  font-style: normal;
+  font-weight: normal;
+  src: url('./fonts/FuturaDemiC.eot');
+  src: local('Futura Demi Cyrillic'), local('FuturaDemiC'),
+    url('./fonts/FuturaDemiC.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaDemiC.woff') format('woff'),
+    url('./fonts/FuturaDemiC.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaMediumC';
-	src: url('./fonts/FuturaMediumC.eot');
-	src: local('Futura Medium Cyrillic'), local('FuturaMediumC'),
-		url('./fonts/FuturaMediumC.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaMediumC.woff') format('woff'),
-		url('./fonts/FuturaMediumC.ttf') format('truetype');
-	font-weight: 500;
-	font-style: normal;
+  font-family: 'FuturaMediumC';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/FuturaMediumC.eot');
+  src: local('Futura Medium Cyrillic'), local('FuturaMediumC'),
+    url('./fonts/FuturaMediumC.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaMediumC.woff') format('woff'),
+    url('./fonts/FuturaMediumC.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaLightC';
-	src: url('./fonts/FuturaLightC-Italic.eot');
-	src: local('Futura Light Italic Cyrillic'), local('FuturaLightC-Italic'),
-		url('./fonts/FuturaLightC-Italic.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaLightC-Italic.woff') format('woff'),
-		url('./fonts/FuturaLightC-Italic.ttf') format('truetype');
-	font-weight: 300;
-	font-style: italic;
+  font-family: 'FuturaLightC';
+  font-style: italic;
+  font-weight: 300;
+  src: url('./fonts/FuturaLightC-Italic.eot');
+  src: local('Futura Light Italic Cyrillic'), local('FuturaLightC-Italic'),
+    url('./fonts/FuturaLightC-Italic.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaLightC-Italic.woff') format('woff'),
+    url('./fonts/FuturaLightC-Italic.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaMediumC';
-	src: url('./fonts/FuturaMediumC-Italic.eot');
-	src: local('Futura Medium Italic Cyrillic'), local('FuturaMediumC-Italic'),
-		url('./fonts/FuturaMediumC-Italic.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaMediumC-Italic.woff') format('woff'),
-		url('./fonts/FuturaMediumC-Italic.ttf') format('truetype');
-	font-weight: 500;
-	font-style: italic;
+  font-family: 'FuturaMediumC';
+  font-style: italic;
+  font-weight: 500;
+  src: url('./fonts/FuturaMediumC-Italic.eot');
+  src: local('Futura Medium Italic Cyrillic'), local('FuturaMediumC-Italic'),
+    url('./fonts/FuturaMediumC-Italic.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaMediumC-Italic.woff') format('woff'),
+    url('./fonts/FuturaMediumC-Italic.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaLightC';
-	src: url('./fonts/FuturaLightC.eot');
-	src: local('Futura Light Cyrillic'), local('FuturaLightC'),
-		url('./fonts/FuturaLightC.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaLightC.woff') format('woff'),
-		url('./fonts/FuturaLightC.ttf') format('truetype');
-	font-weight: 300;
-	font-style: normal;
+  font-family: 'FuturaLightC';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./fonts/FuturaLightC.eot');
+  src: local('Futura Light Cyrillic'), local('FuturaLightC'),
+    url('./fonts/FuturaLightC.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaLightC.woff') format('woff'),
+    url('./fonts/FuturaLightC.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaDemiC';
-	src: url('./fonts/FuturaDemiC-Italic.eot');
-	src: local('Futura Demi Italic Cyrillic'), local('FuturaDemiC-Italic'),
-		url('./fonts/FuturaDemiC-Italic.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaDemiC-Italic.woff') format('woff'),
-		url('./fonts/FuturaDemiC-Italic.ttf') format('truetype');
-	font-weight: normal;
-	font-style: italic;
+  font-family: 'FuturaDemiC';
+  font-style: italic;
+  font-weight: normal;
+  src: url('./fonts/FuturaDemiC-Italic.eot');
+  src: local('Futura Demi Italic Cyrillic'), local('FuturaDemiC-Italic'),
+    url('./fonts/FuturaDemiC-Italic.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaDemiC-Italic.woff') format('woff'),
+    url('./fonts/FuturaDemiC-Italic.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaBookC';
-	src: url('./fonts/FuturaBookC-Italic.eot');
-	src: local('Futura Book Italic Cyrillic'), local('FuturaBookC-Italic'),
-		url('./fonts/FuturaBookC-Italic.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaBookC-Italic.woff') format('woff'),
-		url('./fonts/FuturaBookC-Italic.ttf') format('truetype');
-	font-weight: normal;
-	font-style: italic;
+  font-family: 'FuturaBookC';
+  font-style: italic;
+  font-weight: normal;
+  src: url('./fonts/FuturaBookC-Italic.eot');
+  src: local('Futura Book Italic Cyrillic'), local('FuturaBookC-Italic'),
+    url('./fonts/FuturaBookC-Italic.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaBookC-Italic.woff') format('woff'),
+    url('./fonts/FuturaBookC-Italic.ttf') format('truetype');
 }
 
 @font-face {
-	font-family: 'FuturaBookC';
-	src: url('./fonts/FuturaBookC.eot');
-	src: local('Futura Book Cyrillic'), local('FuturaBookC'),
-		url('./fonts/FuturaBookC.eot?#iefix') format('embedded-opentype'),
-		url('./fonts/FuturaBookC.woff') format('woff'),
-		url('./fonts/FuturaBookC.ttf') format('truetype');
-	font-weight: normal;
-	font-style: normal;
+  font-family: 'FuturaBookC';
+  font-style: normal;
+  font-weight: normal;
+  src: url('./fonts/FuturaBookC.eot');
+  src: local('Futura Book Cyrillic'), local('FuturaBookC'),
+    url('./fonts/FuturaBookC.eot?#iefix') format('embedded-opentype'),
+    url('./fonts/FuturaBookC.woff') format('woff'),
+    url('./fonts/FuturaBookC.ttf') format('truetype');
 }

src/scss/main.scss

-@import "utils/reset";
-@import "utils/mixins";
-@import "utils/vars";
-@import "utils/common";
-@import "utils/columns";
-@import "utils/buttons";
-@import "utils/hello-banner";
-@import "utils/slider";
-@import "utils/card";
+@import 'utils/reset';
+@import 'utils/mixins';
+@import 'utils/vars';
+@import 'utils/common';
+@import 'utils/columns';
+@import 'utils/buttons';
+@import 'utils/hello-banner';
+@import 'utils/slider';
+@import 'utils/card';

src/scss/utils/buttons.scss

 .btn {
-	padding: 0.5rem 1rem;
-	border-radius: 5px;
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
 }
 
 .btn-default {
-	color: $default-color;
-	background-color: $neutral-primary;
+  background-color: $neutral-primary;
+  color: $default-color;
 }
 
 .btn-default:hover {
-	color: $neutral-primary;
-	background-color: $default-color;
-	border: 1px solid $neutral-primary;
+  background-color: $default-color;
+  border: 1px solid $neutral-primary;
+  color: $neutral-primary;
 }
 
 .btn-primary {
-	color: $default-color;
-	background-color: $primary-color;
+  background-color: $primary-color;
+  color: $default-color;
 }
 
 .btn-primary:hover {
-	color: $primary-color;
-	background-color: $default-color;
-	border: 1px solid $primary-color;
+  background-color: $default-color;
+  border: 1px solid $primary-color;
+  color: $primary-color;
 }
 
 .btn-success {
-	color: $default-color;
-	background-color: $success-color;
+  background-color: $success-color;
+  color: $default-color;
 }
 
 .btn-success:hover {
-	color: $success-color;
-	background-color: $default-color;
-	border: 1px solid $success-color;
+  background-color: $default-color;
+  border: 1px solid $success-color;
+  color: $success-color;
 }
 
 .btn-danger {
-	color: $default-color;
-	background-color: $danger-color;
+  background-color: $danger-color;
+  color: $default-color;
 }
 
 .btn-danger:hover {
-	color: $danger-color;
-	background-color: $default-color;
-	border: 1px solid $danger-color;
+  background-color: $default-color;
+  border: 1px solid $danger-color;
+  color: $danger-color;
 }
 
 .btn-warning {
-	color: $default-color;
-	background-color: $warning-color;
+  background-color: $warning-color;
+  color: $default-color;
 }
 
 .btn-warning:hover {
-	color: $warning-color;
-	background-color: $default-color;
-	border: 1px solid $warning-color;
-}
\ No newline at end of file
+  background-color: $default-color;
+  border: 1px solid $warning-color;
+  color: $warning-color;
+}

src/scss/utils/card.scss

 .card {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	padding: 0;
-	width: 300px;
-	height: 300px;
-	text-align: center;
-	background: #fff;
-	color: #fff;
-	border: 1px solid #d7d7d7;
-	border-radius: 5px;
-	position: relative;
-	box-sizing: border-box;
-	margin: 0.1rem;
+  background: #fff;
+  border: 1px solid #d7d7d7;
+  border-radius: 5px;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  justify-content: flex-end;
+  margin: 0.1rem;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  width: 300px;
 }
 
 .card__image,
 .card__image img {
-	width: 300px;
-	height: 300px;
+  height: 300px;
+  width: 300px;
 }
 
 .card__image,
 .card__image img {
-	z-index: 1;
-	position: absolute;
-	top: 0;
-	left: 0;
-	box-sizing: border-box;
-	border-radius: 5px;
+  border-radius: 5px;
+  box-sizing: border-box;
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
 }
 
 .card__overlay {
-	background: #000;
-	opacity: 0.7;
-	width: 300px;
-	height: 300px;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 2;
-	box-sizing: border-box;
-	border-radius: 5px;
+  background: #000;
+  border-radius: 5px;
+  box-sizing: border-box;
+  height: 300px;
+  left: 0;
+  opacity: 0.7;
+  position: absolute;
+  top: 0;
+  width: 300px;
+  z-index: 2;
 }
 
 .card__body {
-	padding: 0.5rem 1rem;
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
 }
 
 .card__heading,
 .card__text {
-	z-index: 3;
+  z-index: 3;
 }
 
 .card__text {
-	text-align: center;
+  text-align: center;
 }
 
 .card__heading--animated,
 .card__text--animated {
-	z-index: 3;
+  z-index: 3;
 }
 
 .card__text--animated {
-	font-size: rem(18);
-	transform: translateY(10%);
-	position: absolute;
-	visibility: hidden;
+  font-size: rem(18);
+  position: absolute;
+  transform: translateY(10%);
+  visibility: hidden;
 }
 
 .card:hover .card__heading--animated {
-	transition: 0.3s ease;
+  transition: 0.3s ease;
 }
 
 .card:hover .card__text--animated {
-	transition: 0.3s ease;
-	transform: translateY(-10%);
-	position: static;
-	margin-top: 0.75rem;
-	visibility: visible;
+  margin-top: 0.75rem;
+  position: static;
+  transform: translateY(-10%);
+  transition: 0.3s ease;
+  visibility: visible;
 }
 
 .card-deck {
-	display: grid;
-	grid-template-columns: repeat(3, auto);
-	margin: auto;
-	padding: 1rem 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  margin: auto;
+  padding: 1rem 0.5rem;
 }
 
 @media screen and (max-width: 1281px) {
-	.card-deck {
-		grid-template-columns: repeat(2, auto);
-	}
+  .card-deck {
+    grid-template-columns: repeat(2, auto);
+  }
 
-	.card-deck .card,
-	.card-deck .card__overlay,
-	.card-deck .card__image,
-	.card-deck .card__image img {
-		width: 350px;
-		height: 350px;
-	}
+  .card-deck .card,
+  .card-deck .card__overlay,
+  .card-deck .card__image,
+  .card-deck .card__image img {
+    height: 350px;
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: $smDesktopWidth) {
-	.flex-column {
-		margin: 0;
-	}
+  .flex-column {
+    margin: 0;
+  }
 }
 
 @media screen and (max-width: $smTableWidth) {
-	.card-deck .card,
-	.card-deck .card__overlay,
-	.card-deck .card__image,
-	.card-deck .card__image img {
-		width: 280px;
-		height: 280px;
-	}
+  .card-deck .card,
+  .card-deck .card__overlay,
+  .card-deck .card__image,
+  .card-deck .card__image img {
+    height: 280px;
+    width: 280px;
+  }
 }
 
 @media screen and (max-width: $phoneWidth) {
-	.card-deck {
-		grid-template-columns: repeat(1, auto);
-		margin: auto;
-	}
+  .card-deck {
+    grid-template-columns: repeat(1, auto);
+    margin: auto;
+  }
 }
+

src/scss/utils/columns.scss

 section {
-	margin: 0 20%;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	background: $default-color;
-	border-bottom: 1px solid;
-	border-right: 1px solid;
-	border-left: 1px solid;
-	border-color: $border-base;
-	box-sizing: border-box;
+  background: $default-color;
+  border-bottom: 1px solid;
+  border-color: $border-base;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin: 0 20%;
 }
 
 section .left-column {
-	width: 100%;
-	height: 100%;
-	padding: 1rem 0.5rem;
+  height: 100%;
+  padding: 1rem 0.5rem;
+  width: 100%;
 }
 
 section .right-column {
-	width: 100%;
-	height: 100%;
+  height: 100%;
+  width: 100%;
 }
 
 .flex-column {
-	display: flex;
-	flex-flow: column wrap;
-	margin: 0 20%;
-	padding: 1rem 0;
+  display: flex;
+  flex-flow: column wrap;
+  margin: 0 20%;
+  padding: 1rem 0;
 }
 
 .flex-column h2 {
-	padding: 0 0.5rem;
+  padding: 0 0.5rem;
 }
 
 .right-column .banner {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
 }
 
 .description {
-	padding: 0.5rem 0;
-	text-align: justify;
+  padding: 0.5rem 0;
+  text-align: justify;
 }
 
 @media (min-width: $smDesktopWidth) and (max-width: $desktopWidth) {
-	section,
-	section.flex-column {
-		margin: 0 10%;
-	}
-
-	nav {
-		padding: 0.5rem 10%;
-	}
-
-	.hello-banner__text {
-		padding: 3rem 10%;
-	}
+  section,
+  .flex-column {
+    margin: 0 10%;
+  }
+
+  nav {
+    padding: 0.5rem 10%;
+  }
+
+  .hello-banner__text {
+    padding: 3rem 10%;
+  }
 }
+
 @media screen and (max-width: $smDesktopWidth) {
-	section {
-		display: flex;
-		flex-flow: column wrap;
-		margin: 0;
-	}
-	section .left-column {
-		order: 1;
-	}
-	.right-column,
-	.banner {
-		max-height: min-content;
-	}
-	nav {
-		padding: 0.5rem;
-	}
-
-	section.flex-column {
-		margin: 0;
-	}
-
-	section.card-deck {
-		margin: 0;
-	}
+  section {
+    display: flex;
+    flex-flow: column wrap;
+    margin: 0;
+  }
+
+  section .left-column {
+    order: 1;
+  }
+
+  .right-column,
+  .banner {
+    max-height: min-content;
+  }
+
+  nav {
+    padding: 0.5rem;
+  }
+
+  .flex-column {
+    margin: 0;
+  }
+
+  .card-deck {
+    margin: 0 auto;
+  }
 }
 
 @media screen and (max-width: $smTableWidth) {
-	section.card-deck {
-		margin: 0;
-	}
+  .card-deck {
+    margin: 0 auto;
+  }
 
-	section.card-deck .card-group {
-		flex-flow: column wrap;
-	}
+  .card-deck .card-group {
+    flex-flow: column wrap;
+  }
 }
+

src/scss/utils/common.scss

-@import "./fonts/fonts";
+@import './fonts/fonts';
 
 html {
-	line-height: $mainLineHeight;
-	font-size: $mainFontSize;
-	color: $mainFontColor;
-	height: 100%;
-	scroll-behavior: smooth;
-	@media screen and (max-width: $desktopWidth) {
-		font-size: 16px;
-	}
+  color: $mainFontColor;
+  font-size: $mainFontSize;
+  height: 100%;
+  line-height: $mainLineHeight;
+  scroll-behavior: smooth;
+  @media screen and (max-width: $desktopWidth) {
+    font-size: 16px;
+  }
 
-	@media screen and (max-width: $tableWidth) {
-		font-size: 15px;
-	}
+  @media screen and (max-width: $tableWidth) {
+    font-size: 15px;
+  }
 
-	@media screen and (max-width: $phoneWidth) {
-		font-size: 14px;
-	}
+  @media screen and (max-width: $phoneWidth) {
+    font-size: 14px;
+  }
 }
 
 body {
-	margin: 0;
-	padding: 0;
-	font-family: 'FuturaMediumC';
-	font-size: $mainFontSize;
-	font-weight: $mainFontWeight;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	background: $default-color;
-	background: rgba(84.7, 91, 100, 0.1);
-	// background: #f7f7f7;
+  background: $default-color;
+  background: rgba(84.7, 91, 100, 0.1);
+  font-family: 'FuturaMediumC';
+  font-size: $mainFontSize;
+  font-weight: $mainFontWeight;
+  margin: 0;
+  padding: 0;
 }
 
 *,
-*:before,
-*:after {
-	box-sizing: border-box;
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 h1,
@@ -44,231 +41,232 @@ h3,
 h4,
 h5,
 h6 {
-	margin: 0;
+  margin: 0;
 }
 
 a {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 ul,
 li {
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
 .wrapper {
-	display: flex;
-	flex-direction: column;
-	margin: 0 auto;
-	min-height: 100vh;
-	min-width: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  min-height: 100vh;
+  min-width: 100vh;
 }
 
 .content-wrapper {
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .container {
-	width: 100%;
-	flex: 0 0 auto;
-	position: relative;
-	margin: 0 auto;
-	max-width: $desktopWidth;
+  flex: 0 0 auto;
+  margin: 0 auto;
+  max-width: $desktopWidth;
+  position: relative;
+  width: 100%;
 
-	@media screen and (max-width: $smDesktopWidth) {
-		max-width: $tableWidth;
-	}
+  @media screen and (max-width: $smDesktopWidth) {
+    max-width: $tableWidth;
+  }
 
-	@media screen and (max-width: $tableWidth) {
-		max-width: $phoneWidth;
-	}
+  @media screen and (max-width: $tableWidth) {
+    max-width: $phoneWidth;
+  }
 
-	@media screen and (max-width: $phoneWidth) {
-		max-width: $smPhoneWidth;
-	}
+  @media screen and (max-width: $phoneWidth) {
+    max-width: $smPhoneWidth;
+  }
 }
 
 h1 {
-	font-size: rem(24);
-	font-weight: 600;
+  font-size: rem(24);
+  font-weight: 600;
 }
 
 h2 {
-	font-size: rem(22);
-	font-weight: 600;
+  font-size: rem(22);
+  font-weight: 600;
 }
 
 header {
-	z-index: 4;
-	position: sticky;
-	display: block;
-	background: $default-color;
-	transition: top 1s ease-out 0.5s;
+  background: $default-color;
+  display: block;
+  position: sticky;
+  transition: top 1s ease-out 0.5s;
+  z-index: 4;
 }
 
 .top-0 {
-	top: 0;
+  top: 0;
 }
 
 nav {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	padding: 0.5rem 1rem;
-	box-shadow: 3px 0 3px rgba(0, 0, 0, 0.3);
-	padding: 0.5rem 20%;
+  box-shadow: 3px 0 3px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 0.5rem 20%;
 }
 
 nav a {
-	padding: 0 0.5rem;
+  padding: 0 0.5rem;
 }
 
-ul.menu-right {
-	margin-top: auto;
-	margin-bottom: auto;
-	display: flex;
-	margin-left: auto;
-	order: 2;
-	flex-flow: row wrap;
+.menu-right {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: auto;
+  margin-left: auto;
+  margin-top: auto;
+  order: 2;
 }
 
-ul.menu-right > * {
-	margin: auto 0;
-	margin-left: 0.25rem;
+.menu-right > * {
+  margin: auto 0;
+  margin-left: 0.25rem;
 }
 
 footer {
-	background: $default-color;
-	padding: 1rem 0.5rem;
-	text-align: center;
-	border: 1px solid $border-base;
+  background: $default-color;
+  border: 1px solid $border-base;
+  padding: 1rem 0.5rem;
+  text-align: center;
 }
 
 .logo img {
-	@include size(60px);
+  @include size(60px);
 }
 
 a {
-	font-size: rem(18);
-	color: $neutral-primary;
+  color: $neutral-primary;
+  font-size: rem(18);
 }
 
 a:hover {
-	color: $light-color;
+  color: $light-color;
 }
 
 .menu-button {
-	display: inline-block;
-	padding: 0.5em;
-	background-color: #fafafa;
-	border: 1px solid #ccc;
-	cursor: pointer;
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.5em;
 }
 
 .burger-icon {
-	@include burger(25px, 3px, 5px, #444);
+  @include burger(25px, 3px, 5px, #444);
 }
 
 .menu-button.is-active .burger-icon {
-	@include burger-to-cross;
+  @include burger-to-cross;
 }
 
 .visually-hidden {
-	display: none;
-	visibility: hidden;
+  display: none;
+  visibility: hidden;
 }
 
 .visually-visible {
-	visibility: visible !important;
-	display: inherit !important;
+  display: inherit !important;
+  visibility: visible !important;
 }
 
 @media screen and (min-width: $smDesktopWidth) {
-	.menu-button {
-		display: none;
-		visibility: hidden;
-	}
+  .menu-button {
+    display: none;
+    visibility: hidden;
+  }
 
-	menu#menu {
-		display: none;
-		visibility: hidden;
-	}
+  .menu {
+    display: none;
+    visibility: hidden;
+  }
 }
 
 @media screen and (max-width: $smDesktopWidth) {
-	.menu-right > li {
-		display: none;
-		visibility: hidden;
-	}
-
-	menu#menu {
-		border-top: 1px solid $border-base;
-		border-bottom: 1px solid $border-base;
-		display: none;
-		visibility: hidden;
-		flex-flow: column wrap;
-		width: 100%;
-		text-align: center;
-		z-index: 4;
-		position: sticky;
-		background: $default-color;
-		top: 76px;
-	}
-
-	menu#menu > a {
-		display: flex;
-		width: 100%;
-		border: inherit;
-		height: 40px;
-	}
-
-	menu#menu > a > span {
-		width: inherit;
-		text-align: center;
-		line-height: rem(40);
-	}
-}
-
-ol.default-list {
-	display: block;
-	list-style-type: decimal;
-	margin-top: 1em;
-	margin-bottom: 1 em;
-	margin-left: 0;
-	margin-right: 0;
-	padding-left: 40px;
-}
-
-ol.default-list > li {
-	display: list-item;
-	list-style-type: inherit !important;
+  .menu-right > li {
+    display: none;
+    visibility: hidden;
+  }
+
+  .menu {
+    background: $default-color;
+    border-bottom: 1px solid $border-base;
+    border-top: 1px solid $border-base;
+    display: none;
+    flex-flow: column wrap;
+    position: sticky;
+    text-align: center;
+    top: 76px;
+    visibility: hidden;
+    width: 100%;
+    z-index: 4;
+  }
+
+  .menu > a {
+    border: inherit;
+    display: flex;
+    height: 40px;
+    width: 100%;
+  }
+
+  .menu > a > span {
+    line-height: rem(40);
+    text-align: center;
+    width: inherit;
+  }
+}
+
+.default-list {
+  display: block;
+  list-style-type: decimal;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1em;
+  padding-left: 40px;
+}
+
+.default-list > li {
+  display: list-item;
+  list-style-type: inherit !important;
 }
 
 select {
-	padding: 0.25rem;
-	border: 1px solid $border-base;
-	border-radius: 5px;
-	background: $default-color;
+  background: $default-color;
+  border: 1px solid $border-base;
+  border-radius: 5px;
+  padding: 0.25rem;
 }
 
 .pt-2 {
-	padding-top: 2rem !important;
+  padding-top: 2rem !important;
 }
 
 .mt-2 {
-	margin-top: 0.5rem !important;
+  margin-top: 0.5rem !important;
 }
 
 .mb-3 {
-	margin-bottom: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .map-iframe {
-	width: 100%;
-	height: 300px;
-	margin: 0 auto;
+  height: 300px;
+  margin: 0 auto;
+  width: 100%;
 }
+
+

src/scss/utils/hello-banner.scss

 .hello-banner {
-	width: 100%;
-	min-height: 500px;
-	max-height: 500px;
-	position: relative;
-	margin: 0 auto;
+  margin: 0 auto;
+  max-height: 500px;
+  min-height: 500px;
+  position: relative;
+  width: 100%;
 }
 
 .hello-banner__text {
-	color: #fff;
-	padding: 3rem 2rem;
-	position: relative;
-	width: 100%;
-	padding: 3rem 20%;
-	z-index: 3;
-	height: 100%;
+  color: #fff;
+  height: 100%;
+  padding: 3rem 20%;
+  position: relative;
+  width: 100%;
+  z-index: 3;
 }
+
 .hello-banner__text h1 {
-	font-size: rem(48);
-	font-weight: bold;
+  font-size: rem(48);
+  font-weight: bold;
 }
 
 .hello-banner__text p {
-	font-size: rem(24);
+  font-size: rem(24);
 }
 
 .hello-banner__gradient {
-	background: #000;
-	opacity: 0.8;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
+  background: #000;
+  height: 100%;
+  opacity: 0.8;
+  position: absolute;
+  width: 100%;
+  z-index: 2;
 }
 
 .hello-banner__img {
-	filter: blur(2px);
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 1;
-	background-image: url("../images/banner.jpg");
-	background-size: cover;
+  background-image: url('../images/banner.jpg');
+  background-size: cover;
+  filter: blur(2px);
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
 }
 
 @media (min-width: $desktopWidth) and (max-width: $lgDesktopWidth) {
-	.hello-banner__text {
-		padding: 3rem 5%;
-	}
+  .hello-banner__text {
+    padding: 3rem 5%;
+  }
 }
 
 @media screen and (max-width: $smDesktopWidth) {
-	.hello-banner__text {
-		padding: 3rem 1rem;
-	}
+  .hello-banner__text {
+    padding: 3rem 1rem;
+  }
 }
 
 @media screen and (min-width: $lgDesktopWidth) {
-	.hello-banner__text h1 {
-		font-size: rem(47);
-	}
+  .hello-banner__text h1 {
+    font-size: rem(47);
+  }
 
-	.hello-banner__text p {
-		font-size: rem(22);
-	}
+  .hello-banner__text p {
+    font-size: rem(22);
+  }
 }
 
 @media (min-width: $tableWidth) and (max-width: $smDesktopWidth) {
-	.hello-banner__text h1 {
-		font-size: rem(42);
-	}
+  .hello-banner__text h1 {
+    font-size: rem(42);
+  }
 
-	.hello-banner__text p {
-		font-size: rem(21);
-	}
+  .hello-banner__text p {
+    font-size: rem(21);
+  }
 }
 
 @media (min-width: $phoneWidth) and (max-width: $smTableWidth) {
-	.hello-banner__text h1 {
-		font-size: rem(40);
-	}
+  .hello-banner__text h1 {
+    font-size: rem(40);
+  }
 
-	.hello-banner__text p {
-		font-size: rem(20);
-	}
+  .hello-banner__text p {
+    font-size: rem(20);
+  }
 }
 
 @media (min-width: $smPhoneWidth) and (max-width: $phoneWidth) {
-	.hello-banner__text h1 {
-		font-size: rem(32);
-	}
+  .hello-banner__text h1 {
+    font-size: rem(32);
+  }
 
-	.hello-banner__text p {
-		font-size: rem(18);
-	}
+  .hello-banner__text p {
+    font-size: rem(18);
+  }
 }
 
 @media screen and (max-width: $smPhoneWidth) {
-	.hello-banner__text h1 {
-		font-size: rem(26);
-	}
+  .hello-banner__text h1 {
+    font-size: rem(26);
+  }
 
-	.hello-banner__text p {
-		font-size: rem(14);
-	}
+  .hello-banner__text p {
+    font-size: rem(14);
+  }
 }
+

src/scss/utils/mixins.scss

 @function rem($pixels, $context: $mainFontSize) {
-	@if (unitless($pixels)) {
-		$pixels: $pixels * 1px;
-	}
-	
-	@if (unitless($context)) {
-		$context: $context * 1px;
-	}
-
-	@return $pixels / $context * 1rem;
-}
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }
 
-@mixin size($width, $height: $width) {
-	width: $width;
-	height: $height;
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }
+
+  @return $pixels / $context * 1rem;
 }
 
-@mixin placeholder {
-	::-webkit-input-placeholder {@content}
-	:-moz-placeholder 			{@content}
-	::-moz-placeholder 			{@content}
-	:-ms-input-placeholder 		{@content}
+@mixin size($width, $height: $width) {
+  height: $height;
+  width: $width;
 }
 
 // Burger parts
 //
-// (---) top    -> &:before
+// (---) top  -> &:before
 // [---] middle -> &
 // (---) bottom -> &:after
 
@@ -33,107 +26,118 @@
 $sass-burger-add-vendor-prefixes: true !default;
 
 // Burger
-@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) {
-    $burger-height: $height !global;
-    $burger-gutter: $gutter !global;
-
-    position: relative;
-    margin-top: $height + $gutter;
-    margin-bottom: $height + $gutter;
+@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: 0.3s) {
+  $burger-height: $height !global;
+  $burger-gutter: $gutter !global;
+
+  margin-bottom: $height + $gutter;
+  margin-top: $height + $gutter;
+  position: relative;
+
+  @if $sass-burger-add-vendor-prefixes {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+  }
+  user-select: none;
+
+  &,
+  &::before,
+  &::after {
+    background-color: $color;
+    display: block;
+    height: $height;
+    transition-duration: $transition-duration;
+    transition-property: background-color, transform;
+    width: $width;
+
+    @if $border-radius != 0 {
+      border-radius: $border-radius;
+    }
 
     @if $sass-burger-add-vendor-prefixes {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-    }
-    user-select: none;
-
-    &, &:before, &:after {
-        display: block;
-        width: $width;
-        height: $height;
-        background-color: $color;
-        @if $border-radius != 0 {
-            border-radius: $border-radius;
-        }
-
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transition-property: background-color, -webkit-transform;
-            -moz-transition-property: background-color, -moz-transform;
-            -o-transition-property: background-color, -o-transform;
-        }
-        transition-property: background-color, transform;
-
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transition-duration: $transition-duration;
-            -moz-transition-duration: $transition-duration;
-            -o-transition-duration: $transition-duration;
-        }
-        transition-duration: $transition-duration;
+      -webkit-transition-property: background-color, -webkit-transform;
+      -moz-transition-property: background-color, -moz-transform;
+      -o-transition-property: background-color, -o-transform;
     }
 
-    &:before, &:after {
-        position: absolute;
-        content: "";
+    @if $sass-burger-add-vendor-prefixes {
+      -webkit-transition-duration: $transition-duration;
+      -moz-transition-duration: $transition-duration;
+      -o-transition-duration: $transition-duration;
     }
+  }
 
-    &:before {
-        top: -($height + $gutter);
-    }
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+  }
 
-    &:after {
-        top: $height + $gutter;
-    }
+  &::before {
+    top: -($height + $gutter);
+  }
+
+  &::after {
+    top: $height + $gutter;
+  }
 }
 
 
 // Select parts of the burger
 @mixin burger-parts {
-    &, &:before, &:after {
-        @content;
-    }
+  &,
+  &::before,
+  &::after {
+    @content;
+  }
 }
 
 @mixin burger-top {
-    &:before {
-        @content;
-    }
+  &::before {
+    @content;
+  }
 }
 
 @mixin burger-middle {
-    & {
-        @content;
-    }
+  & {
+    @content;
+  }
 }
 
 @mixin burger-bottom {
-    &:after {
-        @content;
-    }
+  &::after {
+    @content;
+  }
 }
 
 
 // Burger animations
 @mixin burger-to-cross {
-    & {
-        background-color: transparent;
-    }
-    &:before {
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-            -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-            -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-            -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-        }
-        transform: translateY($burger-gutter + $burger-height) rotate(45deg);
+  & {
+    background-color: transparent;
+  }
+
+  &::before {
+    transform: translateY($burger-gutter + $burger-height) rotate(45deg);
+    
+    @if $sass-burger-add-vendor-prefixes {
+      -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
+      -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
+      -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
+      -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
     }
-    &:after {
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-            -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-            -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-            -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-        }
-        transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
+  }
+
+  &::after {
+    transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
+
+    @if $sass-burger-add-vendor-prefixes {
+      -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
+      -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
+      -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
+      -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
     }
-}
\ No newline at end of file
+  }
+}
+

src/scss/utils/slider.scss

 .slider {
-	position: relative;
-	overflow: hidden;
+  overflow: hidden;
+  position: relative;
 }
 
 .slider__wrapper {
-	display: flex;
-	transition: transform 0.6s ease;
+  display: flex;
+  transition: transform 0.6s ease;
 }
 
 .slider__item {
-	flex: 0 0 25%;
-	max-width: 25%;
+  flex: 0 0 25%;
+  max-width: 25%;
 }
 
 .slider__control {
-	position: absolute;
-	top: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	color: #fff;
-	text-align: center;
-	opacity: 0.5;
-	height: 50px;
-	transform: translateY(-50%);
-	background: rgba(0, 0, 0, 0.5);
-	z-index: 10;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  height: 50px;
+  justify-content: center;
+  opacity: 0.5;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  z-index: 10;
 }
 
 .slider__control:hover,
 .slider__control:focus {
-	color: #fff;
-	text-decoration: none;
-	outline: 0;
-	opacity: 0.9;
+  color: #fff;
+  opacity: 0.9;
+  outline: 0;
+  text-decoration: none;
 }
 
 .slider__control_left {
-	left: 0;
+  left: 0;
 }
 
 .slider__control_right {
-	right: 0;
+  right: 0;
 }
 
 .slider__control::before {
-	content: "";
-	display: inline-block;
-	width: 20px;
-	height: 20px;
-	background: transparent no-repeat center center;
-	background-size: 100% 100%;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+  content: '';
+  display: inline-block;
+  height: 20px;
+  width: 20px;
 }
 
 .slider__control_left::before {
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
 }
 
 .slider__control_right::before {
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 }
 
 .slider__item .card {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	padding: 0;
-	width: 100%;
-	height: 300px;
-	text-align: center;
-	background: #fff;
-	color: #fff;
-	border: 1px solid #d7d7d7;
-	border-radius: 5px;
-	position: relative;
-	box-sizing: border-box;
-}
-.slider__item .card .card__body .card__image img,
-.slider__item .card .card__body .card__image {
-	z-index: 1;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border-radius: 5px;
-}
-
-.slider__item .card .card__body .card__overlay {
-	background: #000;
-	opacity: 0.5;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 2;
-	border-radius: 5px;
-}
-
-.slider__item .card .card__body {
-	padding: 0.5rem 1rem;
-	display: flex;
-	flex-direction: column;
-}
-
-.slider__item .card .card__body .card__heading,
-.slider__item .card .card__body .card__text {
-	z-index: 3;
+  background: #fff;
+  border: 1px solid #d7d7d7;
+  border-radius: 5px;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  justify-content: flex-end;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.slider__item .card__image img,
+.slider__item .card__image {
+  border-radius: 5px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.slider__item .card__overlay {
+  background: #000;
+  border-radius: 5px;
+  height: 100%;
+  left: 0;
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.slider__item .card__body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
+}
+
+.slider__item .card__heading,
+.slider__item .card__text {
+  z-index: 3;
 }
 
 a:focus,
 .slider:focus,
 .slider__control:focus {
-	outline: 3px solid #529dec;
+  outline: 3px solid #529dec;
 }
 
 @media (min-width: $tableWidth) and (max-width: $smDesktopWidth) {
-	.slider {
-		width: 100%;
-		max-width: $smDesktopWidth;
-	}
+  .slider {
+    max-width: $smDesktopWidth;
+    width: 100%;
+  }
 
-	.slider__item {
-		width: calc(100% / 3);
-		max-width: calc(#{$smDesktopWidth} / 3);
-		flex: 0 0 calc(100% / 3);
-	}
+  .slider__item {
+    flex: 0 0 calc(100% / 3);
+    max-width: calc(#{$smDesktopWidth} / 3);
+    width: calc(100% / 3);
+  }
 }
 
 @media (min-width: $phoneWidth) and (max-width: $tableWidth) {
-	.slider {
-		width: 100%;
-		max-width: $tableWidth;
-	}
+  .slider {
+    max-width: $tableWidth;
+    width: 100%;
+  }
 
-	.slider__item {
-		width: calc(100% / 2);
-		max-width: calc(#{$tableWidth}/ 2);
-		flex: 0 0 calc(100% / 2);
-	}
+  .slider__item {
+    flex: 0 0 calc(100% / 2);
+    max-width: calc(#{$tableWidth}/ 2);
+    width: calc(100% / 2);
+  }
 }
 
 @media screen and (max-width: $phoneWidth) {
-	.slider {
-		width: 100%;
-		max-width: $phoneWidth;
-	}
+  .slider {
+    max-width: $phoneWidth;
+    width: 100%;
+  }
 
-	.slider__item {
-		width: 100%;
-		max-width: $phoneWidth;
-		flex: 0 0 100%;
-	}
+  .slider__item {
+    flex: 0 0 100%;
+    max-width: $phoneWidth;
+    width: 100%;
+  }
 }
+

src/scss/utils/vars.scss

 // Font
-$mainFont                : 'Montserrat', Helvetica, Arial, sans-serif;
+$mainFont: 'Montserrat', Helvetica, Arial, sans-serif;
 
 // Size
-$mainFontColor           : #101010;
-$mainFontSize            : 18px;
-$mainFontWeight          : 400;
-$mainLineHeight          : 1.4;
-
-$lgDesktopWidth		 : 1537px;
-$desktopWidth            : 1281px;
-$smDesktopWidth          : 1025px;
-$tableWidth              : 769px;
-$smTableWidth            : 641px;
-$phoneWidth              : 481px;
-$smPhoneWidth            : 321px;
-
-$desktopWidthNumber      : 1280;
-$smDesktopWidthNumber    : 1024;
-$tableWidthNumber        : 768;
-$smTableWidthNumber      : 640;
-$phoneWidthNumber        : 480;
-$smPhoneWidthNumber      : 320;
+$mainFontColor: #101010;
+$mainFontSize: 18px;
+$mainFontWeight: 400;
+$mainLineHeight: 1.4;
+
+$lgDesktopWidth: 1537px;
+$desktopWidth: 1281px;
+$smDesktopWidth: 1025px;
+$tableWidth: 769px;
+$smTableWidth: 641px;
+$phoneWidth: 481px;
+$smPhoneWidth: 321px;
+
+$desktopWidthNumber: 1280;
+$smDesktopWidthNumber: 1024;
+$tableWidthNumber: 768;
+$smTableWidthNumber: 640;
+$phoneWidthNumber: 480;
+$smPhoneWidthNumber: 320;
 
 
 // Main color
-$default-color           : #ffffff;
-$primary-color           : #444ce0;
-$success-color           : #26de81;
-$danger-color            : #fc5c65;
-$warning-color           : #fed330;
-$light-color             : #999999;
-$purple-color            : #8854d0;
+$default-color: #fff;
+$primary-color: #444ce0;
+$success-color: #26de81;
+$danger-color: #fc5c65;
+$warning-color: #fed330;
+$light-color: #999;
+$purple-color: #8854d0;
 
 // Neutral Color
-$neutral-primary         : #303133;
-$neutral-regular         : #606266;
-$neutral-secondary       : #909399;
-$neutral-placeholder     : #C0C4CC;
+$neutral-primary: #303133;
+$neutral-regular: #606266;
+$neutral-secondary: #909399;
+$neutral-placeholder: #c0c4cc;
 
 // Border Color
-$border-base             : #DCDFE6;
-$border-light            : #E4E7ED;
-$border-lighter          : #EBEEF5;
-$border-lightex          : #F2F6FC;
+$border-base: #dcdfe6;
+$border-light: #e4e7ed;
+$border-lighter: #ebeef5;
+$border-lightex: #f2f6fc;
+

webpack.config.js

 const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const StylelintPlugin = require('stylelint-webpack-plugin')
 
 module.exports = {
 	entry: {
@@ -101,6 +102,7 @@ module.exports = {
 	plugins: [
 		new MiniCssExtractPlugin({
 			filename: '[name].css'
-		})
+		}),
+		new StylelintPlugin()
 	]
 }