I'm setting up a CSS for a website where all the links, in :hover state, are darker than in normal state.
I'm using Sass/Compass so I looked to the darken Sass method, here : http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method
Here's the use : darken($color, $amount)
My question is : how can I make this "automatic" to set all my <a> elements to be 80% darker ?
What I'm trying to do is (Sass syntax) :
a
background: $blue
&:hover
background: darken(this element background-color, 80%)
What's the best solution to do this ?
I thought about this.
The only way I found is by creating a mixin :
#mixin setBgColorAndHover($baseColor)
background-color: $baseColor
&:hover
background-color: darken($baseColor, 5%)
And then :
.button
+setBgColorAndHover($green) // as $green is a color variable I use.
Not the best, but that will do the job :)
By now, better to use a filter in native CSS:
.button:hover {
filter: brightness(85%);
}
Related
Say you have the CSS custom property for a color:
--color: 255,0,0
And you want to mix it specially every time with rgb or rgba as the need requires. This is valid CSS:
rgba(var(--color), .3)
...but Sass explodes. I've been trying to see if I could write a mixin or something but I can't figure out how to get around Sass's insistence on using it's own color functions even when they are not necessary.
Got it! This is a bit hacky but this allows you to create a custom function that utilizes the rgba() function with CSS custom properties (as allowed in the spec):
#function swatch($swatch-color, $swatch-alpha:1) {
#return unquote("rgba(var(--#{$swatch-color}), #{$swatch-alpha})");
}
:root {
--green: 0,255,0;
}
.green { color: swatch(green, .1); }
Found the key to the solution in a Sass bug report. This only works because the unquoting and interpolation bypass the default rgba() function.
Perhaps using interpolation rgba(#{--color}, .3)?
Another temporary workaround for this is to use RGB values only in your variables like you are already:
--color: 255, 255, 255;
Then if you use the RGB or RGBA function with capitals, SASS will ignore it and plain CSS is able to parse it. You can then adjust the opacity!
RGB(var(--color));
RGBA(var(--color), .3);
rgba(var(--color), .3) is not valid:
div {
width: 50px;
height: 20px;
outline: 1px dashed black;
}
:root {
--color: red;
}
#correct {
background: var(--color);
}
#incorrect {
background: rgba(var(--color), .3);
}
<div id="correct"></div>
<div id="incorrect"></div>
With the LESS preprocessor, you can nest CSS code inside other CSS code, like this:
.Element {
.AnotherElement {
background-color: #FFF;
}
.YetAnotherElement {
background-color: #000;
}
}
This would make the background of .Element .AnotherElement white, and it makes .Element .YetAnotherElement have a background color of black. It does it all without writing it out like:
.Element .AnotherElement {
background-color: #FFF;
}
.Element .YetAnotherElement {
background-color: #000;
}
Does the first example coincide with CSS syntax, or do I have to use the LESS preprocessor?
Nesting is a feature of LESS and SASS, not native to CSS.
This is one of the most common uses for CSS preprocessors, but they offer a lot more too.
No, css doesn't support this syntax, in your css example the "Element" and "AnotherElement" will to receive this properties, AnotherElement will not inherit properties of Element.
Is it possible in Less to create a mixin that can target the backgroubd opacity of an element that already has its background colour set by an existing rule?
E.g
div {
background-colour: red;
}
.opacity {
background-color: fade(#existing-bg, 50%)
}
If I understand you correctly, then not in the sense that you are trying to do - #existing-bg would need to be able to assess the current BG colour at RUNTIME but essentially, we use LESS at compile time. The answer would be to put the colour (red) in a variable and supply the same variable in both places.
#existing: #ff0000;
div {
background-colour: #existing;
}
.opacity {
background-color: fade(#existing, 50%)
}
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 have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars