This question already has answers here:
Can I programmatically determine a property value for a series of CSS classes?
(2 answers)
Closed 7 years ago.
I have many lines of CSS that essentially do the same thing over and over based on the class name:
.m45 {
height: 90px;
}
.m50 {
height: 100px;
}
.m55 {
height: 110px;
}
.m60 {
...
Is there any way to automate this so that a class that matches m followed by any number n gets the style height: calc(2px * n)?
No, CSS can't automate increases like this; it doesn't have support for functions like that. You can, however, use a CSS pre-processor like Sass to write shorter code that can handle things like a #for loop. Sass compiles into longer, normal CSS.
Related
This question already has an answer here:
What do these double-dash-prefixed CSS properties do? [duplicate]
(1 answer)
Closed 5 months ago.
I have seen a site styling
html
{
--r-globalnav-height: 44px;
}
what does this mean?
It is CSS variable. It can contain specific values to be used multiple times in a style sheets.
You can then use the variable from your example as follows:
nav {
height: var(--r-globalnav-height); /* height: 44px */
}
You can read more at Using CSS custom properties (variables) - MDN
This question already has answers here:
Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type
(2 answers)
Closed 6 years ago.
How can I sum these css selectors together?
td:nth-child(1), td:nth-child(4), td:nth-child(5) {
font-size: 25px;
}
I thought of something like
td:nth-child(1,4,5) {
font-size: 25px;
}
but this doesnt work. Is there a way to condense this?
If you can't use a an+b formula to target them (which is the case in your particular example), then the code you wrote is the shortest version.
If you wish to simplify the CSS code, you could switch to classes... that however will make your HTML less clean.
This question already has answers here:
Sass Variable in CSS calc() function
(6 answers)
Closed 8 years ago.
Is there anyway to force emCalc to run in Foundation. For example I have this code.
.rule {
height: calc(100% - emCalc(10px));
}
The sass simple produces exactly that, without running the emCalc function. Is there anyway to force the sass processor to run the emCalc function first?
You can do it like this:
.rule {
height: calc(100% - #{emCalc(10px)});
}
This question already has answers here:
Append the parent selector to the end with Sass
(1 answer)
Using SASS & reference for OOCSS
(1 answer)
Closed 8 years ago.
I have a class named button_class. Now a button or an input tag could have this class. Now using sass, I need to add something to the css if the tag name is input. Like this:
.button_class {
display: inline-block;
/* something like this */
& input {
padding: 2px;
}
}
As you guessed, I don't know how to do that.
SASS syntax doesn't permit this yet. :(
&input gives
"input" may only be used at the beginning of a compound selector
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 4 years ago.
Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:
div.a {
color: red;
div.b {
font-weight: bold;
}
}
I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.
My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?
That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSS or LESS and I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:
div.a {
color: red;
}
div.a div.b {
/* Inherits color from div.a */
font-weight: bold;
}
What you are probably referring to is LESS.
The example, you gave is not valid CSS, but is valid with LESS. LESS will "compile" the nested CSS and convert it to something which is valid CSS.
You can nest rules with SASS, http://sass-lang.com/
Maybe that was it?
Seems there is a proposal over at https://tabatkins.github.io/specs/css-nesting/
but I can't find the status of it