Is there any way I can reference parent value, like per example
.btn-blue {
background-color: $light-blue;
&:hover {
background-color: rgba($light-blue,.7);
}
}
.btn-green {
background-color: $light-green;
&:hover {
background-color: rgba($light-green,.7);
}
}
I would like to write one :hover selector which would get the value of the parent. Something like
.btn-blue {
background-color: $light-blue;
}
.btn-green {
background-color: $light-green;
}
.btn-green, .btn-blue {
&:hover {
background-color: rgba($parent_color,.7);
}
}
Any ideas?
You can use mxins and pass the color in:
#mixin btn-color($selColor)
{
background-color: $selColor;
&:hover { background-color: rgba($selColor,.7);
}
}
And use it like so:
.btn-green { #include btn-color($light-green); }
.btn-blue { #include btn-color($light-blue); }
Related
I'm using pseudo selectors for my hover and active classes. In this case the color for the hover and active is the same. The way to do it would be like this:
a {
color: #0090B2;
&:hover {
color: #FF7A00;
}
&.active {
color: #FF7A00;
}
}
but I would like to not repeat the same attributes, I'm looking for something like this, of course that doesn't work but you get the idea what I wanna do. How would be the right way to do it?. Should I just use a mixin?
a {
color: #0090B2;
&:hover, &.active {
color: #FF7A00;
}
}
Option 1
I don't understand what is wrong with your way, it's work for me:
a {
color: #0090B2;
&:hover, &.active {
color: #FF7A00;
}
}
Which will give you:
a {
color: #00acc1;
}
a:hover, a.active {
color: #0f9d58;
}
Option 2
a {
color : #00acc1;;
&:hover {
#extend %active_link;
}
&.active {
#extend %active_link;
}
}
%active_link {
color: #0f9d58;
}
Same results as before.
But, here you can do things like:
a {
color : #00acc1;;
&:hover {
#extend %active_link;
content: "AAA";
}
&.active {
#extend %active_link;
content: "BBB";
}
}
%active_link {
color: #0f9d58;
}
and get:
a {
color: #00acc1;
}
a:hover {
content: "AAA";
}
a.active {
content: "BBB";
}
a:hover, a.active {
color: #0f9d58;
}
Hi can you check please following code? I want define some styles for class, and next apply same styles for another class. I've used inheritance for that but styles from parent aren't used:
.parent-item {
&:not(:last-child) {
margin-right: 20px;
}
}
.child-item {
&:extend(.parent-item);
//...
}
just add the word all next to the name of the class
.child-item {
&:extend(.parent-item all);
//...
}
for example
.parent-item {
color: green;
background: red;
&:not(:last-child) {
margin-right: 20px;
}
&:last-child {
color: red;
}
&:hover {
color: red;
}
}
.child-item {
&:extend(.parent-item all);
//...
}
result will be
.parent-item,
.child-item {
color: green;
background: red;
}
.parent-item:not(:last-child),
.child-item:not(:last-child) {
margin-right: 20px;
}
.parent-item:last-child,
.child-item:last-child {
color: red;
}
.parent-item:hover,
.child-item:hover {
color: red;
}
How could I disable background-color in .button.search so it would fallback to $red value? I can't remove it; I can only overwrite it.
I have
.button {
background-color: {$red};
}
and
.button.search {
background-color: #000;
}
Don't need for any additional setting in search.
.button {
background-color: $red;
}
.button.search {
/* no background-color setting would fallback to $red*/
}
I would do it like this so you can extend the style from .search and it will always fallback with whatever you define and incase you want to have new value for the .active class you can just write background-color: green; after #extend .search;
.search {
background-color: red;
&.active {
#extend .search;
// background-color: green;
}
}
result will be like that
.search, .search.active {
background-color: red;
}
and if you will do that
.search {
background-color: red;
&.active {
#extend .search;
background-color: green;
}
}
and result will be like that
.search, .search.active {
background-color: red;
}
.search.active {
background-color: green;
}
I try to understand BEVM+SCSS philosophy.
I don't know how to extend V from BE in this case.
What I want to achieve:
.block {
&__element {
background-color: black;
&--variation-a {
#extend &__element; //won't work
color: red;
}
&--variation-b {
#extend &__element; //won't work
color: green;
}
}
}
What I want to avoid:
.block {
&__element {
background-color: black;
&--variation-a {
#extend .block__element; //work but ugly
color: red;
}
&--variation-b {
#extend .block__element; //work but ugly
color: green;
}
}
}
The only way I've found it's to have a kind of %element { ... } aside and extends from it, but it's not exactly what I want.
You can use variables. $b to store block name and $e to store element name.
Sassmeister demo.
.block {
$b: &;
&__element {
$e: #{$b}__element;
background-color: black;
&--variation-a {
#extend #{$e};
color: red;
}
&--variation-b {
#extend #{$e};
color: green;
}
}
}
But it's bad practice to nest element styles by modifier. Modifier must only override styles.
Can I use this code (SCSS):
#block {
&:hover {
#link_inside_of_block {
new style for link in the block: on block hover;
}
}
}
I've written this code, but it doesn't work for me.
Do this:
#block {
&:hover {
#link_inside_of_block {
color: #000;
&:hover {
color: red;
}
}
}
}
This will generate to:
#block:hover #link_inside_of_block {
color: #000;
}
#block:hover #link_inside_of_block:hover {
color: red;
}
You can play around on SassMeister. Have a look at my sample
Try this:
#block {
#link_inside_of_block {
&:hover {
new style for link in the block: on block hover;
}
}
}