Is there a way to set the value of a property for a CSS class dynamically, without using a compiler or javascript.
:root {
--color-0 : red;
--color-1 : blue;
--color-3 : yellow;
}
.bg-color-[*] {
background-color: var(--color-[*]);
}
Then in my html I could pass in the numeric value that is used to select the correct variable
<div class="bg-color-1">This background should be red</div>
<div class="bg-color-2">This background should be blue</div>
<div class="bg-color-3">This background should be yellow</div>
Unfortunately this is not possible in CSS. CSS itself doesn't really have the ability to add logic.
You might consider a CSS preprocessor. There are a few different "languages" that are very similar to CSS, but are more elaborate in terms of nesting and logic. An example is SASS. I know SASS can do this for you.
A CSS preprocessor then converts these SASS files to a normal CSS file.
In scss, you can do something like this :
#for $i from 1 through 3 {
.bg-color-#{$i} {
background-color: var(--color-#{$i});
}
}
Related
I want to define a variable in a CSS file like this:
:root {
--sidebar-width: 56;
}
I'd like to now refer to that in a component to define that component's width:
<div className="w-[var(--sidebar-width)]">
<MySidebar>
</div>
This doesn't work. What I'm trying to achieve is to add the w-56 class to that component and to do so as a variable so that I can refer to that variable in several places. Is this possible and if so, how do I specify this?
I'm pretty sure it's impossible.
Just do this instead:
:root {
--sidebar-width: 56;
}
<div className="w-[calc(4px*var(--sidebar-width)]">
<MySidebar>
</div>
1 tailwind unit is 4px.
Does CSS variables work in a Blazor component with CSS islolation files ?
When my component named Test.razor has no CSS isolation file and has the style set:
<h1 class="mh1">Test</h1>
<style>
:root {
--mblue:#0000ff;
}
.mh1{
color:var(--mblue);
}
</style>
Test is indeed blue.
However if I put the styles in a isolation file name Test.razor.css it does not work.
:root {
--mblue: #0000ff;
}
.mh1 {
color: var(--mblue);
}
The component Test resides in the index page:
#page "/"
<Test></Test>
What am I doing wrong?
The answer is yes, but not so sure that you can use :root in a css isolation file (the class is no longer called :root in a css isolation file -- it gets a random suffix with css isolation).
My approach has been as follows:
Use a wrapper element to provide a context to assign the css variables to.
Then use the variable in the class you assign to the relevant element.
Test.razor
<div class="test-wrapper">
<h1 class="mh1">Text</h1>
</div>
Test.razor.css
.test-wrapper {
--mblue: #0000ff;
}
.mh1 {
color: var(--mblue);
}
how do you apply a specific css to second-page
HTML
<div className = "section-header second-page">SOME MESSAGE</div>
Assuming the above:
CSS
.section-header {
background-color: black,
}
i want to apply a different background color specifically to second-page that does not modify section-header.
If you want the styling to apply to any element with .second-page class you should use:
.second-page {
backgound-color: red,
}
If you want the styling to apply only to .section-header elements that also have .second-page class, then you should use:
.section-header.second-page {
backgound-color: red,
}
When there's no space between two classes, it means it refers to an element with both classes.
For more information on CSS selectors, please check
https://www.w3schools.com/cssref/css_selectors.asp
Your HTML should be:
<div class="section-header second-page">SOME MESSAGE</div>
Your CSS could be:
.second-page {
background-color: black,
}
You can mix multiple classes within the HTML or target them separately.
If you need to validate your HTML code you can use this free service:
https://validator.w3.org/#validate_by_input
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
I have a very wierd question, I dont know wether if its possible in css or not
Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.
I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?
Is this even possible ?
.abc {
color:red;
}
.abc2 {
color:red;
}
.abc3 {
color:red;
}
.abc4 {
color:red;
}
.abc5 {
color:red;
}
The bad news: you can't do it in CSS.
The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a "mixin".
In LESS:
#errorColor: red;
.error-color {
color: #errorColor;
}
#error-1 {
.error-color;
}
.all-errors {
.error-color;
}
More info: http://lesscss.org/#-mixins
if you want to declare all of them at a time, you can use:
.abc, .abc2, .abc3, .abc4, .abc5 {
color:red;
}
Or you can declare an additional class & add to all the .abc, .abc2.... & make its color:red;.
This can not be done with CSS, but that is still a very popular thing to do by using a CSS preprocessor such as LESS, SASS, SCSS, or Stylus.
A preprocessor will let you define a variable (say $red = #F00). It will replace the variable in your CSS document with the variable value for you, allowing you to write very DRY and module CSS.
This functionality is referred to as "CSS variables", which is part of the future spec, but not yet implemented on any browsers.
For now, the best way to do this in pure CSS is to declare an additional class for the desired "global", and then add that class to all relevant items.
.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }
<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>
With LESS
You are able to define that red color once:
.myRedColor {
color:red;
}
Now you can call that red on any CSS styles. Even NESTED styles! It's a wicked tool!
.abc1 {
.myRedColor;
}
.abc2 {
.myRedColor;
}
.abc3 {
.myRedColor;
}
.abc4 {
.myRedColor;
}
NESTED EXAMPLE:
.abc {
.itsEasyAsOneTwoThree{
.myRedColor;
}
}
Now all of our "itsEasyAsOneTwoThree" classes that are properly nested inside of an "abc" class will be assigned the red style. No more remembering those long #867530 color codes :) How cool is that?!
You can also use PostCSS with the plugin postcss-preset-env and support custom properties/variables, then use the :root selector to add global css variables.
:root {
--color-gray: #333333;
--color-white: #ffffff;
--color-black: #000000;
}