less | 易学教程

Immediate Child selector in LESS

阅读更多关于 Immediate Child selector in LESS

Is there anyway to have LESS apply the immediate child selector ( > ) in its output? In my style.less, I want to write something like: .panel { ... > .control { ... } } and have LESS generate something like: .panel > .control { ... } UPDATE Actually, the code in the original question works fine. You can just stick with the > child selector. Found the answer. .panel { ... >.control { ... } } Note the lack of space between ">" and ".", otherwise it won't work. Ricardo Tomasi The official way: .panel { & > .control { ... } } & always refers to the current selector. See http://lesscss.org/features

Is there a generic way to add vendor prefixes in LESS?

阅读更多关于 Is there a generic way to add vendor prefixes in LESS?

I currently have a mixins.less file, where almost all mixins are basically the same: .border-radius(@radius) { -webkit-border-radius: @radius; -khtml-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow(@value) { -webkit-box-shadow: @value; -khtml-box-shadow: @value; -moz-box-shadow: @value; box-shadow: @value; } Is there a way to create some kind of generic mixin, that I could call like this: .vendor('border-radius', '3px'); .vendor('box-shadox', '10px 10px'); and which would produce the same result as above? seven-phases-max Notice: The recommendation is

Is there a way to set a common image path for LESS files?

阅读更多关于 Is there a way to set a common image path for LESS files?

I am using the LESS styling language. Consider the following CSS: .side-bg { background:url(../img/layout/side-bg.jpg) top no-repeat; } Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image path and use it like so: @image-path: ../img; .side-bg { background:url(@image-path/layout/side-bg.jpg) top no-repeat; } This does not work however. Its not a huge deal, I could always use find and replace if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible. Try using string interpolation

In LESS CSS can I get LESS to watch a bunch of files but compile a different file when they change?

阅读更多关于 In LESS CSS can I get LESS to watch a bunch of files but compile a different file when they change?

问题 I have several LESS files that are all imported into one master file (styles.less). My problem at the moment is: when I make a change in one of the child files I have to save style.less to compile it to CSS. Is there a way in which I can ask less to monitor the child files but only compile the parent? Cheers, Ad 回答1: I found a solution for MY problem but it would be great for most. As I am on a Mac I istalled less.app ( http://incident57.com/less/ ), it uses less.js to compile the less for

How to use ASP.Net MVC 4 to Bundle LESS files in Release mode?

阅读更多关于 How to use ASP.Net MVC 4 to Bundle LESS files in Release mode?

I'm trying to have LESS files in my web project, and have the MVC 4 bundling functionality call into the dotLess library to turn the LESS into CSS, then minify the result and give it to the browser. I found an example on the ASP.NET site (under the heading LESS, CoffeeScript, SCSS, Sass Bundling. ). This has given me a LessTransform class that looks like this: public class LessTransform : IBundleTransform { public void Process(BundleContext context, BundleResponse response) { response.Content = dotless.Core.Less.Parse(response.Content); response.ContentType = "text/css"; } } and this line in

LESS CSS nesting classes

阅读更多关于 LESS CSS nesting classes

I'm using LESS to improve my CSS and am trying to nest a class within a class. There's a fairly complicated hierarchy but for some reason my nesting doesn't work. I have this: .g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); } .posted { .my-posted; span { border: none; } } } I can't get the .g.posted to work. it just shows the .g bit. If i do this it's fine: .g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba

LESS loops used to generate column classes in twitter - How do they work?

阅读更多关于 LESS loops used to generate column classes in twitter - How do they work?

Bootstrap uses some LESS mixins to generate it's column classes (and several other classes); .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { //

how to setup less using only js

阅读更多关于 how to setup less using only js

I have an html like this all I have included all the files in to my folder. I tried to add some 'less' css attributes in to my main.css file but it is not reflecting in my browser I have added like this. p{color:red;} Any help will be really appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Less Learning</title> <link rel="stylesheet/less" href="css/main.less" type="text/css" />

less 和sass的区别

阅读更多关于 less 和sass的区别

一、Less、Sass/Scss是什么? 1、Less：是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。 Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。 2、Sass：是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。 Sass与Scss是什么关系? Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。二、less和sass的相同之处 Less和Sass在语法上有些共性，比如下面这些： 1、混入(Mixins)——class中的class； 2、参数混入——可以传递参数的class，就像函数一样； 3、嵌套规则——Class中嵌套class，从而减少重复的代码； 4、运算——CSS中用上数学； 5、颜色功能——可以编辑颜色； 6、名字空间(namespace)——分组样式，从而可以被调用； 7、作用域——局部修改样式； 8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。三

Bootstrap 3 with LESS: how to handle bootstrap's nested rules?

阅读更多关于 Bootstrap 3 with LESS: how to handle bootstrap's nested rules?

I'm doing my best to remove as many Bootstrap' "classes" markup style from my HTML as I can, and use semantic tags where useful, but so far it only works in simple cases. When the original classes features a lot of nested rules, it becomes a nightmare. For instance, in the following example from the docs (with added sizing rules): <div class="row"> <div class="col-lg-6"> <div class="input-group input-group-lg"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control"> </div> </div><!-- /.col