The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating
body { width: calc(100% - 250px - 1.5em); }
into
body { width: calc(-151.5%); }
Which is obviously not desired. I'm wondering if there is a way to signal to the Less compiler to essentially ignore the attribute during compilation. I've searched through the Less documentation and both compilers' documentation, and I could not find anything.
Does Less or a Less compiler support this?
If not, is there a CSS extender that does?
Less no longer evaluates expression inside calc by default since v3.00.
Original answer (Less v1.x...2.x):
Do this:
body { width: calc(~"100% - 250px - 1.5em"); }
In Less 1.4.0 we will have a strictMaths option which requires all Less calculations to be within brackets, so the calc will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.
A very common usecase of calc is take 100% width and adding some margin around the element.
One can do so with:
#someMarginVariable = 15px;
margin: #someMarginVariable;
width: calc(~"100% - "#someMarginVariable*2);
width: -moz-calc(~"100% - "#someMarginVariable*2);
width: -webkit-calc(~"100% - "#someMarginVariable*2);
There is several escaping options with same result:
body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
There's a tidier way to include variables inside the escaped calc, as explained in this post: CSS3 calc() function doesn't work with Less #974
#variable: 2em;
body{ width: calc(~"100% - #{variable} * 2");}
By using the curly brackets you don't need to close and reopen the escaping quotes.
Related
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.
You need to use calc() instead. Check browser compatibility on Can I use...
.foo {
height: calc(25% - 5px);
}
If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):
$a: 25%;
$b: 5px;
.foo {
width: calc(#{$a} - #{$b});
}
There is a calc function in both SCSS [compile-time] and CSS [run-time]. You're likely invoking the former instead of the latter.
For obvious reasons mixing units won't work compile-time, but will at run-time.
You can force the latter by using unquote, a SCSS function.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }
$var:25%;
$foo:5px;
.selector {
height:unquote("calc( #{$var} - #{$foo} )");
}
IF you know the width of the container, you could do like this:
#container
width: #{200}px
#element
width: #{(0.25 * 200) - 5}px
I'm aware that in many cases #container could have a relative width. Then this wouldn't work.
Sorry for reviving old thread - Compass' stretch with an :after pseudo-selector might suit your purpose - eg. if you want a div to fill width from left to (50% + 10px) of screen you could use (in SASS indented syntax):
.example
background: red
+stretch(0, -10px, 0, 0)
&:after
+stretch(0, 0, 0, 50%)
content: ' '
background: blue
The :after element fills 50% to the right of .example (leaving 50% available for .example's width), then .example is stretched to that width plus 10px.
Just add the percentage value into a variable and use #{$variable}
for example
$twentyFivePercent:25%;
.selector {
height: calc(#{$twentyFivePercent} - 5px);
}
In a video tutorial of SASS, Gary wrote a line of CSS as:
margin-left: max(40px);
I want to understand what does this line mean and how does it work?
Also, it is working fine for his system but it isn't working in my browser. What could be the reason?
Link to Gary's source code.
max() is a function in CSS that is part of CSS Values and Units Module Level 4.
It lets you define a list of values, from which the maximum is used:
margin-left: max(40px, 60px, 80px);
The result is:
margin-left: 80px;
It's also possible to use expressions without calc inside:
Note: Full math expressions are allowed in each of the arguments; there’s no need to nest a calc() inside! You can also provide more than two arguments, if you have multiple constraints to apply.
margin-left: max(10 * (1vw + 1vh) / 2, 12px);
Unfortunately the browser support for max() and also min() or clamp() is not that broad, and this code snippet will work in Safari and Chrome only at the moment:
div {
width: 10px;
height: 10px;
background: red;
margin-left: max(40px, 200px);
}
<div></div>
As you came across this in a SASS context, it's also worth noticing that there's a max()function in SASS as well. And it's older than the native one:
CSS added support for min() and max() functions in Values and Units Level 4, from where they were quickly adopted by Safari to support the iPhoneX. But Sass supported its own min() and max() functions long before this, and it needed to be backwards-compatible with all those existing stylesheets. This led for the need for extra-special syntactic cleverness.
I'm looking for a simple, effective and modern way to implement the following layout for a website:
- header: 100% width
- below header
- sidebar with fixed width
- content area that fills up till 100%
I've found a good example here, but this is all based on 'em' sizing, we have quite some backgroundpixels so we rather need an example with 'px'.
We thought that we could switch easily to 'px' in that specific example, but apparently it's not that easy to get this perfect.
Thanks in advance for all the tips!
You can use flex to have a sidebar on the left with a fixed width whereas the content on the right takes up the remaining space. Be aware that flex was added with CSS3 and older versions of Internet explorer may not support it (http://caniuse.com/#search=flex)
.contentContainer {
display:flex;
flex-direction: row;
}
.left {
background-color: #ffaa00;
min-width:200px;
}
.right {
background-color: #00aaaa;
flex:1;
}
https://jsfiddle.net/nrv5p70q/1/
However some simple googling could have solved the issue too. You may want to check this cheat sheet:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The example you are using will allow you to achieve this.
You can use a em to px conversion to convert the values from em to px. Once you have the correct values you can replace them in the css. Thus.
#nav {
margin-left: -352px; //was -22em
margin-left: expression((-(document.getElementById("wrapper").clientWidth))+"px");
left: 208px; //was 13em;
}
Using this method will allow you to continuing w3schools tutorial which is a great way to get up to speed with html and css.
Basic question but I can't find it anywhere, is it possible to set the width and the height on the same line at the same time with the same value in my CSS?
I'm not asking for something like:
width:100%;height:100%;
But more like one of those:
width, height: 100%; // Same for both
width, height: 100%, 90%; // Different for each ones
dimensions: 100% 90%; // Like padding/margin,
I'm just asking about declaration, not Javascript on how to do that.
I found a related question to this one but for border and the short answer was no.
If it's not possible with CSS, is it with SCSS ?
There is no short hand for setting the height and width of the element in a single property declaration. You cannot do it with SASS as well.
But yea, SASS will provide you a feature to hold the common value shared in both property by declaring a variable like
$some-var-name: 100px;
.some-class {
height: $some-var-name;
width: $some-var-name;
}
As I said, even SASS won't help you writing height and width at the same time but you can use change the value of both from a single variable.
Ok I was about to add the #extend in the answer but since other user has already answered the same, (which is now deleted)
.size{
height:100%;
width:100%;
}
element {
#extend .size; //Sets element to height:100%;width:100%;
// more stuff here
}
I would suggest you to use a declaration of % instead of . so instead of using .size suggested use %size. This way your literal class of .size used only for extend purpose won't be included in the compiled stylesheet.
you can use css variable
/* css file */
:root {
--length: 50px;
--ratio: 1;
}
.box {
background: cornflowerblue;
width: calc(var(--ratio) * var(--length));
height: var(--length);
}
<!-- html file -->
<div class="box"></div>
then you can change --length in many ways and box width and height will respect to changes.
and Its better method than the SCSS variable for debugging purposes.
Articles
Comparison between CSS variable vs SCSS variable
Why we prefer CSS Custom Properties to SASS variables
You can set up Sass Mixin, like this:
#mixin size($width, $height) {
width: $width;
height: $height;
}
Then write just:
#include size(100%, 100%);
My little contribution if both w & h are equals :
div {
width: 100%;
aspect-ratio: 1;
}
This doesn't help much in typing, but with this, there is only one place to update.
To add onto the mixin solution by #Allrightman, you could even account for when the width and height are the same by setting a default value for the second parameter to equal the first:
#mixin size($width, $height: $width) {
width: $width;
height: $height;
}
If a user inputs a single value opposed to two, this will set them both to the same thing, covering both use cases.
There is no way to declare height and width at the same time in pure CSS, but you can use preprocessors css like SASS or LESS to declare the value to avoid repetition, but don't forget that after they get complied to CSS, they become pure CSS again...
Fo example in SASS you can do:
$width-height: 100%;
body {
height: $width-height;
width: $width-height;
}
So as you see, you can define it, but after it gets complied to CSS, it becomes like this again:
body {
height: 100%;
width: 100%;
}
But we all know this is not always the case, the CSS for the big applications could be much more complex, and reusing and declaring values using preprocessors css will help a lot to manage your css in a tidier way!...
I am calculating some widths and margins depending on the number of childs.
Is it possible in css3 to have a variable like:
.someClass {
width: -moz-calc(nrOfChilds * 80px);
}
Some other classes I got are written as follows:
.anotherClass:nth-child(n) {
margin-left: -moz-calc(n * 50px);
}
Is it possible to use some variables like n or nrOfChilds? At the moment I declare my second example several times and change the first manually?
I know javascript is a solution to this. But is there a native css3 solution for this?
/Kind regards
Christian
Nowadays all major browsers support calculated CSS values with custom variables, via:
calc(...)
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Browser support: https://caniuse.com/css-variables
var(--...)
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/var
Browser support: https://caniuse.com/calc
Example
.somebar {
/* I define the initial value of "--mydepth" */
--mydepth: 1;
width: calc(var(--mydepth) * 50px);
height: 50px;
background: green;
}
.level1 {
--mydepth: 2;
}
.level2 {
--mydepth: 3;
}
<h3>Example of: calc(var(--mydepth) * 50px)</h3>
<div class="somebar"></div>
<div class="somebar level1"></div>
<div class="somebar level2"></div>
<h3>Expected result (if supported by browser)</h3>
<div class="somebar" style="width:50px"></div>
<div class="somebar" style="width:100px"></div>
<div class="somebar" style="width:150px"></div>
(As of 2012) There's no way to do this in CSS3.
As of 2019 (and earlier) see the accepted answer above.
Have a look at LESS or .less if using .NET server side.
there's no way to do this with only css3. You can use .less , that use dynamic behavior such as variables, mixins, operations and functions. Is based on JS. Or you can take the rails approach with the use of sass . there's others, but I guess these two are the most popular for css extensions.
Not possible in CSS3, neither using LESS or SASS. The only way is through javascript which should be quite simple to do.
Example using SASS:-
$nrOfChilds: 20;
.someClass {
width: calc(#{$nrOfChilds} * 80px);
}