How do i import scss code into css file?

HTML-CSS
1

Ive been having issues trying to import scss into my css. Im using atom as my handler and ive tried downloading their plugins but they dont seem to work.

<div class="star-rating" title="89%">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>

        <div class="front-stars" style="width: 80%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </div>
    </div>
</div>

<style>
%flex-display {
    display: flex;
}
.star-rating {
    @extend %flex-display;
    align-items: center;
    font-size: 3em;
    justify-content: center;
    margin-top: 50px;
}
.back-stars {
    @extend %flex-display;
    color: #bb5252;
    position: relative;
    text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
    @extend %flex-display;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
}
</style>
2

You can’t import SCSS into CSS. You can convert it to CSS, then import it, is that what you mean?

3

yes thats exactly what i mean, so i went to the sass website and downloaded prepros to compile the scss code. I made a scss file named style2.scss and processed the file with an output path of my css file style2.css. My code dissapeared in my css file but i undid it and tried running but still didnt seem to work. What im trying to do is make the star rating work by giving an exact percentage using div title “89%” but it just shows all the stars lit up in orange instead of the exact percentage of stars.

4

I actually just figured it out! Thanks for the help

1 Like