less

app.js: app.use(express.compiler({ src: __dirname + '/public', enable: ['less']})); app.use(express.static(__dirname + '/public')); In my jade view: link(rel="stylesheet", type="text/css", href='/app/stylesheets/app.less) I've got less file in: public/app/stylesheets/app.less When I request the page I've got in html head: <link href="/app/stylesheets/app.less" type="text/css" rel="stylesheet"> And noting in server console. 1) So Why does express even doesn't try to compile app.less? Should it? 2) If everything right: should link in htm be <link href="/app/stylesheets/**app.less**" ... > or

LESS has the power to @import other LESS files. This question is intended to find a solution to import LESS files within LESS files from another Bundle in a Symfony project I'm working on a Symfony2 project, using LESS and Assetic to watch changes. My LESS files are able to import other LESS files but only if they are in the same bundle. If I try to import from another bundle Assetic watch stops with error "variable undefined" because the import fails. I've tried all sorts of paths in the import: In a LESS file in another bundle: @import "../../../../MainBundle/Resources/public/less/colors

What I know is that this: @iterations: 8; .mixin-loop (@index) when (@index > 0) { .my-class-@{index} { width: (100% / @index); } .mixin-loop(@index - 1); } .mixin-loop (0) {} .mixin-loop(@iterations); … Will result in this: .my-class-8{width:12.5%} .my-class-7{width:14.285714285714286%} .my-class-6{width:16.666666666666668%} .my-class-5{width:20%} .my-class-4{width:25%} .my-class-3{width:33.333333333333336%} .my-class-2{width:50%} .my-class-1{width:100%} … Making it the LESS equivalent of: for (var i = 8; i > 0; -- i) { // … } My question is: What would the LESS equivalent of: for (var i = 8;

How do I automate the task of compiling Twitter Bootstrap in my Node.js project? I'm editing the LESS files that compile into a custom build of Bootstrap for my Node.js project, so I can't just use the online customizer or the pre-compiled JavaScript/CSS distribution. How do I use something like Grunt or Bower to automate the process of building and compiling the Twitter Bootstrap front-end framework into my project from source? Is there a package manager for front-end libraries and frameworks? I'm using Grunt to compile my LESS. Here are the dependencies which you have to add to your package

I am trying to make a table with Vertical Text just on the header table. Here is my CSS code: table th.user { .rotate(90deg); position: relative; padding-top: 190px; top: -10px; right: 0px; width: 200px; } Here is the demo http://codepen.io/anon/pen/GnveJ As you can see it works partially. I would like to have the columns (the cells of the column where there are the name) which width fits exactly the contents (about 50 px); the same as the pic I attached to this question. Any idea what is the best way to make the css code or js code for this purpose? Requirement: I am using less and jquery

I create (or better try) to create my first WordPress theme with Less. What I do is to use a script like that into my functions.php wp_register_style('screen_css', get_bloginfo('template_url') . '/css/screen.less', array(), false, 'screen'); wp_enqueue_style('screen_css'); and the result is that: <link rel='stylesheet' id='stigma_screen-css' href='http://www.stigmahost.dch/wp-content/themes/stigmahost/css/screen.less?ver=1.0' type='text/css' media='screen' /> The question is, can I change somehow the rel="stylesheet" when I using the wp_register_style() function ? While neither function will

I am using less and trying to get the last input to have a margin-bottom of 10px . Here is what I have, but it is not working, and not applying the margin-bottom on the last input. Any ideas why? input { margin-bottom: 0px; &:last-child { margin-bottom: 10px; } } And the HTML <form id="auth-form"> <input id="ember367" class="ember-view ember-text-field" placeholder="Email" type="email" name="email"> <input id="ember368" class="ember-view ember-text-field" placeholder="Password" type="password" name="password"> <div class="clear"></div> <a class="pull-left forgot-password">Forgot password?</a>