This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
Or maybe there's preprocessor solution.
Suppose you have 20 buttons. Each with a different color.
The colors are set like this:
button {
background: red;
}
So you can write something like this
button:hover {
this.background: darken(10%);
}
And this will darken each button's background color.
Instead of writing color codes for each button which is red, blue, green, etc... And this can be applied also to more CSS properties.
Without JS of course.
Do they plan to introduce it? Is there a solutin via SASS/LESS/Stylus ?
There is nothing like that in Sass, but you can use a mixin like this code:
#mixin addColor($color) {
background: $color;
&:hover {
background: darken($color, 10%);
}
}
.foo {
#include addColor(red);
}
.anotherFoo {
#include addColor(blue);
}
Related
This question already has answers here:
Changing an input's HTML5 placeholder color with CSS does not work on Chrome
(4 answers)
Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
(2 answers)
Placeholder Mixin SCSS/CSS
(6 answers)
Closed 8 years ago.
Is there a way in sass to chain up selectors like this:
input {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder {
color: red;
}
}
With these special vendor-specific pseudo selectors, I've found putting them all together on one line does not result in them working very well cross-browser. I think the best optimization you can hope for then is something like this:
#mixin placeholderstyle() {
color: red;
}
input::-webkit-input-placeholder {
#include placeholderstyle()
}
input:-moz-placeholder {
#include placeholderstyle()
}
input::-moz-placeholder {
#include placeholderstyle()
}
input:-ms-input-placeholder {
#include placeholderstyle()
}
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 8 years ago.
I want to set up some sass color rules that will automatically choose the font color variable for me. I want the text color to be dependent on what color the background color of the parent div is.
If
div {background-color: #000; }
Then
div p { color: #fff; }
How can this be achieved with sass?
You could use lightness() function for the background-color to determine the color value, as follows:
#function set-color($color) {
#if (lightness($color) > 40) {
#return #000;
}
#else {
#return #FFF;
}
}
Then use the above function as below:
div { background-color: black; // Or whatever else }
div p { color: set-color(black); }
LIVE DEMO.
You could use control directives.
It depends on the purpose, but there might be easier ways to change a background color depending on a certain condition, such as Javascript.
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 9 years ago.
I am trying to create a top level <a> styling for the for my application using sass. Most of the links across the site are green so I have this as a style. (I'm using compass for the darken function)
a {
color: green;
&:hover {
color: darken(green, 10%);
}
}
However, in certain cases the links aren't green. In these cases I'll have to specify both the text color and the hover color, otherwise it will default to hovering to green. I am wondering if there is a way to do this DRYer. Ideally I would be able to get the parent classes color, like so.
a {
color: green;
&:hover {
color: darken(parent(color), 10%);
}
}
That way the hover will always default to whatever the color of the specific is. Does this make sense? Is something like this possible? If not, what's the best way to handle this? A Mixin?
Thanks!
What you ask is not possible with SASS. SASS does not build an object model with all elements and properties (it is impossible without HTML).
A mixin is an appropriate solution for a reusable case, but for an ad-hoc case it is an overkill.
Just use a variable:
a {
$link-color: green;
color: $link-color;
&:hover {
color: darken($link-color, 10%);
}
}
Note that you can move the variable into a separate partial where you store all your variables.
I'd use a mixin:
#mixin link($color) {
a { color: $color};
&:hover { color: darken($color, 10%) };
}
.foo {
#include link(green);
}
Rendered CSS:
.foo a { color: green; }
.foo a:hover { color: #004d00; }
I should have asked this in my previous question (CSS style declaration reusage), but I didn't think of it at the time. Since that question is answered, I'll start a new one.
I am trying to create color palette in CSS that will be used through out my application.
For example:
.blue { color: #434544; }
.green { color: #G99933; }
I do not want to define colors anywhere else in my CSS. The problem I am running into is how do i use the .blue style when, for example, I need a background-color definition? Take a look at this:
.editor { background-color: #434544 }
I want to reference back to the .blue style instead of defining it here again. How can I do that?
UPDATE
I found the perfect solution for my question:
Chirpy -> http://chirpy.codeplex.com/
There's no way to do this in native CSS. You should look into pre-processing your CSS, since all those pre-processors have support for variables.
Here's what it looks like using (scss-flavored) SASS:
$blue: #434544;
$green: #G99933;
.blue { color: $blue; }
.green { color: $green; }
.editor { background-color: $blue }
Hi I'm still very new to SASS and no programming guru.
I have ten asides elements that all require different background colours based on their class name.
I've looked through the SASS documentation and I can't figure it out.
I want to say if aside has a class name of x make background colour x if aside has a class name of y make background colour y etc
Is there a nice efficient way of doing this?
Thanks guys and sorry if its a simpleton question.
If you're using colors that don't have "standard" names (or the name of the class isn't going to be the name a color at all, eg. products = blue, addresses = red), a list of lists is what you want:
$colors:
( black #000
, white #FFF
, red #F00
, green #0F0
, blue #00F
);
#each $i in $colors {
aside.#{nth($i, 1)} {
background: nth($i, 2);
}
}
Output:
aside.black {
background: black; }
aside.white {
background: white; }
aside.red {
background: red; }
aside.green {
background: lime; }
aside.blue {
background: blue; }
If you're using colors with standard keywords, this could work:
$colors2: black, white, red, green, blue;
#each $i in $colors2 {
aside.#{$i} { background: $i; }
}
Output (though this only seems to work with --style debug, using --style compress generates errors.. weird):
aside.black {
background: black; }
aside.white {
background: white; }
aside.red {
background: red; }
aside.green {
background: green; }
aside.blue {
background: blue; }
This is simply down to how much typing you want to do. You could make a background mixin and include it within the aside CSS rule, but is that really necessary?
If it is though....
#mixin bg($color) {
background: $color;
}
aside#foo {
#include bg(#fff);
}
"if aside has a class name of x make background colour x if aside has a class name of y make background colour y" translates to the following CSS:
aside.x {background-color: x}
aside.y {background-color: y}
Is there a reason you want to use SASS? Is it to make it dynamic so that you can add any class you want in the future without updating the CSS? (If so that's not possible with SASS because the SASS code compiles to CSS and doesn't change after).
To make that work you'd have to use JS (jQuery):
$('aside').each(function () {
$(this).css('background-color', $(this).attr('class'));
});
Edit: You could use loops in SASS to generate a large number of classes and corresponding background-colors though.