Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@only directive #1187

Closed
meefox opened this issue Mar 25, 2014 · 7 comments
Closed

@only directive #1187

meefox opened this issue Mar 25, 2014 · 7 comments

Comments

@meefox
Copy link

meefox commented Mar 25, 2014

Idea is to define a block which will be used in particular selector if rule is true.
And all other properties in whole selector should be skipped.
As a simple example:
main.scss

body {
    background: #000;
    @only $forIE8 {
        background: #FFF;
    }
    @only $forIE9 {
        background: #CCC;
    }
}

ie8.scss

$forIE8: true;
@import "main";

ie9.scss

$forIE9: true;
@import "main";

all.scss

$forIE8: false;
@import "main";

Output:
ie8.css

body {
  background: #FFF;
}

ie9.css

body {
  background: #CCC;
}

all.css

body {
  background: #000;
}
@lolmaus
Copy link

lolmaus commented Mar 25, 2014

Why aren't you using @if?

@cimmanon
Copy link

Probably because he doesn't want to have to write an else.

body {
    @if $forIE8 {
        background: #FFF;
    } @else if $forIE9 {
        background: #CCC;
    } @else {
        background: #000;
    }
}

It is worth noting that Sass doesn't eliminate duplicate property declarations. If it did, we would have problems creating simple fallbacks like this:

.foo {
    background: blue;
    background: rgba(blue, .5);
}

@meefox
Copy link
Author

meefox commented Mar 25, 2014

This is different :)
Because more important part is content above of @only

body {
    background: #000; <---
    @only {...
}

This should be a part of all.css and should't be in ie.css

So with @only you could avoid this necessary @if in each selectors when you don't have IE fixes.

h1 {
    @if $modern {
        color: #DDD;
    }
}

Main point is to have something which will give possibility to split one selector between files.

@Snugug
Copy link

Snugug commented Mar 25, 2014

@meefox if that is indeed the expected result, this sounds like it's related to, if not a duplicate of, #241

@lolmaus
Copy link

lolmaus commented Mar 25, 2014

Also this: #116 (comment)

@nex3
Copy link
Contributor

nex3 commented Mar 25, 2014

@if and @else are sufficient for this use case.

@nex3 nex3 closed this as completed Mar 25, 2014
@wheeyls
Copy link

wheeyls commented Aug 3, 2019

FWIW, I thought this directive would be helpful as well. I've written a postcss plugin based on this syntax here: https://github.com/wheeyls/postcss-only-directive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants