How to declare variable in CSS - css

Is it possible to declare your self a variable in CSS, for example if i had the same property for the following two tags
.cellLeft{
width: 45%;
min-height: 130px;
}
.cellRight{
width: 45%;
min-height: 130px;
}
Is it possible to declare x=130px
so i dont have to keep changing min-height everywhere
like for example;
x=130px;
.cellLeft{
width: 45%;
min-height: x;
}
.cellRight{
width: 45%;
min-height: x;
}

You have to use a CSS preprocessor for this, like LESS or SASS. You can't do it with pure css. Have a look here: http://lesscss.org/ or here: http://sass-lang.com/ (I use LESS myself)
Extra:
A CSS-only solution to your example would be to use a modular approach in which you define multiple classes for specific attributes which you can re-use in your HTML. I would suggest doing this even when using a CSS preprocessor. So for your example you could make these classes:
.cell {
width: 45%;
min-height: 130px;
}
.cell-left {
}
.cell-right {
}
And then add both the cell and the cell-left / cell-right classes to your HTML elements. This way you only have to declare the width and min-height properties once.
Or, you could do:
.cell-left, .cell-right {
width: 45%;
min-height: 130px;
}
So you only have to change it once as well.

Related

`max-width` and `min-width` shorthands

Is there a shorthand for this properites?
For example, right now I do:
.main-exchange-container--title {
min-width: 288px;
max-width: 900px;;
}
Is there a way to do something like:
.main-exchange-container--title {
widths: 288px 900px;
}
No but it can be done like below:
.main-exchange-container--title {
/*
min-width: 288px;
max-width: 900px;
*/
width:clamp(288px,100%,900px);
height:50px;
background:red;
margin:auto;
}
<div class="main-exchange-container--title"></div>
There isn't a specific shorthand, but in vanilla CSS you could move it to its own class if reused a lot, eg.
._width-primary {
min-width: 288px;
max-width:900px;
}
<div class="main-exchange-container--title _width-primary">
</div>
Or, If you have 'framework' libraries, they may have classes to help simplify this (eg. bootstrap's grids/columns)
<div class="main-exchange-container--title col-12">
</div>
(it'll behave a little different to your rules though, so youd need to find the closest equivalent)
Or, If you have a pre-processor like LESS or Sass, it probably has a feature like mixins/includes to reuse certain rules without needing to export extra classes and add it to your HTML.
Example in LESS:
._width-primary() {
min-width: 288px;
max-width: 900px;
}
.main-exchange-container--title {
._width-primary()
}
in Sass (SCSS):
#mixin _width-primary {
min-width: 288px;
max-width: 900px;
}
.main-exchange-container--title {
#include _width-primary;
}
both of the above will output this CSS:
.main-exchange-container--title {
min-width: 288px;
max-width: 900px;
}

Where to put styles for classes that are used across code base using sass 7-1 architecture

I am refactoring a legacy web app and I am trying to use the Sass 7-1 architecture. The code has several 'global' class names i.e;
.flex-expand {
flex-grow: 1;
flex-shrink: 1;
position: relative;
}
.flex-scroll-area {
overflow-y: auto;
overflow-x: hidden;
}
Where would classes that are used in many different files in the code base be placed?
What about something like abstracts/_extends.scss?
.my-expandable-element {
#extend .flex-expand;
background: yellow;
color: pink;
}

LESS selectors: how to apply styling only for one of the elements from inside mixin?

I have a code that I can't change:
item.left,
item.centre,
item.right{
.MIXIN();
}
.MIXIN(){
width: 100px;
}
I need to apply width only to .right element. I can only change contents of MIXIN(). I was thinking of using &but it will result either in .right item.right or item.right .right which is not what I want. Is there a way to apply styling only for .right element using contents of MIXIN()?
You can use the negation CSS pseudo-class :not().
item.left,
item.centre,
item.right{
width: 20px;
&:not(.left):not(.centre) {
width: 100px;
}
}
Fiddle: https://jsfiddle.net/e0nd7pk4
You can not do it. The only way is to override the first declaration.
item.left,
item.centre {
width: inherit;
}
How about & but without the space:
.MIXIN() {
width: 100px;
&.right { color: red; }
}
It compiles down to item.right.right which is a bit weird but won't match left and center.
Fiddle: http://jsfiddle.net/c0634wg2/

Apply same style to same type of element of different classes [duplicate]

div#id_div_allposts {
width: 100%;
}
div.class_div_post {
width: 100%;
}
div.class_div_editdelete {
width: 100%;
}
How can i write it in one line ?
And what's the way to select a html tag with id and class ?
All you have to do is separate them with a comma e.g
div#id_div_allposts,
div.class_div_post,
div.class_div_editdelete {
width:100%;
}
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
You can group multiple selectors in CSS via a comma.
Note: The comma starts an entirely new selector from the very start.
Use the comma to separate multiple declarations
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
Selecting an html tag with and id and class would be
div#ID.class
Try this:
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
or assuming that you want all div to have width 100% then...
div{
width: 100%;
}

Is there any way to get another element value in Less?

I'm new to Less.
In my script, I'd like to use the width of box1 in box2.
Please review my script.
#box1
{
width: 1000px;
height: 500px;
}
#box2
{
width: #box1.width - 100px;
}
Is it possible or not? If yes, please give me correct Less code.
unfortunatly it is indeed not possible. You could work with variables and do something like this however:
#box1width: 1000px;
#box1
{
width: #box1width;
height: 500px;
}
#box2
{
width: #box1width - 100;
}
No, that's not possible. LESS processes the style sheet to produce CSS, and it doesn't have any knowledge of the elements in the page.
What you are looking for is CSS Expressions, but that was only supported in Internet Explorer, and support for that was dropped in IE8.

Resources