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.
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'm trying to create a little overview for all the colors we use in our corporate identity. All our colors have been defined in _settings-colors.scss, and the only reason I need this bit of css is for the library, where the colors need to be listed.
What I have now is as follows:
$colors-brand: color-brand, color-brand-40, color-brand-60, color-brand-70;
.prfx-color {
display: block;
height: 5rem;
width: 100%;
#each $color in $colors-brand {
&--#{$color} {
background-color: #{'$'+$color};
&::after {
content: '$'+$color;
}
}
}
}
These color-brand variables are set in another file which I'm including in this scss file.
The code above outputs this:
.prfx-color {
display: block;
height: 5rem;
width: 100%;
}
.prfx-color--color-brand {
background: $color-brand;
}
.prfx-color--color-brand::after {
content: "$color-brand";
} [...etc]
What I'm after however, is this:
.prfx-color--color-brand {
background: #00ff11; // don't worry, brand is not actually this color
}
The problem I'm having is that the $color-brand variable isn't interpreted as a sass variable anymore, but is a literal value. I need the #hheexx that this variable refers to!
All the solutions I've found so far consist of using two lists, or a key-value pair. In my situation these variables have already been set once, and I want a solution where I don't want to have to manually edit the library if the colors change.
Is this at all possibe, or am I too greedy here?
And I realized I overcomplicated it. You don't need any extra functions because the #each is designed to work with maps and iterating over multiple values.
$cool: blue;
$mad: red;
$colors: (
cool: $cool,
mad: $mad
);
.prfx-color {
#each $key, $val in $colors {
&--#{$key} {
background-color: $val;
&::after { content: "$#{$key}"; }
}
}
}
You could use a map.
Here's a sassmeister playground for you.
$cool: blue;
$mad: red;
$colors: (
cool: $cool,
mad: $mad
);
.prfx-color {
#each $color in map-keys($colors) {
&--#{$color} {
background-color: map-get($colors, $color);
&::after { content: "$#{$color}"; }
}
}
}
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
I have the following sass code:
.class{
label{
color:#fff;
.disabled &{color:#333; }
}
}
which outputs
.disabled .class label
Is there a way to output the parent selector without any grandparent selectors being included? Like so:
.disabled label
There's no way I know of in SASS to pick and choose from ancestor selectors when using a parent reference. With your code, though, a little reorganization can get you the same result:
label {
.class & {
color: #fff;
}
.disabled & {
color:#333;
}
}
Compiles to:
.class label {
color: #fff; }
.disabled label {
color: #333; }
Even though hopper is not enterly wrong, you can actually select grand-parent with variables.
You can achieve what you want with this:
.class{
label{
color:#fff;
$selector: nth(&,1);
$direct-parent: nth($selector, length($selector));
#at-root #{$direct-parent} {
.disabled &{color:#333; }
};
}
}
Which will generate this css:
.class label {
color: #fff;
}
.disabled label {
color: #333;
}
The parent selector is always a reference to the entire resolved selector from the previous level of nesting. There is no concept of "parent" or "grandparent", especially when concatenating selectors or using the parent selector at the end muddies the water.
Disclaimer: I do not recommend doing this unless you really really need to.
Starting with Sass 3.4, you can extract portions of a selector by using & as a variable. When used this way, you'll get a list of list of strings (which can be looped over, etc.).
Extracting a part or slice of a selector
This function here uses the same style of arguments as the string-slice function:
#function selector-slice($sel, $start: 1, $end: -1) {
$collector: ();
#each $s in $sel {
// calculate our true start and end indices when given negative numbers
$_s: if($start > 0, $start, length($s) + $start + 1);
$_e: if($end > 0, $end, length($s) + $end + 1);
$c: ();
#for $i from $_s through $_e {
$c: append($c, nth($s, $i));
}
// prevent duplicates from creeping in
#if not index($collector, $c) {
$collector: append($collector, $c);
}
}
#return $collector;
}
/* complex example */
.one-a, .one-b {
two {
three {
color: red;
&:before {
#at-root #{selector-slice(&, 2, 3)} {
color: green;
}
}
}
}
}
/* your example */
.class {
label {
color:#fff;
#at-root #{selector-slice(&, -1, -1)} {
.disabled & {
color:#333;
}
}
}
}
Output:
/* complex example */
.one-a two three, .one-b two three {
color: red;
}
two three:before {
color: green;
}
/* your example */
.class label {
color: #fff;
}
.disabled label {
color: #333;
}
As an added bonus, you can use this function to reverse the order of the selectors by passing in the larger index before the smaller one.
.one-a, .one-b {
two {
three {
color: red;
&:before {
#at-root #{selector-slice(&, 3, 2)} {
color: green;
}
}
}
}
}
Output:
.one-a two three, .one-b two three {
color: red;
}
three:before two {
color: green;
}
Related: Modifying the middle of a selector in Sass (adding/removing classes, etc.)
Replacing one class with another
Alternately, you could just use the selector-replace function from the standard library if what you're looking to do is replace one class with another.
.class {
label {
color:#fff;
#at-root #{selector-replace(&, '.class', '.disabled')} {
color:#333;
}
}
}
Output:
.class label {
color: #fff;
}
.disabled label {
color: #333;
}