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.
Related
If i do this:
.a {
border: var(--a-border);
border-left: var(--a-border-left);
border-right: var(--a-border-right);
border-top: var(--a-border-top);
border-bottom: var(--a-border-bottom);
}
Setting --a-border never works because individual properties like a-border-left have reset the value. What i'm thinking is that, i'm not giving any default values on those exported variables. Therefore, if --a-border is set, it should take precedence over other unset values.
As I explained in this previous answer when using border-left: var(--a-border-left) it means that border-left will always have a valid value whataver the definition of the CSS variables. Considering this your shorthand property will always be ignored because the longhand ones will always override it.
One fix is to consider the fallback property and redefine the variable used inside the shorthand in each individual propery:
.a {
border: var(--a-border);
border-left: var(--a-border-left,var(--a-border));
border-right: var(--a-border-right,var(--a-border));
border-top: var(--a-border-top,var(--a-border));
border-bottom: var(--a-border-bottom,var(--a-border));
width: 200px;
height: 100px;
display:inline-block;
}
:root {
--a-border: 5px solid red;
}
<div class="a"></div>
<div class="a" style="--a-border-bottom:5px solid green"></div>
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);
}
I use the Tablepress plugin for Wordpress and I made a border around one column. Here is how I made it:
.tablepress-id-1 .column-2{border-left:solid 4px #fb9901;
border-right:solid 4px #fb9901;}
.tablepress-id-1 .row-10 .column-2{border-bottom:solid 4px #fb9901;}
.tablepress-id-1 .row-1 .column-2{border-top:solid 4px #fb9901;}
It looks like I wanted it, but I have the feeling that there is a way to make is smarter and leaner. (I need to replicate it on many other tables)
Thanks
I would recommend using css custom property for the color:
.tablepress {
--border-color: fb9001;
}
.tablepress-id-1 .column-2 {
border-left: 4px solid var(--border-color);
}
Table border isn't supported in HTML5, but CSS will apply changes to all of my tables, instead of just 1, is there a way around?
I want to make one table to have borders but the "table border" option is not supported in HTML5, what should I do?
CSS will make changes to all of my tables, instead of just one... is there a way around it? :)
For the border, I think you can do :
table {
border: 1px solid black;
}
/* or, for each cell of your table */
td {
border: 1px solid black;
}
If you want to add this style to only one table, then just add a class to this table, and instead in the css something like :
.your-class {
border: 1px solid black;
}
Hope I could help,
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.