less

问题 Not sure if this is possible using LESS, but I saw .rotate(@degrees) {...} (is that only work in LESS) I want to be able to write one CSS class and pass the number as a parameter from the HTML - for example: <div class="opacity(20)"> Here is just an example of a repeated CSS class that I use (but even passing an integer will be great): .opacity-10 { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; // IE 8 filter: alpha(opacity=10); // IE 5-7 -moz-opacity: 0.1;

问题 I found this example in LESS documentation: LESS: .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } OUTPUT CSS: .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; } This loop generates 4 different divs because '4' was the value passed by firs mixin's call, but generated values are entirely calculated inside mixin. In other words, @n implicitly

问题 Does anyone know how to recreate the below Sass function in Less? I want to be able to easily convert units within any CSS property (e.g.: font-size, margin, padding, etc). Sass: @function get-vw($target) { $vw-context: (1440 * 0.01) * 1px; @return ($target / $vw-context) * 1vw; } CSS: selector { font-size: get-vw(20px)vw; } The Sass is from here: http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/ 回答1: Updated Answer: As seven-phases-max has mentioned in

问题 I am having a big issue trying to make a live customization section for my website. I want to be able to modify each variable from my LESS file in the browser when a value is added in the field and see the result immediately in the browser. For example: $('#txtBaseColor > .form-control').change(function(){ var bgBase = $(this).val(); less.modifyVars({ '@bgBase': bgBase }); }); // Base bckg color change $('#txtBaseTextColor > .form-control').change(function(){ var cBaseContrast = $(this).val()

问题 How do i escape the following: .prefix(@rule, @prop) { -webkit-@{rule}: @{prop}; -moz-@{rule}: @{prop}; -o-@{rule}: @{prop}; -ms-@{rule}: @{prop}; @{rule}: @{prop}; } I've tried a bunch of different ways, wrapping it in ~"stuff" , wrapping the variables in @{var} , backslashing the - 's... no success! Edit: There's a pull req for it on Github: https://github.com/cloudhead/less.js/pull/698 回答1: Update for LESS 1.6+ Your original plan almost works with the LESS 1.6 update. This is the syntax

问题 I am trying to install Node and Less on Ubuntu 12.1. Installing appears to work ok and I can see there is a Less folder created when I install Less using "sudo npm g install less" in: /usr/local/lib/node_modules However when I run "lessc -v" I get the below: module.js:340 throw err; ^ Error: Cannot find module 'less' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:362:17) at require (module.js:378:17) at Object.

问题 I got a LESS file from this a Date-picker plugin and want to convert it to SASS. But in the LESS, it concates a class name like this: //LESS .dropdown{ &-inline{ } } Result: .dropdown-inline ... I tried many things in SASS like #{-inline} or #{"-inline"} but it doesn't work. I tried googling and found a year-old article saying it's impossible in SASS. I can't found recent post about this issue. Is it possible now? How? Thanks 回答1: This is not possible before version 3.2 but will be eventually

问题 I am trying to figure out Joni Korpi's Frameless CSS frameless grid (http://framelessgrid.com/) and I'm having a hard time reading the .less file he has. I have a basic understanding that LESS uses variables so I know column = 48 and gutter = 24 and that's about it. Does 1cols = 1 * (48 + 24) - 24)/ 12 ? What I don't understand is @1col: @1cols; and .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; } Can anybody help? https://github.com/jonikorpi/Frameless/blob/master

问题 It seems that LESS' import strategy for URL doesn't account for relative paths the same as CSS does. test.less @import "sub/test.less"; div.a { background-image:url('imagea.jpg'); } sub/test.less div.b { background-image:url('imageb.jpg'); } output.css div.b { background-image:url('imageb.jpg'); } div.a { background-image:url('imagea.jpg'); } correct_output.css div.b { background-image:url('sub/imageb.jpg'); } div.a { background-image:url('imagea.jpg'); } Is there a way to get this behavior

问题 Can I parse LESS client side, and return the results? I am currently using as recommended in documentation, which is to include less file, and minified less parser afterwards. I want to be able to return the raw css so I can save it as a css file. I do not want to install node.js and the likes, I want a client side solution. 回答1: A look at the less.js source brings up the Parser object. Assuming that less.js is included in the page: var data = "@colour: red; #example { background-color: