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
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.
In Sass/SCSS, is there any way to wrap an existing rule like this:
.foo {
color: red;
}
to produce output like this:
.foo,
.bar .foo {
color: red;
}
?
I know you can use the parent selector to accomplish this:
.foo {
&,
.bar & {
color: red;
}
}
but that requires modifying the existing rule. Ideally there'd be something magical like this that you could do at the root:
#noop,
.bar {
.foo {
color: red;
}
}
(I've tried #at-root but that doesn't work in list selectors, and just an ampersand & doesn't work at the root)
If you want to wrap a class without modifying it, you need to create a mixin which extends from that class.
The mixin I created here allows to pass a list as a parameter in order to put multiple selectors.
#mixin wrap($content){
#if (type-of($content) == string){
& #{$content} {
#extend #{$content};
}
}#else if (type-of($content) == list){
#each $class in $content{
& #{$class} {
#extend #{$class};
}
}
}
}
.red {
color: red;
}
.blue {
color: blue;
}
.wrap-1{
#include wrap('.red' '.blue');
}
.wrap-2{
#include wrap('.red');
}
Outputs:
.red, .wrap-2 .red, .wrap-1 .red {
color: red;
}
.blue, .wrap-1 .blue {
color: blue;
}
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.
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
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