Negate a numerical variable and add ‘px’ to it in LessCSS
Just multiply by 1 in the sign and units you want. So: .sprite-size(@width, @height, @x, @y) { width: @width*1px; t: @height*1px; background: @sprites no-repeat @x*-1px @y*-1px; }
less
webpack error in Cannot find module ‘less’
This error happens because npm@3 does not resolve peerDependencies any more. npm install less less-loader is the way to go.
How we can use @font-face in Less
Have you tried putting the font family name in single quotes? The following works just fine for me. @font-face { font-family: ‘cblockbold’; src: url(‘assets/fonts/creabbb_-webfont.eot’); src: url(‘assets/fonts/creabbb_-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘assets/fonts/creabbb_-webfont.woff’) format(‘woff’), url(‘assets/fonts/creabbb_-webfont.ttf’) format(‘truetype’), url(‘assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold’) format(‘svg’); font-weight: normal; font-style: normal; } To use font as a mixin, try: .ffbasic() { font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, “helvetica neue”, Arial, sans-serif; } … Read more
Is it bad practice to override LESS variables?
Ok! One of the above issues led to a discussion of the intended behaviour, and it turns out that overriding LESS variables is fine. Your declarations will overwrite each-other in the same scope in CSS; The same is true for LESS. https://github.com/cloudhead/less.js/issues/297 Like in CSS, overriding within a scope is an intended way to use … Read more
How to use if statements in LESS
There is a way to use guards for individual (or multiple) attributes. @debug: true; header { /* guard for attribute */ & when (@debug = true) { background-color: yellow; } /* guard for nested class */ #title when (@debug = true) { background-color: orange; } } /* guard for class */ article when (@debug = … Read more
less.css sharing variables across files
The best way to do this is to @import your LESS file with all your variables in it. Here’s the syntax for the @import keyword: // For LESS file includes, @import “lib.less”; // or @import “lib”; // infers the .less extension // and for plain CSS includes which are added but not parsed by LESS … Read more