Modifier and Pseudo Classes aren't applied

`kss-config.json`
```
{
"title": "Style Guide",
"source": "./src/stylesheets/",
"destination": "styleguide/",
"css": ["./src/index.css"]
}
```
this is SCSS im using

```
// Buttons
//
// Various button styles.
//
// Markup:
// Button Element
//
//
// :hover - When user hovers over button.
// :focus - When button is focused.
// .button--small - A small button.
// .button--large - A large button.
//
// Styleguide Components.button

.button {
padding: 1em 2em;
margin: .5em;
display: inline-block;
font-size: .9em;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #f56476;
background-color: #fff;
border: 2px solid #f56476;
transition: .2s color, .2s background-color, .2s border-color;
}

.button:hover {
color: #fff;
background-color: #f56476;
}

.button:focus {
color: #3ddc97;
border-color: currentColor;
}

.button--small {
font-size: .5em;
}

.button--large {
font-size: 1.5em;
}

```
this is the npm script
`"kss": "kss --config kss-config.json"`

this is the output i keep getting


The styles are not getting applied at all.

Reproduce the issue using the shown kss-config.json, SCSS example, and npm kss script. Inspect the generated style guide and how its CSS is loaded, then verify that the button styles, modifier classes, and pseudo classes are applied in the output.

Written by the indexing model from the issue text.