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

[feature request] temporary classes #102

Closed
albeva opened this Issue Jun 8, 2011 · 7 comments

Comments

Projects
None yet
7 participants
@albeva

albeva commented Jun 8, 2011

I would like to be able to generate temporary class selectors that would not be emitted in final css.

.!tmp { // notice ! prefix. could be some other notation
    color: red;
}
.foo {
    @extend .tmp;
    background: yellow;
}
.bar {
    @extend .tmp
}

would generate following:

.foo, .bar {
    color: red;
}
.foo {
    background: yellow;
}

notice that without .tmp

Use case would be to drop unused css classes that might be generated automatically either my mixins or some external tools.

@millermedeiros

This comment has been minimized.

Show comment
Hide comment
@millermedeiros

millermedeiros Nov 8, 2011

this feature is indeed useful I would suggest this syntax tho:

@abstract error {
    color: #f00;
    border: 2px solid #fc0;
}

.error-default {
    @extend error;
}

.error-special {
    @extend error;
    background-color: #fcc;
}

which would compile to:

.error-default, .error-special {
    color: #f00;
    border: 2px solid #fc0;
}

.error-special {
    background-color: #fcc;
}

abstract is a common word used by many programming languages (Java, C#, PHP) to define a base class which should be extended by other classes and can't be instantiated.

advantage is that it would be similar to the way @mixin is defined (semantically equal), adding special selectors is a bad idea since it isn't compatible with CSS editors and it isn't descriptive as well.

Wikipedia: Abstract Type

millermedeiros commented Nov 8, 2011

this feature is indeed useful I would suggest this syntax tho:

@abstract error {
    color: #f00;
    border: 2px solid #fc0;
}

.error-default {
    @extend error;
}

.error-special {
    @extend error;
    background-color: #fcc;
}

which would compile to:

.error-default, .error-special {
    color: #f00;
    border: 2px solid #fc0;
}

.error-special {
    background-color: #fcc;
}

abstract is a common word used by many programming languages (Java, C#, PHP) to define a base class which should be extended by other classes and can't be instantiated.

advantage is that it would be similar to the way @mixin is defined (semantically equal), adding special selectors is a bad idea since it isn't compatible with CSS editors and it isn't descriptive as well.

Wikipedia: Abstract Type

@piouPiouM

This comment has been minimized.

Show comment
Hide comment
@piouPiouM

piouPiouM Nov 21, 2011

Contributor

I agree with millermedeiros! A abstract keyword we avoid to create many base classes that are, ultimately, rarely used except to be extended.

Contributor

piouPiouM commented Nov 21, 2011

I agree with millermedeiros! A abstract keyword we avoid to create many base classes that are, ultimately, rarely used except to be extended.

@Cosmius

This comment has been minimized.

Show comment
Hide comment
@Cosmius

Cosmius Feb 25, 2012

This would be very useful, extremely when using inheritance with descendant selectors.
Using inheritance with descendant selectors in current version of SASS or SCSS will make the CSS compiled really hard to read, because of the complex selectors.

Not so important but I suggest it called abstract class for better understanding.

Cosmius commented Feb 25, 2012

This would be very useful, extremely when using inheritance with descendant selectors.
Using inheritance with descendant selectors in current version of SASS or SCSS will make the CSS compiled really hard to read, because of the complex selectors.

Not so important but I suggest it called abstract class for better understanding.

@barraponto

This comment has been minimized.

Show comment
Hide comment
@barraponto

barraponto Feb 26, 2012

@Cosmius it is already in latest development version of SASS. The syntax is:

%a-silent-ruleset {
color: pink;
}

.my-selector {
@extend %a-silent-ruleset;
}

This will output:

.my-selector {
color: pink;
}

barraponto commented Feb 26, 2012

@Cosmius it is already in latest development version of SASS. The syntax is:

%a-silent-ruleset {
color: pink;
}

.my-selector {
@extend %a-silent-ruleset;
}

This will output:

.my-selector {
color: pink;
}

@alanjds

This comment has been minimized.

Show comment
Hide comment
@alanjds

alanjds Jul 6, 2012

I really prefer the @abstract syntax :/

alanjds commented Jul 6, 2012

I really prefer the @abstract syntax :/

@millermedeiros

This comment has been minimized.

Show comment
Hide comment
@millermedeiros

millermedeiros Jul 6, 2012

@alanjds I do agree, abstract classes/types is a known paradigm and used in many programming languages. But at least the feature does exist nowadays. For me it's a big deal since I wanted to create a base framework that didn't affected the deploy code.

millermedeiros commented Jul 6, 2012

@alanjds I do agree, abstract classes/types is a known paradigm and used in many programming languages. But at least the feature does exist nowadays. For me it's a big deal since I wanted to create a base framework that didn't affected the deploy code.

@barraponto

This comment has been minimized.

Show comment
Hide comment
@barraponto

barraponto Jul 6, 2012

@millermedeiros yeah, I wanted this feature since forever.

barraponto commented Jul 6, 2012

@millermedeiros yeah, I wanted this feature since forever.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment