I'm trying to convert a negative variable in lesscss in to a positive:
#var: -100px;
.test {
height: #var * -1; // expect result to be 100px
}
But when I try and compile this code, I get 'unrecognized input' error.
Use the Abs function:
#var: -100px;
.test {
height: abs(#var);
}
Related
I have a problem with a sass formula, the formula passes, but does not give the right result.
#for $i from 0 through 99 {
$j:0;
#if $i>15 {
$j:1;
}
#if $i>31 {
$j:2;
}
#if $i>47 {
$j:3;
}
#if $i>63 {
$j:4;
}
#if $i>79 {
$j:5;
}
$k:$i%16;
$calc-pos-y:calc(#{$j*20%} + #{#{$i%8*$i%8}px});
}
For example, when $i=91, normally $i%8*$i%8 should be 3*3=9, so $calc-pos-x: calc(100% +9px). But yet, I get calc(100% +1px).
As I increment $i, I successively obtain:
calc(100% +0px)
calc(100% +1px)
calc(100% +4px)
calc(100% +1px)
For $i=88 I get calc(100% +0px), it's good.
For $i=89 I get calc(100% +1px), it's good.
For $i=90 I get calc(100% +4px), it's good.
I think for $i=91 the result is (91*91)%8, so 8281%8=1.
How can i have 3*3=9?
$calc-pos-y:calc(#{$j*20%} + #{#{$i%8}*#{$i%8} px}); //give an error
It's a simple operator precedence problem, you forgot parenthesis in your formula. Try this:
$calc-pos-y: calc(#{$j * 20%} + #{($i % 8) * ($i % 8)}px);
I have a site running Bootstrap 3.3.7. I use less to adjust the styling. In version 4 of Bootstrap sass is introduced instead of less, and I noticed a new mixin which adds the ability to easily use predefined paddings and margins:
// Width
.w-100 { width: 100% !important; }
// Margin and Padding
.m-x-auto {
margin-right: auto !important;
margin-left: auto !important;
}
#each $prop, $abbrev in (margin: m, padding: p) {
#each $size, $lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; }
// Axes
.#{$abbrev}-x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}-y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
// Positioning
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}
Source at GitHub
I would like to convert this mixin to less, and use it in my own Bootstrap 3.3.7 project. How would this mixin look like in less?
Less does not have any #each function or map like Sass does but even then converting this Sass code into its Less equivalent is fairly easy. All that is needed are a couple of loops each of which will mimic the two #each function in Sass and associative arrays.
In Less, we can use both comma and space as delimiters for values. So by using both of them we can achieve a behavior similar to that of maps. Even multi-level maps can be mimicked using this.
(Note: You need to know the basics of Less loops to understand this code but since you've already used Less, I assume that you are familiar with the concepts. If not, have a look at docs)
#props: margin m, padding p; /* the property and abbreviation */
#spacers: xs 10px 20px, md 20px 30px; /* the sizes, its length-x and length-y */
.loop-props(#prop-index) when (#prop-index > 0){ /* outer each loop */
#prop: extract(#props, #prop-index); /* get each prop-abbrev pair based on loop index */
#prop-name: extract(#prop, 1); /* the first value in each pair is the prop name */
#abbrev: extract(#prop, 2); /* the second value in each pair is the prop's abbrev */
/* call size loop mixin with each property name + abbreviation */
.loop-sizes(#prop-name; #abbrev; length(#spacers));
.loop-props(#prop-index - 1); /* call the next iteration of the outer each loop */
}
.loop-props(length(#props)) !important; /* initial mixin/loop call */
.loop-sizes(#prop-name; #abbrev; #size-index) when (#size-index > 0){ /* inner each */
#spacer: extract(#spacers, #size-index); /* extract each spacer value based on index */
#size: extract(#spacer, 1); /* first value in each spacer is the size */
#x: extract(#spacer, 2); /* second value is the length in X axis */
#y: extract(#spacer, 3); /* third value is the length in Y axis */
/* create the selectors and properties using interpolation */
.#{abbrev}-a-#{size} {
#{prop-name}: #y #x;
}
.#{abbrev}-t-#{size} {
#{prop-name}-top: #y;
}
.#{abbrev}-r-#{size} {
#{prop-name}-right: #x;
}
.#{abbrev}-b-#{size} {
#{prop-name}-bottom: #y;
}
.#{abbrev}-l-#{size} {
#{prop-name}-left: #x;
}
.#{abbrev}-x-#{size} {
#{prop-name}-right: #x;
#{prop-name}-left: #x;
}
.#{abbrev}-y-#{size} {
#{prop-name}-top: #y;
#{prop-name}-bottom: #y;
}
.loop-sizes(#prop-name; #abbrev; #size-index - 1); /* call next iteration */
}
As you'd have noticed, I have attached the !important to the mixin call itself instead of attaching it each property. When this is done, the Less compiler automatically attaches the !important to every property and so we needn't repeat it.
I'm trying to my grid system to LESS.
I'm using fractions as strings (there's a reason) and need to interpolate them in the calc() expression.
In Sass I can do this...
#mixin move($fraction: '1/1') {
position: relative;
left: calc(99.999999% * #{$fraction});
}
In LESS when I try this...
.move(#fraction: '1/1') {
#_fraction: ~'#{fraction}';
left: calc(99.999999% * #_fraction);
}
It ends up throwing a Cannot read property 'numerator' of undefined error.
Apparently LESS can tell it's a fraction but then it poops out.
Can any LESS pros enlighten me?
You need to escape multiplication, addition, division, and subtraction in LESS or it will try output the calculated result. When less sees * in your code, it is trying to multiply 99.999999% and #_fraction.
For example when LESS sees calc(5px + 5px); it will output left: calc(10px);. You can except it like this ~'calc(5px + 5px);'.
Try using this code.
.move(#fraction: '1/1') {
#_fraction: ~'#{fraction}';
left: calc(~'99.999999% *' #_fraction);
}
Simple question: I don't understand what the Advanced arguments do in Less CSS, as per http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable . I've battled to get my head around how it's explained there.
I understand this:
.mixin(#a: 1) {
But I don't understand the following two, where the ... is introduced:
.mixin(...) { // matches 0-N arguments
.mixin() { // matches exactly 0 arguments
.mixin(#a: 1) { // matches 0-1 arguments
.mixin(#a: 1; ...) { // matches 0-N arguments
.mixin(#a; ...) { // matches 1-N arguments
.mixin(#a; #rest...) { // #rest is bound to arguments after #a
// #arguments is bound to all arguments }
I'm learning Less because I'm very keen on bootstrap, but this puzzled me.
Thank you very much!
Well, okay you should also read http://lesscss.org/features/#mixins-parametric-feature-pattern-matching.
In Less only mixin that match the number of arguments of the caller are compiled. Notice also that when two or more mixins match, all of them are compiled into CSS.
When you mixin got one argument, like that shown below:
.mixin(#a) {}
Only callers with one argument match and will be compiled: .mixin(3); or .mixin(1) and so on. But NOT .mixin() or .mixin(1,2,3)
When you set a default value for the first argument, for instance 3, as shown below:
.mixin(#a: 3) {}
Now not only calls with 1 argument match, but also calls with zero arguments:
.mixin(#a: 3) {property: #a;}
p{ .mixin();}
outputs:
p {
property: 3;
}
Now take a look to the special ... argument, that argument matches any number of arguments. So .mixin(...) will match and get compiled the following callers .mixin(), .mixin(1) and .mixin(1,2,3,4).
When you prepend a name (including the #) to the ... argument the values will be assigned to a variable with that name:
.mixin(#listofvariables...) {
p: #listofvariables;
}
p {
.mixin(one; two; three);
}
outputs:
p {
p: one two three;
}
Notice that ... assigns the arguments to a list, which can be manipulated with the list functions too.
An mixin such as .mixin(#a; ...) is a variant of the preceding two use cases. This mixins requires a first argument set, followed by zero or any other arguments.
#arguments is a special variable that contains a list of all argument of the mixin:
.mixin(#a; #b) {p1: #arguments; p2:extract(#arguments,2); p3:#b;}
p {.mixin(1; 2);}
outputs:
p {
p1: 1 2;
p2: 2;
p3: 2;
}
So the #arguments variable can be used in any mixin and does not require an ... argument.
What would a caller for a mixin like this look like? .mixin(#a; ...)
could it be something like this: .mixin(#a,53px); ? How does it
determine where the 53px goes to?
The 53px is not assigned to a variable, but it is the second item of the #arguments list. You can get it by extract(#arguments,2).
An use case for the .mixin(#a; ...) {} can be to assign a property always when .mixin() regardless the number of arguments, example:
.mixin(#a; ...) { color: #a;}
.mixin(#a) { background-color: contrast(#a); width:100%;}
.mixin(#a; #b;) { background-color: contrast(#a); width:#b;}
div {
.mixin(red);
}
div.small {
.mixin(red,50%);
}
outputs:
div {
color: red;
background-color: #ffffff;
width: 100%;
}
div.small {
color: red;
background-color: #ffffff;
width: 50%;
}
notice that the .mixin(#a; #rest...) {} assigns 35px the first item of the #rest list. And so the following Less code:
.mixin(#color,#padding...) {
color: #color;
padding: #padding
}
div {
.mixin(red; 10px; 20px; 5px; 5px);
}
outputs:
div {
color: red;
padding: 10px 20px 5px 5px;
}
I'm trying to write a mixin that returns a variable for converting px to em. I've toyed with a few things, but ultimately i'd like to call a mixin and get a return value similar to SASS's functions. Based on on return values here: http://www.lesscss.org/#-return-values, I can only define a variable once as a return value. Example:
Mixin
.px-to-emz( #size, #base: #font-size-base ){
#em: round( unit( (#size / #base), ~"em" ), 3 );
}
Call it:
.foo {
font-size: #em;
.px-to-emz(10, 16px);
height: #em;
.px-to-emz(200, 16px);
}
Fine, if you want to only return one variable, but if i want to return multiple variables I need to define new variable names. Here's what i'd ideally like to do
Mixin:
.px-to-ems( #size, #var: 'em', #base: #font-size-base ){
~'#{var}': round( unit( (#size / #base), ~"em" ), 3 );
}
Call it:
.foo {
font-size: #font-size;
.px-to-ems(10, 'font-size', 16px);
height: #height;
.px-to-ems(200, 'height', 16px);
}
#1
So far the best known solution for this problem is to put each mixin call into its own scope:
.px-to-ems(#size, #base: #font-size-base) {
#-: round(unit((#size / #base), em), 3);
}
.foo {
.-() {font-size: #-; .px-to-ems( 10, 16px)}
.-() {height: #-; .px-to-ems(200, 16px)}
.-;
}
Replace #- and .- with whatever identifiers you find suitable.
#2
The other way around is to use recently added (Less 1.6.x) property interpolation feature:
.px-to-ems(#property, #size, #base: #font-size-base) {
#{property}: round(unit((#size / #base), em), 3);
}
.foo {
.px-to-ems(font-size, 10, 16px);
.px-to-ems(height, 200, 16px);
}
It's more clean than #1 if you simply need to assign the "function" result to a property.