less

grunt-contrib-less cannot find source files even though path is correct

由 随声附和 提交于 2019-12-23 06:54:03
问题 I'm trying to get grunt-contrib-less to compile a less file for me. I have the following gruntfile: less: { files: { "httpdocs/static/assets/css/result.css": "httpdocs/static/assets/css/dashboard.less" } }, The paths are definitely correct, I've triple checked that those files exist, yet, when I run grunt I get the following message: Running "less:files" (less) task >> Destination not written because no source files were provided. What am I missing from my gruntfile to make it properly

Escape syntax for CSS selectors in LESS

由 拈花ヽ惹草 提交于 2019-12-23 05:51:29
问题 The tilde (~) and quote method to escape CSS properties appears to work fine, however what do I do if I want a CSS selector to contain a number (or anything else I want LESS to ignore), e.g. ~"#content ul.2col" { float: left; width: 45%; } This just gives me a syntax error. Any ideas? Update: It turns out, starting a CSS indentifier (element names, classes, IDs in selectors..) with a digit or a hyphen followed by a digit is not allowed. See this question: Which characters are valid in CSS

Managing multiple sections with less

由 别等时光非礼了梦想. 提交于 2019-12-23 04:58:18
问题 I am working on a project with multiple sections. Depending on the section, elements in that section have varying colors. Through my LESS files I am defining all these possibilities like so: a{ .section_what &{ color: darken(@what,10%); } .section_where &{ color: darken(@where,10%); } .section_who &{ color: darken(@who,10%); } .section_post &{ color: darken(@post,10%); } .section_events &{ color: darken(@events,10%); } .section_deals &{ color: darken(@deals,10%); } } It seems like this is not

LESSCSS: how to compile using last version and grouping media queries

由 本秂侑毒 提交于 2019-12-23 04:28:25
问题 I usually develop LESS code using JS compiler in DEV environment, so I compile CSS only when going to PRODUCTION one. I have 2 needs compiling LESS into CSS: Compile LESS not automatically, but only when I manually want to do it, but using always last version of compiler released (often tools like WinLess have not up-to-date versions) Auto-merging media queries (using media queries inside nested rules, results in numerous repetition of the same media query. Compiler should detect it and group

Bootstrap panel - Semantic HTML with LESS

由 五迷三道 提交于 2019-12-23 03:12:21
问题 I'm currently starting to explore Bootstrap in combination with LESS to get a new site up and running quickly in Umbraco. As I want to avoid those terrible bootstrap class names on my HTML markup, I'm trying to semanticize (sp?) it a little bit. So I want to have a panel. First, here is my markup like I want it to be on the end: <div class="newsItem"> <div class="newsHeader"> Panel Title </div> <div class="newsBody"> Panel content </div> <div class="newsFooter">Panel footer</div> </div> And

Web前端一种动态样式语言-- Less

由 寵の児 提交于 2019-12-23 02:05:55
变量 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 混合 混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer {

Where css less is executing from?

由 半腔热情 提交于 2019-12-23 02:01:30
问题 In my site I don't have any LESS code or such set up but there seem to be some CSS LESS generating in my site when I check in FireFox inspector but I don't know the cause of it. Things are being generated are like: grid-framework.less | normalize.less | table.less | scaffolding.less I can't unfortunately post all the code because is huge. So here are the CSS includes <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/myStyle.css" rel="stylesheet"> <link rel="stylesheet" href

Space in less loop

由 这一生的挚爱 提交于 2019-12-23 01:35:10
问题 I have this : .loop(@index) when(@index =< @to) { .page-@{index} { nav{ ul{ li:nth-child(@{index}){ background:#fff; } } } } .loop(@index + 1); } It seems to have a problem, because the output of my css is : ul li:nth-child( 2) { background: #fff; } ul li:nth-child( 3) { background: #fff; } it creates a space in the pseudo selector and it doesn't work. Any ideas to remove this space ? Thanks 回答1: It's a bug. A workaround is to set the identifier via temporary variable, e.g.: ul { @li: ~"li

Django + Mac osx how to use less css?

由 限于喜欢 提交于 2019-12-22 18:23:12
问题 There is no less css command line compiler in mac osx. But I am trying out a project which needs to use less css. Also less is used to compress the css files in the project. How do I handle this? I read in less website that its js can be run on a node.js server - http://lesscss.org/#-server-side-usage But I am not understanding how to integrate it with django. What should be the value for the COMPRESS_PRECOMPILERS ? COMPRESS_PRECOMPILERS = ( ('text/less',""), ) Any help appreciated from

Split CSS circle into 3 equal parts with linear gradients - pie chart style

由 帅比萌擦擦* 提交于 2019-12-22 14:54:52
问题 I'm trying to create a progress indicator - and to a certain extent I've done it, but it's not what I want to end up with. Here's an image: As you can see the indicator shows 1 third, 2 thirds, then full. This is what I want to achieve except that I want the first, second and third sections to be different colors, so I would end up with 3 equal slices in 3 different colors starting at 12 o'clock. Here's the code - I've removed the centre section because it's not relevant to the question: (
订阅 less