Asked  7 Months ago    Answers:  5   Viewed   34 times

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?

 Answers

25

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.

Tuesday, June 1, 2021
 
PLPeeters
answered 7 Months ago
87

Almost always box-sizing: border-box can replace a calc rule such as calc(100% - 500px) used for layout.

For example:

If I have the following markup:

<div class="sideBar">sideBar</div>
<div class="content">content</div>

Instead of doing this: (Assuming that the sidebar is 300px wide)

.content {
  width: calc(100% - 300px);
}

Do this:

.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
html,
body,
div {
  height: 100%;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
}
<div class="sideBar">sideBar</div>
<div class="content">content</div>

PS: I won't work in IE 5.5 (hahahaha) , but it will work in IE8+ , all mobile, and all modern browsers (caniuse)

Width Demo

Height Demo

I just found this post from Paul Irish's blog where he also shows off box-sizing as a possible alternative for simple calc() expressions: (bold is mine)

One of my favorite use-cases that border-box solves well is columns. I might want to divide up my grid with 50% or 20% columns, but want to add padding via px or em. Without CSS’s upcoming calc() this is impossible… unless you use border-box.

NB: The above technique does indeed look the same as would a corresponding calc() statement. There is a difference though. When using a calc() rule the value of the width of the content div will actually be 100% - width of fixed div, however with the above technique, the actual width of the content div is the full 100% width, yet it has the appearance of 'filling up' the remaining width. (which is probably good enough for want most people need here)

That said, if it is important that the content div's width is actually 100% - fixed div width then a different technique - which makes use of block formatting contexts - may be used (see here and here for the gory details):

1) float the fixed width div

2) set overflow:hidden or overflow:auto on the content div

Demo

Wednesday, June 2, 2021
 
relipse
answered 6 Months ago
61

See my answer here: Multiple properties are getting treated as separate arguments in mixins

Summary: use this mixin for variable number of arguments:

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[[]]|,sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}
Friday, June 18, 2021
 
Classified
answered 6 Months ago
48

Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units.

FIDDLE (In IE10+)

Solution (for other browsers): box-sizing

1) Start of by setting your height as 100vh.

2) With box-sizing set to border-box - add a padding-top of 75vw. This means that the padding will be part f the inner height.

3) Just offset the extra padding-top with a negative margin-top

FIDDLE

div
{
    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;
}
Tuesday, June 29, 2021
 
Jubair
answered 6 Months ago
43

Since .dropdown-toggle is defined there inside .panel-heading class as part of the .dropdown .dropdown-toggle selector, it is not available as a standalone global scope mixin (like you try to invoke it). The .panel-heading and .dropdown classes work like namespaces in this case so to access .dropdown-toggle there you need to specify "complete path" to it, e.g.:

.my-toggle {
    .panel-heading > .dropdown > .dropdown-toggle;
    // or just:
    .panel-heading.dropdown.dropdown-toggle;
    // if you prefer shorter things
}

However this won't work the way you probably expect it to. Note that the .dropdown-toggle class is defined not only once inside .panel-heading but also several (~10) times inside other classes (e.g. .btn-group, .input-group-btn etc.). So if you need to get other .dropdown-toggle styles you also need to invoke these other .dropdown-toggle definitions.

Most likely extend will serve in this particular case better but it also has its limitations. Usually I imply that an approach to try to use Bootstrap as a CSS construction kit for your own semantic classes is a dead end. Some things are possible (using mixins, extend, referencing "bootstrap.css" and all of this all together) but many are just not (or at least are super-bloating both in coding (time) and in final CSS result). See my comments here, here and here for more details on this.

Saturday, August 7, 2021
 
jul
answered 4 Months ago
jul
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share