I have a LESS mixin like so:
.ico-space(#times){
#ico-space: ((25px + 38px) * #times) - 1px;
#media (min-width: #grid-float-breakpoint) {
#ico-space: ((25px + 38px) * #times) - 1px + 65px;
}
}
However, it doesn't pick up the calculations within the media query.
Probably I'm doing something wrong here, since I'm pretty new to using advance LESS features?
Related
I´m trying to make operations with the root variables using less.
For example
:root{
--padding-md: 5px;
}
#padding-md: ~'var(--padding-md)'; // we get the CSS var
#padding-double: #padding-md + 5px; //we try to add 5px
Or this
#padding-md: calc(5px + 3px) + 5px; // we get the CSS var
But LESS just throw the op
Is this possible? How to do that?
there is a way to tell to LESS set the CSS CALC function instead make the operations without affect the default less operations?
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
I have this less and I can't figure out how to do the math inside the string
#bp-tablet-landscape: 1024px;
#bp-tablet-portrait : 768px;
#tablet-landscape-only: ~"only screen and
(min-width:#{bp-tablet-portrait} + 1) and (max-width: #{bp-tablet-landscape})";
Usage
div#header {
#media #tablet-landscape-only {
background: #000;
}
}
But it doesn't quite compile correctly. It doesn't add 768px + 1 as I had hoped. Any ideas? I've tried several different flavors and I can't nail it. I can obviously define a variable outside the string concat, but I'd like to avoid that approach if possible.
winLess online compiler outputs
#media only screen and (min-width:768px + 1) and (max-width: 1024px) {
div#header {
background: #000;
}
}
I want to get 769px in there instead of 768px + 1
Not Within the String Itself, but...
If you separate it out of the string, then do a second interpolation following (note the 2nd ~), this works:
#tablet-landscape-only: ~"only screen and (min-width: "(#bp-tablet-portrait + 1) ~") and (max-width: #{bp-tablet-landscape})";
To produce this:
#media only screen and (min-width: 769px ) and (max-width: 1024px) {
div#header {
background: #000;
}
}
I really want to quit typing:
#media (min-width: #min-tablet-width) and (max-width: #max-tablet-width) {
// styles for tablets
}
all over my LESS files.
As far as I know, there's no way in LESS to move this into a function, like:
.tablet() {
// styles for tablets
}
Are there other solutions?
Look at this : https://github.com/dalou/bootstrap3-less-mixins
ex :
h2 {
font-size: 20px;
.phone-only({
font-size: 14px;
})
}
The answer at this point in time is: no.
EDIT: see Dalou's answer above.
For example, I would like to be able to do this:
.bigfirstletter(#mag) {
&:first-letter {
font-size: [get_original_font_size] + #mag;
}
}
But as far as I can see I have to do this, which is not as neat
.bigfirstletter(#fontsize, #mag) {
&:first-letter {
font-size: #fontsize + #mag;
}
}
Do I have an alternative? Thank you for your help.
damn it was simpler than I thought :)
.bigfirstletter(#mag) {
&:first-letter {
font-size: 1em * #mag;
}
}
1em will simply inherit whatever it is defined for element, and you just set your magnification. I changed the plus sign to multiply on purpose as with this you're going to have better control over font size - #mag=1.0 for same font size, #mag=1.5 for 50% bigger, and so on..
sorry about the answer below, for some reason I didn't see that you're using first-letter in the example provided (doh!)
take a look at :first-letter CSS pseudo class - here