less

Conditional CSS based on background color variable

由 和自甴很熟 提交于 2019-11-26 09:57:22
问题 Is it possible to set a color based on the lightness/darkness of a less variable? Currently I have the following code: li { color: darken(@bodyBackground, 10%); } This works providing @bodyBackground is a light color. However if it was a dark color I\'d like to use lighten(@bodyBackground, 10%) . Is this possible with LESS? 回答1: There's contrast function, e.g.: li { color: contrast(@bodyBackground, lighten(@bodyBackground, 13%), darken(@bodyBackground, 13%)); } 回答2: You can be much smarter

Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

由 回眸只為那壹抹淺笑 提交于 2019-11-26 09:31:40
问题 I m trying to move to the new boostrap 3 grid and I m facing some difficulties. How to have the grid to stack below 480px but not between 480px and 768px? above 768px the padding left of the first and the padding right of the last are outside the container, but below 768px the padding is inside the container so the look is different because the content is no more aligned with a container that could be above. when the grid stack the padding remain but to me it should be at 0. Any help would be

Defining Variable Variables using LESS CSS

由 穿精又带淫゛_ 提交于 2019-11-26 08:08:28
问题 Say I have three separate color schemes that are used on various pages in a site. Each color has a a light, medium and dark tint defined, and the color scheme is defined by a class in the body. Assume that the \"red\" color scheme is the default. Like this: Color Definitions : @red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909; Basic Default Style Example body { background-color: @red-dk; #container {

LESS: Unrecognized input error when using Bootstrap

由 删除回忆录丶 提交于 2019-11-26 07:47:17
问题 After upgrading Harp, I started getting an Unrecognized Input error in an irrelevant line of CSS. Less -> CSS (Unrecognised input) /Users/jorge/Dropbox/harp.io/apps/mysite.com/public/css/main.less Using Bootstrap v2.2.2 and Harp v0.9.4. 回答1: After digging for a while, I found that the error was coming from the mixin.less file where the #grid stuff was getting defined. This is what the file had originally: (~".span@{index}") { .span(@index); } After reading the LESS change log, I found that

Load less.js rules dynamically

由 时光毁灭记忆、已成空白 提交于 2019-11-26 07:28:45
问题 I\'m looking at using less.js (looks great), but our site requires that some styles be loaded dynamically after initial page load. It seems, however, that all LESS stylesheets must be loaded prior to the less.js script load. i.e. this works <link rel=\"stylesheet/less\" href=\"/static/less/style.less\"/> <script src=\"http://lesscss.googlecode.com/files/less-1.0.30.min.js\"></script> but it fails if the lines are swapped around, neither firefox nor chrome appear to attempt loading \'style

Disable LESS-CSS Overwriting calc() [duplicate]

由 元气小坏坏 提交于 2019-11-26 05:42:34
This question already has an answer here: Less aggressive compilation with CSS3 calc 4 answers Right Now I'm trying to do this in CSS3 in my LESS code: width: calc(100% - 200px); However, when LESS compiles it is outputting this: width: calc(-100%); Is there a way to tell LESS not to compile it in that manner and to output it normally? Using an escaped string (a.k.a. escaped value): width: ~"calc(100% - 200px)"; Also, in case you need to mix Less math with escaped strings: width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em"); Compiles to: width: calc(100% - 15rem + 15px + 2em); This works as

Loop over an array of name value pairs in LESS

由 回眸只為那壹抹淺笑 提交于 2019-11-26 05:36:55
问题 Is there some way to loop an array of name/value pairs LESS? Something like this: arr = alice: black, bob: orange; .for(arr) // something something // .cl-@{name} { background-color: @{value} } To generate something like this: .cl-alice { background-color: black; } .cl-bob { background-color: orange; } I know that you can for-loop an array, but I\'m unsure if it can be an array of objects rather than values in LESS. 回答1: The answer given by @seven-phases-max works very well. For completeness

less.js not working in chrome

由 余生长醉 提交于 2019-11-26 05:27:57
问题 I noticed that less.js is working in firefox but not in Chrome, or is it because I made an error? <link rel=\"stylesheet/less\" href=\"css/style.less\" /> <script src=\"http://lesscss.googlecode.com/files/less-1.0.21.min.js\"></script> @highlight: #cb1e16; @shade1: #cb1e16; @tone1: #5c6f7d; @grad1: #e6edf3; @grad2: #8a8d92; @text1: #333e44; header, footer, section, article, nav, aside { display: block; } .grad { background: @grad2; background: -moz-linear-gradient(top, @grad1, @grad2 1200px);

Using variables in property names in LESS (dynamic properties / property name interpolation)

由 自古美人都是妖i 提交于 2019-11-26 04:48:59
问题 I noticed that inuit.css, which was written in SASS, has a .vendor mix-in: @mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; #{$property}:$value; } Is there a way to replicate this in LESS with some of the odd features like e() and @{ } ? 回答1: Update: LESS >= 1.6 As of version 1.6 (see changelog ) property name interpolation is implemented in LESS. So you don't need any magic anymore. (For older

How to thematize in lesscss

由 ぃ、小莉子 提交于 2019-11-26 04:28:30
问题 As I am in a preproduction cycle to develop an app, I am often changing visual in order to converge to what will be validated by the customer. Some visuals of the same page (call it themes) would be interesting to keep so that I can present them quickly to the customer. The way I found is to create an appearance class I put on body and by changing it I could change the page itself accordingly. This said, I am interested in thematizing global less variable such as follows: // default
订阅 less