Selecting a CSS Class divided into names

[no537369]

I was wondering if this was even possible:

example classes look like this:
.asset-download . asset-action .asset-box, etc.

and id like to use SASS to something like this:
[class^=’asset-‘] {
/* styles here /
[class$=’download] {
/ styles for download /
}
[class$=’action] {
/ get the idea? */
}
}
any thoughts will be appreciate. Thank you.

[Paulie_D]

I’m not sure if I understand you correctly but, if I do, then the answer is…sort of.

SASS writes your CSS for you based on what is, effectively, shorthand notation.

If you have styles that are common to those classes you can define those as a base ‘style’ and then that base style is ‘extended’ to other classes.

For instance you might have a class called .asset which has certain styles which will be common to all those ‘sub-classes’.

Then in your SASS you create a new class, say, .asset-download and @extend the .asset class to include that base styling then you add any special styles that or unique to that subclass.

[Paulie_D]

SASS can’t detect other styles…it can only create new ones, either unique or associated styles

[no537369]

Right, thanks for replying. I like the @extend functionality of SASS and your example can be applied perfectly to many scenarios.

I believe it is a good practice to have a base style and “@extend” it whenever possible. but I was thinking more about selecting part of the class name itself.

Another way of looking at the example is this. If I have these classes:
.asset-download, . asset-action, .asset-box, etc.

I could also re-assign them like this:
.asset {
.download {}
.action {}
.box {}
}

Which would be kinda of the desired result but they share no common base styles. So I was wondering if just grabbing the beginning of the common class name and then adding the ending to it to apply the styles needed could be achieved.

Adding these class names to the web app we are building makes sense but could be misleading for CSS.

[__]

If you’re asking whether [class^='asset-'] is a valid selector, then the answer is yes. This doesn’t have anything to do with sass, however; it’s a css selector. It works in modern browsers, back to IE8.

However, note that selector will only work when you list the “asset-whatever” class first. If you put some other class first (or end up with another class first somehow, programatically, maybe), then it won’t match.

You could use [class*=asset-] instead, though that would also match things like class=not-an-asset.

To match only asset- classes, wherever they appear in the list, you’d need to do:

[class^=asset-],[class*=' asset-']{
    /* your styles here.
       note the leading space in the *= selector. */
}

I haven’t looked at cross-browser compatibility for the *=leading-space method. Give it a try.

. . . . . EDIT . . . . .

p.s. – regarding the $= rules, that would be very fragile, for all the reasons above – I’d recommend against it. If the styles truly are independent (i.e., all -whatever classes get the same styling, not just asset-whatever classes), you might look at the |= (in-dash-separated-list) selector.

[Author]

Posts