- This topic is empty.
-
AuthorPosts
-
August 23, 2013 at 1:39 am #147909
no537369
ParticipantI 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.August 23, 2013 at 3:38 am #147916Paulie_D
MemberI’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.August 23, 2013 at 3:41 am #147917Paulie_D
MemberSASS can’t detect other styles…it can only create new ones, either unique or associated styles
August 23, 2013 at 4:57 am #147920no537369
ParticipantRight, 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.
August 23, 2013 at 6:21 am #147926__
ParticipantIf 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 likeclass=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 justasset-whatever
classes), you might look at the|=
(in-dash-separated-list) selector. -
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.