How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
I wasn't sure what specifically you wanted to know but, AFAIK, there are no specific posts on the topic, I may have one (I have hundreds of posts so it might take some time to find).
What does it do? its a simple implementation of a 12 column grid layout normally calculated via a pre-processor, what it does is not so important, how it does it is whats interesting here.
The short story is:
CSS is calculated by the browser, you might consider this "run-time" for css, at this point a few things are possible, bellow is a broken down list of the things I have use and what they do:
vw units:100 vw is the full viewport width as computed pixels, it is not 100% of the parent container. css variables:--some-variable: red; stores a value, var(--some-variable) computes the value calc(): runtime maths such as calc(100% + 20px) which is cool, but you can also just add or subtract numbers and make calculations normally computed in css pre-processors
Oh yes and lastly, I nested a calc() inside another calc to achieve complex maths
Thank you for the reply.
But I was implying explanation of your nested calc function. It would be great if you could elaborate on that one as well please, if you don't mind of course.
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
CSS calc 'calculate' is built into CSS and can be nested, the full documention can be found above.
However nesting refers to the fact that calc exaluates to a unit so then calc(calc(2px + 4px) + 4px)
10 pixels
But this is particularly useful for complex math with variables because variables can change in media query and stateful circumstances (:hover, :focus etc)
Your not the only one, I found this out recently, didn't know calc was nestable, your most welcome.
Can you explain what the code snippet does, please. Or can you direct me to some articles in which it is elaborated your topic please.
I wasn't sure what specifically you wanted to know but, AFAIK, there are no specific posts on the topic, I may have one (I have hundreds of posts so it might take some time to find).
What does it do? its a simple implementation of a 12 column grid layout normally calculated via a pre-processor, what it does is not so important, how it does it is whats interesting here.
The short story is:
CSS is calculated by the browser, you might consider this "run-time" for css, at this point a few things are possible, bellow is a broken down list of the things I have use and what they do:
vw units:
100 vwis the full viewport width as computed pixels, it is not 100% of the parent container.css variables:
--some-variable: red;stores a value,var(--some-variable)computes the valuecalc(): runtime maths such as
calc(100% + 20px)which is cool, but you can also just add or subtract numbers and make calculations normally computed in css pre-processorsOh yes and lastly, I nested a calc() inside another calc to achieve complex maths
Thank you for the reply.
But I was implying explanation of your nested calc function. It would be great if you could elaborate on that one as well please, if you don't mind of course.
developer.mozilla.org/en-US/docs/W...
CSS calc 'calculate' is built into CSS and can be nested, the full documention can be found above.
However nesting refers to the fact that calc exaluates to a unit so then
calc(calc(2px + 4px) + 4px)10 pixels
But this is particularly useful for complex math with variables because variables can change in media query and stateful circumstances (:hover, :focus etc)
thanx