For example, I would like to be able to do this:
.bigfirstletter(#mag) {
&:first-letter {
font-size: [get_original_font_size] + #mag;
}
}
But as far as I can see I have to do this, which is not as neat
.bigfirstletter(#fontsize, #mag) {
&:first-letter {
font-size: #fontsize + #mag;
}
}
Do I have an alternative? Thank you for your help.
damn it was simpler than I thought :)
.bigfirstletter(#mag) {
&:first-letter {
font-size: 1em * #mag;
}
}
1em will simply inherit whatever it is defined for element, and you just set your magnification. I changed the plus sign to multiply on purpose as with this you're going to have better control over font size - #mag=1.0 for same font size, #mag=1.5 for 50% bigger, and so on..
sorry about the answer below, for some reason I didn't see that you're using first-letter in the example provided (doh!)
take a look at :first-letter CSS pseudo class - here
Related
I would like to change grid color on Chartist.js from default grey. I tried to override ct-grid-color setting, but probably did something incorrectly. Can anyone please suggest how to do it?
Just insert in your CSS.
.ct-grid{ stroke: red;}
grid lines:
.ct-grids line {
color: steelblue;
}
.. and don't forget the labels! ..
grid labels:
.ct-labels span {
color: steelblue;
}
The reason why targeting only ".ct-grid" won't work is due to css specificity. Basically the more specific the css, the more important it becomes so ..
.ct-grids line { } > .ct-grids { }
If it's a little confusing, a nifty little tool is Keegan Street's css specificity calculator.
The following LESS code fails to compile, despite the fact that #color is correctly resolved to #3AD49E. (Thanks to Defining Variable Variables using LESS CSS .)
#success-color: #3AD49E;
#darken-percent: 5%;
.make-colored-div(#name) {
#color: ~'#{#{name}-color}';
&.#{name} {
background: #color;
border-color: darken(#color, #darken-percent);
}
}
button {
.make-colored-div(success);
}
Any ideas how to get darken to work?
This happens because you must convert #color in HSL space, before applying it darken function.
Key code should be:
#color1: hsl(hue(#color), saturation(#color), lightness(#color));
But it does not run as is. You need to pass through a #temp variable, in order to do a double (and intermediate) passage to obtain HSL conversion. Complete code follows:
#success-color: #3AD49E;
#darken-percent: 5%;
.make-colored-div(#name) {
#color: ~'#{#{name}-color}';
&.#{name} {
#temp:~'#{name}-color';
#final-color: hsl(hue(##temp), saturation(##temp), lightness(##temp));
background: #final-color;
border-color: darken(#final-color, #darken-percent);
}
}
button {
.make-colored-div(success);
}
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
I've made the following two Mixins:
.responsive_color(#color, #response_color, #speed: 0.1s){
color: #color;
.transition(color, #speed);
&:hover, &:active, &:focus{
color: #response_color;
}
}
.responsive_background(#color, #response_color, #speed: 0.1s){
background-color: #color;
.transition(background-color, #speed);
&:hover, &:active, &:focus{
background-color: #response_color;
}
}
Since these two are nearly identical I want to combine them into something like this:
.responsive(#property, #color, #response_color, #speed: 0.1s){
#property: #color;
.transition(#property, #speed);
&:hover, &:active, &:focus{
#property: #response_color;
}
}
While this doesn't cause errors in the LESS parser (PHP class) it is simply ignored.
I've also tried #{property} and '#{property}' but both of these cause errors.
Does anyone know how I can output #property to be properly parsed?
Or am I trying to do something that isn't possible?
Just a quick update. Now the feature is there:
Properties can be interpolated, e.g. #{prefix}-property: value;
— Less.js 1.6.0 changelog
So if you're using Less 1.6 or later, now you can actually do it like this:
#{property}: #response_color;
More info in this great SO answer.
A similar question has been answered here that may help you. That particular feature isn't in the LESS.js framework (yet), but you can possibly get around it with a little hack, outlined here:
How to pass a property name as an argument to a mixin in less
Had a few problems getting background-image displaying in Firefox, I made it work but was surprised at how bloated the CSS became. It now works great, but I need to replicate base CSS code for multiple images.
Can anyone tell me if it is possible to optimise the CSS classes and minimise the amount of code. I cannot utilize the already used id's, and class='imga p0' doesn't work (where p0 just holds the background-position, becoming p1, p2, p3 .. for each image position).
Thanks in advance for any advice.
a.imga0 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
display:block;width:24px;height:24px;background-position:-288px 0;} /* tick green */
a.imga1 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
display:block;width:24px;height:24px;background-position:-312px 0;} /* cross grey */
a.imga2 { ..... and so on.
Edit:
So this should eliminate the repetition
/* template */
a.imag0, a.imag1, a.imag2 {
display: block;
width: 24px;
height: 24px;
background:url(../images/sprite.png) no-repeat;background-color:transparent;
}
/* specifications */
a.imag0 {
background-position:-288px 0;
}
a.imag1 {
background-position:-312px 0;
}
For one you could create a general selector
a {
background:url(../images/sprite.png) no-repeat;background-color:transparent;
display: block;
}
Which would apply the general style, such as the sprite image.
You could also create a separate class (specify more classes with spaces)
So for example, you could have
<a class="imag0 spriteclass">something</a>
<a class="imag1 spriteclass">something</a>
<a class="imag2 spriteclass">something</a>
And
a.spriteclass {
//again the template, such as the sprite and display type and width
}
Your second option is to list out the selectors you want the css to apply to,
a.imag0, a.imag1, a.imag2... {
// your general css
}
And then like above specify the specific sprite positions and details separately
Adding this just in case some one refers to this post later.
You can generate the most optimized CSS using this below tool.
http://www.spritecss.com/