Is there a way to target the "root selector" via sass's mixin? (not the #at-root selector)
For example:
.wrapper {
background-color: yellow;
.field{
#include root {
.x{
background-color: red;
}
}
}
}
outputs this
.wrapper {
background-color: yellow;
}
.wrapper .x {
background-color: red;
}
Related
I am new to sass.
Here is my code in scss. Just wondering if this can be simplified further i.e i dont want to repeat the style color, text-decoration and transition.
a {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
div.menu-item-click {
&:hover, &:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
}
Note exactly that use case is covvered better by ReSedano.
You cand do it using mixins:
#mixin mixinName {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
#include mixinName;
}
div.menu-item-click {
&:hover, &:focus {
#include mixinName;
}
}
Also here is example with variables:
#mixin icon($width) {
width: $width;
stroke: currentColor;
}
.icon {
#include icon(25px);
}
And here is example with body
#mixin desktop ($xl: null) { // look here is default Value!
#media (min-width: if($xl, $xl, $screen-desktop)) {
#content; // here is true magic
}
}
.page {
#include desktop { // you may ignore variable because we have default
padding: 30px;
}
}
For this, maybe it is better using a placeholder with #extend directive (the output is less verbose than using a mixin):
%my-class {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
#extend %my-class;
}
div.menu-item-click {
&:hover, &:focus {
#extend %my-class;
}
}
The output is:
a, div.menu-item-click:hover, div.menu-item-click:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
After converting a lot of redundant crappy css files into scss files, I have a bunch of scss files. I'm pretty sure there is a lot of common css repeated among these files and I would like to extract this code.
As an example, let's say I have this block of scss code (let's call it block A) :
.test {
color: white;
.toto {
background: red;
font-size: 12px;
}
}
And another block (that we'll call block B) :
.test {
color: black;
.toto {
background: blue;
font-size: 12px;
text-align: center;
}
}
I want to be able to extract the following common scss code from block A and B :
.test {
.toto {
font-size: 12px;
}
}
It seems like a simple task to do, but with a large list of long scss files, it's really painful to do it manually. After searching for a while I didn't find any tool for that.
An intermediary solution could be to convert sass code to a multi-dimensionnal associative array and to process arrays to find intersections, but I could not find any simple solution to do that either, so any help would be appreciated.
There are a few approaches but in this instance, I would opt for a variable:
$base-font-size: 12px;
.test {
color: white;
.toto {
background: red;
font-size: $base-font-size;
}
}
.test {
color: black;
.toto {
background: blue;
font-size: $base-font-size;
text-align: center;
}
}
Or you could add a toto mixin with some defaults and use that:
#mixin toto($background: red, $text-align: left, $font-size: 12px) {
.toto {
background: $background;
text-align: $text-align;
font-size: $font-size;
}
}
.test {
color: white;
#include toto();
}
.test {
color: black;
#include toto(blue, center);
}
EDIT: or use extend:
.font-size-12 {
font-size: 12px;
}
.test {
color: white;
.toto {
#extend .font-size-12;
background: red;
}
}
.test {
color: black;
.toto {
#extend .font-size-12;
background: blue;
text-align: center;
}
}
I have the following SCSS:
.btn {
color: #000;
#at-root {
a#{&} {
display: inline-block;
}
}
}
I'm expecting the following CSS:
.btn { color: #000; }
a.btn { display: inline-block; }
But when I compile it using gulp-sass, I get this instead:
.btn { color: #000; }
.btn a.btn { display: inline-block; }
This appears to be a bug with Libsass, which is what gulp-sass compiles with. If you want to get the correct results, you'll need to switch to using the Ruby compiler for Sass.
Is it possible to include a css rule in sass without duplicate the code?
With extend we are extending the code, but i dont want that eiter. I want include it, without duplicating code.
For example
SCSS:
.heading {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
h1 {
#extend .heading;
color: white;
}
}
.my-other-box {
.heading {
color: black;
}
}
HTML
<div class="box">
<h1>My heading</h1>
</div>
<div class="my-other-box">
<h1 class="heading">My heading</h1>
</div>
CSS
.heading, .box h1 {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
}
.box h1 {
color: white;
}
.my-other-box .heading,
.my-other-box .box h1,
.box .my-other-box h1 {
color: black;
}
So the two last rules there are because its extending (I understand the benifits of it).
But if i want to both use classes, and extends i dont want it to extend, just include it. But i dont want it to duplicate the code.
I want:
CSS
.heading, .box h1 {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
}
.box h1 {
color: white;
}
.my-other-box .heading {
color: black;
}
If you use an extend class (or use a class name that differs from one you're repeating elsewhere), you can get the output you're looking for:
%heading, .heading {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
h1 {
#extend %heading;
color: white;
}
}
.my-other-box {
.heading {
color: black;
}
}
Output:
.box h1, .heading {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
}
.box h1 {
color: white;
}
.my-other-box .heading {
color: black;
}
Maybe a better question would be, Is there a more efficient way to override parts of a mixin?
This piece of SCSS:
#mixin button {
.button {
background-color: red;
color: white;
}
}
.container {
#include button;
.button {
background-color: green;
}
}
compiles to:
.container .button {
background-color: red;
color: white;
}
.container .button {
background-color: green;
}
I wish it could compile to:
.container .button {
background-color: green;
color: white;
}
Pass an argument into the mixin instead:
#mixin button($color: red) {
background-color: $color;
color: white;
}
.container {
.button {
#include button(green);
}
}