This question already has answers here:
Sass Variable in CSS calc() function
(6 answers)
Closed 4 years ago.
Problem :
Correct use of calc function with sass file.
Case :
.class1 {
max-width: calc(100% - #{$endWidth});
min-width: $startWidth;
text-overflow: ellipsis;
}
.class2 {
max-width: calc(100% - #{$startWidth});
direction: rtl;
}
Tried Case :
I have verified few answers in stack overflow, and from one of the question answers inspired my question - Stack Overflow Reference. The solutions aren't working for my scenario,
Should I use mixin in sass to get it to work ?
While calc() will indeed cause issues with SASS files by default, this can be avoided by using interpolation (which you are using correctly).
The only possible explanation(s) for your issue are:
You do not have (or have it incorrectly defined) SASS variables:$startWidth and $endWidth
Rules with higher specificity are overriding your selectors
You have cached old styles, hence clear your cache with CTRL + SHIFT + R
Here's an example JSFiddle showcasing your above code working.
Related
This question already has answers here:
How to prevent Less from trying to compile CSS calc() properties?
(4 answers)
Closed 7 years ago.
This is a question that has been asked several times before, but none of the answers I have found seem to work in my case. I have 3 buttons and I am trying to evaluate their width as follows:
.num-buttons-3 {
width: calc((100% - 40px)/3);
}
This always evaluates in my browser (Chrome) as 20%, which is (100% - 40%)/3.
I have tried numerous suggested alternatives to get this to evaluate correctly, such as:
.num-buttons-3 {
width: calc((~'100% - 40px')/3);
}
.num-buttons-3 {
#marg: 40px;
width: calc((~'100% - #{marg}')/3);
}
Is therer another CSS or LESS solution I can try?
Found an answer on this. Escaping the entire calc function is an option that seems to work:
width: ~"calc(((100% - 40px)/3))";
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
Is there a way in SASS to get an element to inherit its siblings height so they line up on a horizontal line?
<div class="first">A bunch of content in here<div>
<div class="sibling"><div>
.first {
height: auto;
+ second {
height: use .first height;
}
}
Nope. Think about the way SASS works - your height: auto will be compiled into CSS as just that height: auto. There's no way for Sass to know what number that will turn out to be, so it can't assign a specific value to your second element. (It can only assign height: auto again, which may or may not be the value you want).
You can't make them the same height, but you can ensure that they all align within the row, which might accomplish the look you are going for (hard to be sure without knowing exactly what you are trying to do):
.aligned-row {
display:flex;
align-items:center;
}
This is newer CSS, so not completely backwards compatible:
More info on the display:flex can be found here: vertical-align with Bootstrap 3
This question already has answers here:
Sass Variable in CSS calc() function
(6 answers)
Closed 8 years ago.
Is there anyway to force emCalc to run in Foundation. For example I have this code.
.rule {
height: calc(100% - emCalc(10px));
}
The sass simple produces exactly that, without running the emCalc function. Is there anyway to force the sass processor to run the emCalc function first?
You can do it like this:
.rule {
height: calc(100% - #{emCalc(10px)});
}
This question already has answers here:
Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
(6 answers)
Closed 10 years ago.
Is it possible somehow to calculate size of an element as a basic mathematical expression?
e.g.:
.wideColumn{max-width:100%-20em;} /*not working*/
This can be accomplished using LESS or jQuery. But unfortunately it cannot be done with pure CSS.
There are, however, workarounds to this issue using pure CSS. For example:
.wideColumn {
max-width: 100%;
margin-right: 10em;
margin-left: 10em;
}
Of course, this example may not work with your code. But there are numerous other workarounds.
Short answer is NO you cannot, not atleast in CSS 2, 2.1 spec, then too if you are interested you could take a look at Dynamic stylesheets with LESS
Or as Sandeep told, you can use calc() which is introduced in CSS3 spec
Reference
You cannot do this in CSS directly, but try something like LESS - http://lesscss.org/
it might be available one day, but not now - read more here http://www.w3.org/Style/CSS/specs#math
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I've been using Twitter's Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):
.btn-primary {
background-color: #006dcc;
*background-color: #0044cc;
}
Now, I've seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I've never seen this before. Can anybody share any insight as to what it's being used for? I've also seen it in the following (complete) context:
button.btn,
input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
where the * is in front of two related but distinct properties. What's going on?
This article should answer your question. It's basically a way 'hacking' CSS selectors to target a certain browser.