What language is "position: absolute 12px * * 10px;"

Question

I have inherited some code that has odd-looking css in it:

.page-back {
    display: inline-block;
    position: absolute 12px * * 10px;
    width: 40px;
    height: 40px;
    text-align: center;
}

The offending line is the one with position: in it.

I have a feeling this is meant for some kind of transpiler/css pre-processor. I'm not using a pre-processor, so I need to figure out how to translate this into vanilla css.

For those of us who are accustomed to native css, what do these extra parameters on the position line mean? Happy to figure it out myself if someone can tell me which pre-processor/transpiler this is.

I've searched around but can't find a hit that tells me what's going on. The pattern I'm looking for doesn't seem to index well.

Here's the source of the code: https://github.com/ElemeFE/mint-ui/blob/c875541634c15f1f2e47e69f1e857eccdbe25e23/example/app.vue

It comes from a reliable source example. I'll add a link to it in the question. — Jim B., Jun 24 '19 at 22:54
I have never seen that syntax for `position` before, but they probably represent the `top` and `left` values. Just a guess though. Does any other css have any odd-looking styles? If not probably a typo — zgood, Jun 24 '19 at 22:55
There are some other examples of what looks like sass/scss "nesting", which is why I am suspicious of tranpilation. — Jim B., Jun 24 '19 at 22:56
Well, the top level `package.json` for that project has `postcss`, so maybe that? Not familiar with it myself, so I can't be certain — jmoerdyk, Jun 24 '19 at 23:00
since you know from where it comes, try to compile it and see the result — Temani Afif, Jun 24 '19 at 23:01

score 1 · Accepted Answer · answered Jun 24 '19 at 23:00

1

I followed the link to your github repo and navigated back, and then looked at the package.json for your project, to see what dependencies were being used.

It looks like that is being handled by a postcss plugin called cooking-saladcss

http://elemefe.github.io/postcss-salad/short-property

answered Jun 24 '19 at 23:00

Blake Mann

5,440
23
37

Right on. It didn't help that the docs for the plugin are in a language I haven't had the time to learn. BTW, here's a link to the docs that cover this particular property: http://elemefe.github.io/postcss-salad/short-property#position – Jim B. Jun 24 '19 at 23:27

What language is "position: absolute 12px * * 10px;"

1 Answers1