I'm new to sass, could you please explain what the following statement mean?
[class*='icon--']::before {
#mixin icon;
}
Doe's it mean; add to ::before pseudo of all elements with a class, which begins with icon-- the icon mixin?
The above code is then used like this:
[class*='icon--']::before {
#mixin icon;
}
.icon--bag::before {
content: '\e602';
}
.icon--book::before {
content: '\e618';
}
Does it mean that the above code will be converted to this?
.icon--bag::before {
#mixin icon;
content: '\e602';
}
.icon--book::before {
#mixin icon;
content: '\e618';
}
It selects every class that contains the icon-- string and adds the icon mixin to its before pseudo element .
So lets say that mixin icon looks like
#mixin icon {
display: inline-block;
}
Then icon--bag would be
.icon--bag::before {
display: inline-block; /* from the mixin */
content: '\e602';
}
Related
I have the following HTML <div class="parent green"></div>
The green class may or may not be added. It is dynamic. It may also be another name.
In SASS how do I give properties to a .child element of parent when class green is chained to it?
I tried:
.parent {
.child {
.green & {
color: green;
}
}
}
It doesn't work.
I also tried the following which works but I am looking for something similar to the sass above. The code will become repeatable below because I have to add child each time for every dynamic class.
.parent {
&.green {
.child {
color: green;
}
}
}
I'm trying to get a structure like this if possible with sass:
.parent {
.child {
.green & { /* when .parent.green */
color: green;
}
.blue & { /* when .parent.blue */
color: blue;
}
.text-align-right & { /* when .parent.text-align-right */
text-align: right;
}
etc...
}
}
& is treated as parent selector reference in Sass, because of this your code doesn't work since it refers wrong selector.
Use of & directly will not help here, but your goal can be achieved by using mixins, for example:
#mixin child($class) {
&.#{$class} {
.child {
#content;
}
}
}
.parent {
#include child(green) {
color: green;
}
#include child(blue) {
color: blue;
}
#include child(text-align-right) {
text-align: right;
}
}
This piece of code produces result that you want to get, you can check in by yourself on sassmeister.
I have a anchor element that sometimes also has a class:
I wish to target this in sass to override css rules on anchor tags, I've tried:
a {
color: red;
}
.btn {
& a {
color: blue;
}
}
But with no luck.
How can this be done?
If you're trying to target anchor tags with the class .btn you can do this...
a {
&.btn {
// styles here
}
}
I have BEM structure like this (but the question not about BEM):
.form-element { //.form-element
...
&__control { //.form-element__control
...
}
//now I want to have specific rule: textarea.form-element__control
textarea& { // < here is an error
}
//it works like this:
textarea & {
}
}
I think, i'm missing something tiny, like a bracers, or something similar, if it's doable at all.
The question in the code comments :)
If you follow my example this will achieve what you are after.
Use the interpolation method #{ } and combine it with the #at-root function
#at-root textarea#{&} {
display: none;
}
My example here
.contact-block {
#at-root textarea#{&} {
display: none;
}
}
Compiles to
textarea.contact-block {
display: none;
}
So this is what yours would look like
.form-element {
&__control {
#at-root textarea#{&} {
display: none;
}
}
}
Compiling to
textarea.form-element__control {
display: none;
}
I want to nest selectors by prepending the parent selector in SCSS.
The basic selector is:
.selector-class .selector-class__element {}
Here is the HTML:
<div class="selector-class">
<div class="selector-class__element"></div>
</div>
(A) Here is the desired result in SCSS:
.selector-class {
.selector-class__element {
}
}
(B) This is the idea behind how I want to do it: (Does not work)
.selector-class {
&__element {
}
}
Is there a more effecient way of doing it than using the method in (A) ?
You just need to add an extra ampersand at the beginning:
.selector-class {
& &__element {
background: red;
}
}
You need to try this one. This is just an example for both class and element. You may try any one of them.
.selector-class {
&.class, &div { background: blue; }
}
EDIT
Below is the interpolation method of concatenating string.
.selector-class {
&#{'__element'} { background: blue; }
}
CSS
.selector-class .selector-class__element { background: blue; }
more about interpolation
interpolation
I'm trying to make a mixin that will let me create adapted blocks of code depending on what variable name you up in.
$foo: #00A9EC;
#mixin menu-color($color) {
.color-#{$color} a.level2,
.color-#{$color} a.level2:visited {
color: $color;
&:hover {
color: adjust-lightness($color, 10); }
&:active {
color: adjust-lightness($color, -10); } } }
#include menu-color($foo);
outputs:
.color-foo a.level2,
.color-foo a.level2:visited {
color: #00A9EC; }
.color-foo a.level2:hover,
.color-foo a.level2:visited:hover {
color: #20C0FF; }
.color-foo a.level2:active,
.color-foo a.level2:visited:active {
color: #0084B9; }
In sass you can do this using map, you just pass the variable name instead of the variable itself:
$colors: (
-black: #000,
-blue: #088DC6
);
#mixin generateBgColor($colorName) {
.bg-color#{$colorName} {
background-color: map-get($colors, $colorName);
}
}
#include generateBgColor("-blue");
This will generate class:
.bg-color-blue {
background-color: #088DC6;
}
You achieve this also in less with standard variables, just by using curly brackets and double at character:
#blue: #088DC6;
.generate-bg-color(#color) {
.bg-color-#{color} {
background-color: ##color;
}
}
.generate-bg-color(~"blue");
You should not name CSS classes after specific colors. You would regret that. Just think, if you want to make the color red later on, you would need to go back over all your html and change the classes.
The reason we have CSS is so that you don't have to embed style information in the markup.
Use a semantic class the describes the data, not how it is displayed:
$foo: #00A9EC;
#mixin menu-color($name, $color) {
.custom-#{$name} a.level2,
.custom-#{$name} a.level2:visited {
color: $color;
&:hover {
color: adjust-lightness($color, 10); }
&:active {
color: adjust-lightness($color, -10); } } }
#include menu-color(profile, $foo);
And then in your HTML <div class="custom-profile">.
That way, two years from now when you want to make it black, and underlined (or whatever), you don't have to dig through your html and add a new '.underlined-and-black-color` class to all of those elements. You just change your SCSS in one place.