Does Sass have a selector to refer to the element at the current nesting level? That way duplication like this could be avoided:
.something {
color: red;
a {
color: red; // a tags are already styled globally
}
}
And I could write this instead.
.something {
self, a {
color: red;
}
}
There is a good new feature in the Sass 3.3 - #at_root
.something {
&, a {
color: red;
}
}
More variants of using this feature you can find here:
https://github.com/nex3/sass/issues/774
Related
Looking to be able to add the app scope id to my sass files when we have multiple apps reusing class names.
That way I can have the following definition:
$app-scope-id: 'appOne';
And then write my SCSS in that app
.blockName{
background: blue;
&__element{
color: orange;
}
}
And call a mixin or something else to just go
#include prefixMixin(){
.blockName{
background: blue;
&__element{
color: orange;
}
}
}
And that render out css like:
.appOne-blockName{ background: blue; }
.appOne-blockName__element{ color: orange }
I'm aware I can use interpolation at the beginning of my block, but was hoping I could keep it cleaner with just a mixin call where necessary and only call it once for an entire SASS file if I wanted.
I don't think it's possible to do what you want with SASS. You could maybe do something like this:
$app-scope-id: 'appOne';
#mixin prefix($selectorType: ".") {
#at-root {
#{$selectorType}#{$app-scope-id}-#{&} {
#content;
}
}
}
blockName {
#include prefix() {
background: blue;
&__element{
color: orange;
}
}
}
Which compiles as:
.appOne-blockName { background: blue; }
.appOne-blockName__element { color: orange; }
But you would still need to include it for each selector that needs the prefix. I'm not sure this can be called "clean" either.
I'm trying to remove some duplication in my scss selector.
.container {
.operation {
color: green;
}
.row.is-active &,
.row:hover & {
.operation {
color: inherit;
}
}
}
I tried rewriting it like this:
.container {
.operation {
color: green;
}
.row & {
&.is-active, &:hover {
.operation {
color: inherit;
}
}
}
}
However, this causes .is-active to be applied to .container instead of .row
How can I target the syntactical parent when using the ampersand ?
I took some time to answer the question again, as I mis-understood it initially. Unfortunately there is absolutely no way possible to do this in SASS at the moment. Even when trying to make use of the more advanced SASS functions to manipulate selectors and strings it is not possible.
There is some Good News
It is possible to do using Stylus.
I have created a live Example on codepen.
// Stylus - not SASS
.container {
.operation {
color: green;
}
.row {
^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
.operation {
color: inherit;
}
}
}
}
I hope this helps you in some way, at the very least it might provide you with an option, but unfortunately SASS cannot achieve what you are attempting.
with Sass,
%red-text { color: red; }
.text-1 { #extend %red-text; }
.text-2 { #extend %red-text; }
.text-3 { #extend %red-text; }
will render
.text-1, .text-2, text-3 { color: red; }
Is it possible to compile like so?
.text-1,
.text-2,
.text-3 { color: red; }
Thanks!
Check this following link, you can set your output style in Sass.
SASS Refence - Output styles
Using the method found here, it works, but not for two parent classes.
For instance:
.one, .two {
#at-root a#{&} {
color: blue;
}
}
Produces:
a.one, .two {
color: blue;
}
Rather than the intended:
a.one, a.two {
color: blue;
}
Is there any way to get the intended result using a similar method?
You want to use the selector-append() function instead:
.one, .two {
#at-root #{selector-append(a, &)} {
color: blue;
}
}
Using interpolation on the parent selector causes Sass to evaluate it as a string (because that's what interpolation does). This only makes it acceptable to use when you have a single selector. The selector-append (and all other selector-* functions) will evaluate the selector as a list of selectors, appending your desired item to each selector in the list.
This is now possible in pure CSS with the :is() matching pseudo-class:
.one, .two {
&:is(a) {
color: blue;
}
}
Or you simply switch to stylus:
.one,
.two {
a& {
color: blue;
}
}
Codepen Example
I have the following sample code:
.level1 {
// css
.level2 {
// css
. level3 {
// css
color: red;
}
}
And then
.level1.blue .level .level3 {
color: blue
}
I would like to put the second rule somehow on the first bit of code, so that I don't repeat the structure again and I have both color possibilities above, is this possible in anyway?
I wasn't planning on answering my own question, but it seems that I found out exactly what I was looking for only it has recently being added to sass and will be available on sass 3.4. I believe there's a prerelease to tried but I havent tried it yet.
Basically what I was looking has been answered to me on github:
https://github.com/sass/sass/issues/286#issuecomment-49112243
So on 3.4 you can do:
.level1 {
.level2 {
.level3 {
#at-root #{selector-append(".blue", &)} {
color: blue;
}
color: red;
}
}
}
which is exactly what I was looking for.
There's a bunch of addition related to the parent selector (&), you can learn more from it at https://github.com/sass/sass/issues/1117
Bear in mind though, that at the time of writing this answer, all of this is rather new.
Also see: https://github.com/sass/sass/blob/master/doc-src/SASS_CHANGELOG.md
And: http://www.phase2technology.com/blog/everything-you-need-to-know-about-sass-3-4/
This:
#mixin level3color($color) {
.level2 {
.level3 {
color: $color;
}
}
}
.level1 {
#include level3color(#FF0000);
&.blue {
#include level3color(#0000FF);
}
}
produces this:
.level1 .level2 .level3 {
color: red;
}
.level1.blue .level2 .level3 {
color: blue;
}
Gotta love mixins!
EDIT:
This is still pretty clean (or at least clean considering what you're trying to do) because you can still have your structure there.
.level1 {
// css
.level2 {
// css
.level3 {
// css
color: red;
}
}
&.blue { #include level3color(blue); }
&.yellow { #include level3color(yellow); }
}
A simple example:
.child{
background-color:red;
.parent:hover &{
background-color:blue;
}
}
goes into
.child {
background-color: red;
}
.parent:hover .child {
background-color: blue;
}
http://sassmeister.com/gist/e994e056d3cc3b342e2c