Hello I know this might be a duplicate question but I've tried everything I was able to find on the internet but nothing works.
following these suggestions in this link
both functions rgba() and rgb() don't reflect any changes when using sass or css variables in them.
--color: 1,60,255;
// usage
border: 1px solid rgba(var(--color), 0.4);
doesn't work
border: 1px solid RGBA(var(--color), 0.4);
doesn't work either even after capitalizing the letters
border: #{'1px solid rgba(var(--color), 0.4)'};
sass interpolation doesn't work too
only this one works
border: 1px solid RGBA(1, 60, 255, 0.4);
but if I want to start using this last solution, I won't be able to use the variables and if something changes I'll have to do so much dummy work.
When you use css variables (custom properties) you need to apply them to an element (:root if you want to declare them globally). You can't simply declare them in the way you would declare a Sass variable. So in your example it would look something like:
:root {
--color: rgba(1, 60, 255, .4);
}
div {
border: 1px solid var(--color);
}
Related
I have this sass file with some variables that I'll use in my application, and I'm using Laravel Mix to compile them.
I'm putting all those variables in :root and this is the only styling in this element.
This is the faulty part:
--sg-card-produto-hover-bg: #c3c3c3;
--sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
--sg-card-produto-hover-border-width: 2px;
--sg-card-produto-hover-border-style: solid;
--sg-card-produto-hover-border-color: var(--sg-cor-botao);
When I run npm run dev, or even npm run watch, it compiles just fine:
But when I run npm run prod, this is the result I'm getting (beautified):
Why is this happening?
I understand that it took the border-width, border-style and border-color parts of the variables and put them into a single property that is a reduced version of border, but they are variables and not properties!
Also, it didn't mix the variables in the part just above the previous code:
--sg-card-produto-bg: #d3d3d3;
--sg-card-produto-border-width: 2px
--sg-card-produto-border-style: solid;
--sg-card-produto-border-color: #222;
I believe this could be happening because of the introduced var() in --sg-card-produto-hover-border-color.
Edit:
It looks like var() is not the problem. I put a hex color and got the same result:
Edit 2:
I have renamed the variables as follows:
--sg-card-produto-hover-border_style: solid;
--sg-card-produto-hover-border_width: 2px;
--sg-card-produto-hover-border_color: var(--sg-cor-botao);
But now, the variables above this one (--sg-card-produto-border...) got mixed up instead:
It seems like the only the last ocurrences are being replaced.
Edit 3:
I noticed that it's mixing up only the last ocurrences of when it detects an expanded property.
So I used this quick fix:
--sg-card-produto-bg: #d3d3d3;
--sg-card-produto-border-width: 2px;
--sg-card-produto-border-style: solid;
--sg-card-produto-border-color: #222;
--sg-card-produto-hover-bg: #c3c3c3;
--sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
--sg-card-produto-hover-border-style: solid;
--sg-card-produto-hover-border-width: 2px;
--sg-card-produto-hover-border-color: var(--sg-cor-botao);
border-style: none;
border-width: 0;
border-color: transparent;
And this is the result:
Weird, right?
It looks like the minifier is naively converting *border-* properties to shorthand. You can sidestep the issue by using a different naming scheme (e.g. --sg-card-produto-border-hover-color instead of --sg-card-produto-hover-border-color)
I am using LESS CSS preprocessor. For example if there are two (or more) rules with same value
.my-class {
border-top: 2px solid #main-bg-color - #123456;
border-bottom: 2px solid #main-bg-color - #123456;
}
can I combine those two into one somehow like this?
.my-class {
border-top, border-bottom: 2px solid #main-bg-color - #123456;
}
UPDATE: You shouldn't be concentrated on the props (border) I wrote just as example. I'd like to know if there's any way to combine any multiple props with same value. If there is no way to do so, please say it explicitly.
Why not just use something like:
.my-class {
border: 2px solid #main-bg-color - #123456;
border-width: 2px 0;
}
As #seven-phases-max says, there is no way to combine several props with same value in LESS. Use variables or mixins instead.
I am new to web development and coding. I might need a little help with something I am trying to get a border around each data cell using CSS below is my code.Please help me. For some reason this is not working.
.table-box table td{
background-color: #ccc
border: 2px soild #000
}
.table-box table td{
background-color: #ccc;
border: 2px soild #000
}
You have to end the statement with semicolon for the last one it is optional
What is the best CSS practice to achieve a border on all sides of a container, apart from, for example, the bottom?
The border property cannot specify different values for each side.
Option 1: Overwriting Rules
border: 1px solid red;
border-bottom: none;
Seems that an extra computation is needed — similar drawbacks as CSS resets (at least philosophically).
Option 2: Setting Specific Rules
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
Might be more correct (in terms of CSS "semantics")
But if you want to change the border specifics, then it'll require
multiple changes (harder to manage).
Actually it totally depends on you, what is more convenient to you, it also depends on some state like if I want the color of all borders to be same I'll go for 1st but If I think I need to change the colors of each side of the border in near future I'll go with the second 1, but for now, I'll stick to first option
Reasons:
Less CSS to be stated
Specifically it shows that I want border-bottom as none
As you said I don't need to change each and every property: value if I need any changes
If you say proper semantics, proper semantics define very specifically like
border-color: /*Whatever*/;
border-width: /*Whatever*/;
border-style: /*Whatever*/;
Now am sure you don't want to be this specific
If you only want to specify the values once, you can specify the color and width for all, then the style specifically for the sides:
border-color: red;
border-width: 1px;
border-style: solid solid none solid;
Is there a way to set multiple CSS properties to one value?
border-left, border-right: 1px solid #E2E2E2;
The way that you can do with selectors?
.wrapper, .maindiv { ... }
Nope. But for your example, you can do this:
border: solid #E2E2E2;
border-width: 0 1px;
The attributes where there can be separate values for top, right, bottom, and left (eg, border-*, margin, padding) can usually be combined in a single attribute.
Not possible, unless you do:
border: 1px solid #E2E2E2;
..which sets the same border on all sides. If you want to control them individually, you have to write them as separate statements.
Note that in some cases, you can set multiple values for one attribute, but you can not have multiple attributes with one value in one statement.
Not possible with plain css, but you may have a look at scss or less who might have solutions for your problem.
A solution with plain css is the following:
border: 1px solid #E2E2E2;
border-width: 0px 1px;
If you're using sass, try this:
#mixin border($properties , $value){
#each $property in $properties{
border-#{$property}: $value;
}
}
selector{
#include border(left right, 1px solid #E2E2E2);
}
CSS does not allow such control. A workaround is to use larger rule, then restrict it:
border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;
But you end up with more code. Another solution is to use CSS "compiler", like SASS or Less
If the attributes are related, as is the case with border-left and border-right, there usually is a common attribute that allows you to set them:
border: 1px solid #e2e2e2;
On the other side, there are some libraries like Less CSS out there that extend CSS so that you can easily group related properties and attributes.