fix: remove old, unused '.scss-lint.yml', create '.sass-lint.yml', reformat .scss

Author: matteocng

.sass-lint.yml

@@ -0,0 +1,35 @@
+# sass-lint config generated by make-sass-lint-config v0.1.2
+files:
+  include: '**/*.s+(a|c)ss'
+options:
+  formatter: stylish
+  merge-default-rules: true
+rules:
+  bem-depth: 1
+  border-zero:
+    - 1
+    - convention: zero
+  brace-style:
+    - 1
+    - allow-single-line: false
+  class-name-format:
+    - 1
+    - convention: ^(?!js-).*
+      convention-explanation: should not be written in the form js-*
+  extends-before-declarations: 0
+  extends-before-mixins: 0
+  function-name-format: 1
+  id-name-format:
+    - 1
+    - convention: hyphenatedbem
+  leading-zero: 0
+  mixin-name-format: 1
+  mixins-before-declarations: 0
+  # SEE: https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/
+  no-extends: 1
+  no-qualifying-elements: 0
+  placeholder-name-format:
+    - 1
+    - convention: hyphenatedbem
+  property-sort-order: 0
+  variable-name-format: 1

.scss-lint.yml

@@ -1,23 +1,22 @@
 @import 'variables';
 
-
 .flag {
   margin-left: -1rem;
 
   &:nth-child(1) {
-    opacity: $flag-starting-opacity - .5;
+    opacity: $flag-starting-opacity - 0.5;
   }
 
   &:nth-child(2) {
-    opacity: $flag-starting-opacity - .4;
+    opacity: $flag-starting-opacity - 0.4;
   }
 
   &:nth-child(3) {
-    opacity: $flag-starting-opacity - .3;
+    opacity: $flag-starting-opacity - 0.3;
   }
 
   &:nth-child(4) {
-    opacity: $flag-starting-opacity - .2;
+    opacity: $flag-starting-opacity - 0.2;
   }
 
   &:nth-child(5) {

src/styles/CustomFlag.scss

@@ -3,14 +3,13 @@
 @import 'colors';
 @import 'CustomFlag';
 
-
 .flag-block {
   border-bottom: 1px dotted col(grey-ultra-light);
   border-right: 1px dotted col(grey-ultra-light);
   box-sizing: border-box;
-  padding: 1rem .5rem 0;
+  padding: 1rem 0.5rem 0;
   text-align: center;
-  transition: background .5s;
+  transition: background 0.5s;
 
   .country-name {
     margin-top: 1rem;
@@ -19,7 +18,7 @@
   .country-code {
     color: col(red-it);
     font-size: $font-size-country-code;
-    padding: 0 0 0 .25rem;
+    padding: 0 0 0 0.25rem;
   }
 
   &:hover {

src/styles/FlagBlock.scss

@@ -2,13 +2,12 @@
 @import 'mixins';
 @import 'colors';
 
-
 body {
   font-family: 'Open Sans', sans-serif;
   font-size: 1rem;
 }
 
-%base-heading {
+@mixin base-heading {
   text-align: center;
   text-transform: uppercase;
 }
@@ -18,14 +17,14 @@ body {
 }
 
 .heading {
-  @extend %base-heading;
+  @include base-heading;
   font-size: 1.5rem;
 }
 
 .sub-heading {
-  @extend %base-heading;
+  @include base-heading;
   color: col(red-it);
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 // Flags

src/styles/app.scss

@@ -1,8 +1,8 @@
 $colors: (
   grey-ultra-light: #e6e6e6,
   grey-light: #ddd,
-  red-it: 	#ce2b37,
-  green-it: #009246
+  red-it: #ce2b37,
+  green-it: #009246,
 );
 
 @function col($color-code) {

src/styles/colors.scss

@@ -4,9 +4,11 @@
   $instructions: '';
   @if ($max and $min) {
     $instructions: '(min-width: #{$min}) and (max-width: #{$max})';
-  }@elseif ($min) {
+  }
+  @elseif ($min) {
     $instructions: '(min-width: #{$min})';
-  }@elseif ($max) {
+  }
+  @elseif ($max) {
     $instructions: '(max-width: #{$max})';
   }
 
@@ -62,11 +64,11 @@
 @mixin flag-block-mq-content($items-per-row) {
   width: calc(100% / #{$items-per-row});
 
-  &:nth-child(#{$items-per-row}n+#{$items-per-row}) {
+  &:nth-child(#{$items-per-row}n + #{$items-per-row}) {
     border-right: 0;
   }
 
-  &:nth-last-child(-n+#{$items-per-row - 1}) {
+  &:nth-last-child(-n + #{$items-per-row - 1}) {
     border-bottom: 0;
   }
 }

src/styles/mixins.scss

@@ -1,2 +1,2 @@
 $flag-starting-opacity: 1;
-$font-size-country-code: .75rem;
+$font-size-country-code: 0.75rem;