less

Gulp less not handling includes properly, included variables not defined

由 不想你离开。 提交于 2019-11-30 11:55:32
问题 I am using less and Grunt, and am moving to gulp. My less works. When I run: lessc public/less/myapp.less I get working output with no errors. All my less, including includes, is in public/less , BTW. Here is my gulpfile: var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); gulp.task('compileLess', function () { gulp .src('./public/less/*') .pipe(less({ paths: ['./public/less'], // Search paths for imports filename: 'myapp.less' })) .pipe

Can numbers be rounded (math term) using LESS CSS?

由 十年热恋 提交于 2019-11-30 11:30:50
LESS CSS = http://lesscss.org/ I declared a variable, like this... @height: 30px Then I used a simple calculation, like this... line-height: @height * .666 It returns 19.98px but I wanted an even 20px So, does LESS CSS have a way to round numbers up or down? Yes they can: line-height: ceil(@height * .666); // 20px (round up) line-height: floor(@height * .666); // 19px (round down) line-height: round(@height * .666); // 20px (round to closest integer) line-height: round(@height * .666, 1); // 20.0px (round to 1 decimal place) http://lesscss.org/functions/ for a list of the lesscss functions,

LESS CSS, @import path from variable

由 帅比萌擦擦* 提交于 2019-11-30 11:28:00
I want to declare a variable with the path to the library: @libPath: "any/path/to/lib"; And use it in @import . Something like this: @import "@{libPath}/file.less"; And I see the result after processing: @import url("@{libPath}/file.less"); No such possibility or am I doing something wrong? Thanks. FWIW this is a bug in less.js that’s been discussed for way over a year now. There are at least two attempts to fix this but one requires large changes to the public API and has consequently been rejected. The other approach only works partially . On the other hand, lessphp supports this without

IDE with syntax highlight support for LESS

由 对着背影说爱祢 提交于 2019-11-30 10:53:24
Is there any IDE with syntax highlight support for LESS ? Eclipse does not support .less fully (nested rules, single line comments, etc) but you can at least configure it so that it would open .less files and treat them as .css. Preferences > General > Content Types: find "CSS" entry and add .less extension. Then, Preferences > General > Editors > File Assoc: add .less extension and associate with CSS editor. Better than nothing, especially if you're into Eclipse world ;) JetBrains PHPStorm has built-in support for LESS :) You could use Netbeans plugin for LESS. In Netbeans 6.9: tools->

Grunt 0.4 less task : How to not concatenate destination files

由 喜夏-厌秋 提交于 2019-11-30 10:19:00
I want to generate .css partial files from the corresponding .less files I use the latest versions available from npm, grunt@0.4.0, grunt-contrib-less@0.5.0 Prior to Grunt version 0.4 I could simply specify the pattern: htdocs/less/*.less as source htdocs/css/*.css as destination and all the files from the folder htdocs/less would be generated into the folder htdocs/css Since v0.4 the destination pattern does no longer work, all files from the folder htdocs/less are concatenated into one file named *.css How can I configure the task that it generates all files instead concatenating them into

How can I create multiple rows using semantic markup in Bootstrap 3?

由 ∥☆過路亽．° 提交于 2019-11-30 09:49:05
问题 I have eight "simple" panels that I want to layout using Bootstrap 3. The markup is <div class="dashboard"> <div class="dashboard-panel"> <h1>Panel 1</h1> <p>This is panel 1 (and a random piece of text)</p> </div> <div class="dashboard-panel"> <h1>Panel 2</h1> <p>This is panel 2 (and a random piece of text)</p> </div> // ...and so on - up to panel 8. </div> I'd like two two rows of four in md column size and four rows of two in sm column size. I'm using this following LESS rules: .dashboard {

Add prefixes to CSS class names using LESS or SASS

由 社会主义新天地 提交于 2019-11-30 09:34:21
I am trying to use Bootstrap on a project that encompasses 400+ sites and uses the previous CSS class names (which I have no control over). I've been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example). I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn't look like it will solve my issues. Is there a method via LESS, SASS, or any other compiler that makes it easy for me to add a tb- prefix to all existing classes in Bootstrap? You

LESSCSS - use calculation and return value

由 你。 提交于 2019-11-30 09:28:59
H i, Hoping you can help. Is there a way for LESS to return just a value - feel like I'm missing something very obvious Say I have: @unit:em; @basevalue:1; Can I use something to give me a shorthand return for - .someClass { padding: ~'@{basevalue}@{unit}'; } Like say: .returnUnit() { ~'@{basevalue}@{unit}'; } .someClass { padding: returnUnit(); } because what I'm ultimately hoping for is: .returnUnit(@val) { @basevalue*@val@{unit}; } .someClass { padding:returnUnit(0.5); } Using a mixing I have to define the style property, however the value of this return function would be used for many

using javascript calculated values in less

由 倾然丶 夕夏残阳落幕 提交于 2019-11-30 08:31:13
问题 In LESS I used following code to get the window's height. @winheight:`$(window).height()` What I'm getting is a number, but when i add px there to have the unit, height: @winheight px; It will compile to something like height: 910 px . I tried to have the unit after the javascript evaluation too. but I got the same result. @winheight:`$(window).height()`px height: @winheight; ... height:910 px; How can I get height:910px there (without the space between number and unit) ? EDIT: As for the

less-css — is it possible to get a parent's parent?

由 走远了吗. 提交于 2019-11-30 08:26:16
Is it possible to get a parent's parent? I tried & & { } but that didn't work. I'm trying to style a child element based on it's grandparent. Depends on Code Structure, and may Require Some Repetition of Code You cannot do it directly in most cases (see second example for exception). If Grandparent is an element This requires some repetition, but does allow for the grandparent to not be the outermost wrapper (so there could be a great grandparent). LESS grandparent { /* grandparent styles */ parent { /* parent styles */ child { /* child styles */ } } &.specialGrandpa { child { /* child styles
订阅 less