SASS doesn't translate into CSS correctly

Asked Mar 29 '19 at 15:13

Active Mar 29 '19 at 15:45

Viewed 43 times

I am trying to create a basic website and I want to use SASS to write some CSS. I am trying something really simple at first to understand how it works. However even this simple example doesn't seem to work. Here is the SASS code:

    %aParagraph {
        font-family: sans-serif;
        font-weight: bold;
    }



    .specificParagraph {
        @extend %aParagraph;
        font-size: 34px ;
    }

but then when it translates into CSS it becomes:

    .specificParagraph {
        font-family: sans-serif;
        font-weight: bold; }

    .specificParagraph {
        font-size: 34px; }

when I actually expected the CSS file to mention aParagraph as well as specificParagraph.

What's going on?

edited Mar 29 '19 at 15:19

TylerH

19,065
49
65
86

asked Mar 29 '19 at 15:13

JustABeginner

hmmm.. i suspect `%` is not permitted as a class character. – Paulie_D Mar 29 '19 at 15:20
What are you expecting `%` to do? I'm confused. – MattHamer5 Mar 29 '19 at 15:20
3

yep - https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors – Paulie_D Mar 29 '19 at 15:21
1

but here https://sass-lang.com/guide it shows that that is the character to use? I0m confused as well! – JustABeginner Mar 29 '19 at 15:23
Read the documentation for placeholder selectors: https://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders - your expected results don't seem to line up with how this `%className` works. – Robert Mar 29 '19 at 15:25
You have to write @extend before %aParagraph, I think. – TylerH Mar 29 '19 at 15:45
From the documentation, OP's code is correct. The doc uses `%message-shared { padding: 10px; }` – Jeremy Thille Mar 29 '19 at 15:46
There is nothing wrong with this output. – Quentin Veron Mar 29 '19 at 15:47
@JeremyThille The documentation uses `%message-shared` *with `@extend`*. – TylerH Mar 29 '19 at 15:53
it seems to work if I use the dot instead of %. This is well confusing. I will git it another look as I'm very new to all this. – JustABeginner Mar 29 '19 at 19:30

SASS doesn't translate into CSS correctly

0 Answers0