less | 易学教程

Is it possible to declare LESS variables in the HTML <head>?

阅读更多关于 Is it possible to declare LESS variables in the HTML ?

问题 Is it possible to declare LESS variables in the HTML and use the declared vars in a seperate .less file. I want to do something like this: <html> <head> <style type="text/less"> @MYVAR: #9BC509; </style>  <link rel="stylesheet/less" type="text/css" href="styles/less/main.less"> </head> ... </html> EDIT: Since this did not work and was not a clean solution, I restructured my project, and now do a normal less file @incude for the variables I need. The

Browser sync reloading but CSS not changing with LESS and Gulp

阅读更多关于 Browser sync reloading but CSS not changing with LESS and Gulp

问题 I'm trying to figure out how to use browser sync in conjunction with gulp and less to get the browser to automatically update upon changes in less files after compilation. What I've got right now is causing what appears to be a reload in the system with a message "Connected to Browser Sync" but I'm not seeing changes occur in the browser. On a full manual reload with cache disabled I see the expected changes, so the css / less task seems to be working partially but I'm missing something on

Extending Twitter's Bootstrap 2.x default grid (span classes) with less mixins

阅读更多关于 Extending Twitter's Bootstrap 2.x default grid (span classes) with less mixins

问题 So I think I'm just starting to understand less and bootstrap. I am building a responsive theme and one of the issues I have is I have a span with a 1px border, this 1px border naturally increases the width and throws the whole thing off, of course I could just slap another class on the span to override the width:300 setting and make it 299, however because it's a responsive theme I would have to write several classes for various screen widths. I just tried writing a mixin into less bootstrap

Webpack import multiple less files using glob expressions?

阅读更多关于 Webpack import multiple less files using glob expressions?

问题 I have been trying to import less files automatically using webpack's less-loader, but glob expressions don't work in root.less file. In detail, I am replacing gulp builder with webpack and I can use this pattern: @import 'widgets/**/*.less'; to import less files in gulp automatically (Please check this link glob expressions). However, this pattern is not valid in webpack and less-loader seems that do not support as well. I tried to use require.context the method of webpack, but I cannot

Flexbox layout pattern 1/3

阅读更多关于 Flexbox layout pattern 1/3

问题 I'm looking for some help with preparing layout pattern in flexbox, the thing is that I will have a set of divs printed inside container and I can not change the rendering logic (i.e. add some wrapping rows), yet, I'd like to get something like this: Unfortunately got stuck every time, results weren't satisfactory at all :/ Height of those divs is fixed, 1 is a sum of 2 + 3 + gap. https://jsfiddle.net/zechkgf4/ [] Thank you in advance 回答1: What you want to do is not posible with flex-box as

Less variable issue in jquery

阅读更多关于 Less variable issue in jquery

问题 I have a less file which uses multiple less variable and and a less variable used inside another less variable to calculate darkness and brightness. I need to change thse variables value to change the color from color picker at run time. Code as @base: #35414E; // #35414E @hue-control: contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, lightness(@base) * (@amount / 100)), 50%); We need to update at rum time and show immediately. 回答1: example <!DOCTYPE

Is Javascript Evaluation working in LESS (Leaner CSS)?

阅读更多关于 Is Javascript Evaluation working in LESS (Leaner CSS)?

问题 I am using LESS ( http://lesscss.org ) and it says ... JavaScript evaluation JavaScript expressions can be evaluated as values inside .less files. This is done by wrapping the expression with back-ticks: The example provided is ... @height: `document.body.clientHeight`; So I've tried to do this in my html ... <script type="text/javascript"> var fred=5; </script> <link rel="stylesheet/less" type="text/css" href="styles.less"> <script type="text/javascript" src="http://lesscss.googlecode.com

LESS - Create ID by looping through two variables

阅读更多关于 LESS - Create ID by looping through two variables

问题 I am trying to create a loop that outputs all of the possible combinations between coordinates -2,-2 to 2,2. Is there any way to do this without creating multiple loops? Desired Output #p1x0,#p2x0,#p-1x0,#p-2x0,#p1x1,#p-1x-1,#p-1x1,#p1x-1,#p2x2,#p-2x-2,p2x-2,p-2x2,#p2x1,#p2x-1,#p1x2,#p1x-2,#p-2x1,#p-2x-1,#p-1x2,#p-1x-2,#p0x-1,#p0x-2,#p0x0,#p0x1,#p0x2{} Current Attempt #cube-side { border:red; } .create-cubes(@n, @i: -2, @z: -2, @side-sum:@i + @z) when (@side-sum =< @n) { & when (@i < @z) {

Trouble to install SimpLESS

阅读更多关于 Trouble to install SimpLESS

问题 I am trying to install SimpLESS on my Windows 7 64bit PC. However, as soon as I tried to run the installer, it popup an error message saying: "Could not query info: Invalid HTTP Status Code (403)". I tried with Google, but didn't found any solution for that. Do you ever experience this problem before? Any idea what causes that problem? How can I solve it? If worst case I can't get run on my PC, is there any other way to do LESS CSS on my PC? Thank you. 回答1: I was also facing same problem.

Use “Less” or something similar to generate a Qt Stylesheets

阅读更多关于 Use “Less” or something similar to generate a Qt Stylesheets

问题 I'm creating a stylesheet for my Qt application to customize the look and feel. I'd love to take advantage of a CSS generator like LESS or Compass, so I can at least use variables for color and perhaps take advantage of some of the other cool features they offer. My concern is that Qt does not use the W3C standard for stylesheet, they utilize a subset of the syntax with a few extra options. Is this even possible? Are Less and Compass able to generate valid Qt stylesheets? 回答1: Qt's CSS has a