less

问题 I'm experimenting with LESS (not a fan of the SASS syntax) and have been trying to find out what the best way to do media queries with it would be. I read through this blog post on how to "do" media queries with LESS, but it points out the fact that this causes all the media queries to be separated and scattered throughout the resulting CSS. This doesn't really bother me (I could care less about the result and more about it working). What did bother me was a comment that talked about issues

问题 I'd like to start learning Twitter Bootstrap and merging it into my site (starting with the form elements) but it breaks the rest of the site if I include it as is. I'd like to prefix all of the selectors so that I can gradually add content that's bootstrap-styled like so: <div class="bootstrap"><!-- bootstrap styled stuff here --></div> Because I'm only starting to learn, I don't really know what's possible with less . I have manually done the selector prefix but I'm curious if there would

问题 say i have this mixin: .loop-strings(\"A, B, C\", \"1, 2, 3\", \"X, Y, Z\";); implemented like so: .loop-strings(@list, @index: 1) when (isstring(extract(@list, @index))) { @currentMember: extract(@list, @index); .do-something-with(@currentMember); .loop-strings(@list, (@index + 1)); /* loop the next member */ } .do-something-with(...) { @args1 : e(@arguments); @args2 : A, B, C; args1: @args1; args2: @args2; extract-args1-2: extract(@args1, 2); extract-args2-2: extract(@args2, 2); } The

问题 I want the following things to occur: Have the process automated server side. Simply be able to reference the LESS file as I would a CSS file in my code. The user is returned minified CSS instead of the LESS file - cached so the compiler doesn\'t need to run unless the LESS file has been updated. For this to work with any LESS file that is referenced anywhere within my domain. I spotted Lessphp, but the documentation isn\'t very clear, nor does it explain how to dynamically get any LESS file

问题 Can you import .css files into .less files...? I\'m pretty familiar with less and use it for all my development. I regularly use a structure as follows: @import \"normalize\"; //styles here @import \"mixins\"; @import \"media-queries\"; @import \"print\"; All imports are other .less files and all works as it should. My current issue is this: I want to import a .css file into .less that references styles used in the .css file as follows: @import \"../style.css\"; .small { font-size:60%; .type;

问题 I think this is not possible, but I thought I ask in case there is a way. The idea is that I have a variable for path to web resource folder: @root: \"../img/\"; @file: \"test.css\"; @url: @root@file; .px { background-image: url(@url); } I get this as a result: .px { background-image: url(\"../img/\" \"test.css\"); } But, I want the strings to combine into one string like this: .px { background-image: url(\"../img/test.css\"); } Is it possible to concatenate strings together in Less? 回答1: Use

问题 How do I extend a Less class which is dynamically formed using & combinator? Less which generates expected output: .hello-world { color: red; } .foo { &:extend(.hello-world); font-size: 20px; } Expected CSS output: .hello-world, .foo { color: red; } .foo { font-size: 20px; } Less does not generate expected output: .hello { &-world { color: red; } } .foo { &:extend(.hello-world); font-size: 20px; } Unexpected CSS output: .hello-world { color: red; } .foo { font-size: 20px; } 回答1: Extending a

问题 LESS allows parametric mixins, such as: .transition(@property, @duration){ transition: @property @duration; -moz-transition: @property @duration; /* Firefox 4 */ -webkit-transition: @property @duration; /* Safari and Chrome */ -o-transition: @property @duration; /* Opera */ } However, this doesn\'t always work with properties such as transitions. If you are trying to have multiple transitions and attempt to call the mixin multiple times, the last mixin overrides all previously defined

问题 I am using Font Awesome 4.0.0, and want to do something like this in LESS: .btn-github { .btn; .btn-primary; margin-left: 3em; i { .@{fa-css-prefix}; .@{fa-css-prefix}-github; .@{fa-css-prefix}-lg; margin-right: 1em; } } That doesn\'t compile with the error: ParseError: Unrecognised input in - on line ... Is it possible to accomplish this? It would certainly make a beautiful button for me. 回答1: There are at least 2 problems with what you are trying to do ( for LESS >=1.6 see update bellow ):

问题 SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins). Does LESS have this feature as well? 回答1: Yes, Less.js introduced extend in v1.4.0. :extend() Rather than implementing the at-rule ( @extend ) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS's implementation the flexibility to be applied either directly to a selector itself, or inside a statement.