Ability to define variables in @Imported CSS-file about myth

[tbaddade]

That would be really nice. 👍

Another Workflow

variables.css contains

:root {
    var-accent: #f00;
}

typo.css contains

a {
    color: var(accent)
}

styles.css contains

@import url(normalize.css);
@import url(variables.css);
@import url(typo.css);

[ianstormtaylor]

+1 i think, this sounds like a cool addition. would be nice to support the media queries allowed for imports as well (dunno if sass/less do this automatically)

[lionel-m]

+1

[JoshMilo]

+1

[Ben2HellAndBack]

+1

[iantearle]

+1 and could the output.css file be compiled with the @import'ed files inline - much like I guess how less and sass build a final file, also would be nice to have a flag for minification?

[ianstormtaylor]

if someone wants to try PRing this i'd be happy to help get it merged in this coming weekend or something. the tricky part i ran into if i remember correctly was the source mapping for the imported files which i think the current import plugins don't handle well. maybe we just say screw source maps for now

[krry]

+1, willing to help but not sure where to start.

[martinkr]

+1
and i would suggest the following

variables.css

:root {
    var-accent: #f00;
}

sample.css

@import url(variables.css);
a {
    color: var(accent)
}

$ myth sample.css sample.css

output

sample.css

a {
    color: #f00
}

so it will just replace the vars and remove the @import so you you can keep all your separate css files and modifiy them later in the build process. e.g.: if you are using a cms which concats and minifies the files

[ianstormtaylor]

added in 1.0.0! you need to pass { source: '/path/to/source' } as an option so it can know where to read from