less | 易学教程

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}";

Lighten parent's (unknown) background-color in child

阅读更多关于 Lighten parent's (unknown) background-color in child

问题 Is there a way in less or (css3 in general) to access parent's background-color without knowing it? Something like: .child-class { background-color: lighten(parent-background-color, 30%); } A less variable would be the obvious approach but in this case I simply don't know the parent's background-color as it can be dynamically styled. Anybody got something in her trick box to help out? 回答1: EDIT: Have a look at ScottS's answer for a clever solution that is probably what you need. That cannot

ARCH字体管理，添加新字体.

阅读更多关于 ARCH字体管理，添加新字体.

查看已安装字体 fc-list | less 搜索库里可用的字体 pacman -Ss ttf | less 找到要用的自体安装之，比如文泉忆 sudo pacman -S wqy-zenhei 或者手动安装，把ttf字体文件复制到 /usr/share/fonts/TTF目录下。更新字体库 fc-cache -vf 转载于:https://www.cnblogs.com/Leo-Forest/archive/2012/06/13/2547812.html 来源： https://blog.csdn.net/weixin_30832405/article/details/99022576

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!<

Compiling and maintaining ie-specific stylesheets

阅读更多关于 Compiling and maintaining ie-specific stylesheets

问题 What is the common practice for maintaining IE workarounds in a separate CSS file? I'm talking about deeper issues that are impractical to work out by other means (such as including an alternative image url along with a base64-encoded embedded resource; boxsizing.htc workaround etc.) NB: I'm conservative when considering dataURI vs vanilla spriting, so there are only a few Sometimes I have to resort to code similar to .some-class-lets-say-datepicker { background-image: url(data:image/png

Loop over an array of name value pairs in LESS

阅读更多关于 Loop over an array of name value pairs in LESS

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. Bass Jobsen The answer given by @seven-phases-max works very well. For completeness you should also notice that you can do the same in Less without the imported "for" snippet. from

Double border with different color

阅读更多关于 Double border with different color

问题 With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow. On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible? NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a

less.js not working in chrome

阅读更多关于 less.js not working in chrome

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); background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92)); } html { .grad; min-height:

Arrays with Less

阅读更多关于 Arrays with Less

问题 With SASS you can create an array of variables like this: $badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d, dark-red #b5473e, black #666, cyan #81BABD, purple #AEA7CF; Is there some way of creating arrays with Less as well? 回答1: The answer to the question is "Yes, you can create and work with arrays in Less". An array (in CSS and thus Less realm it's usually referred to as "List") is defined with just the same code as in your Q: @badge-colors: blue #7FB3D4, gray #767676,

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

阅读更多关于 Using variables in property names in LESS (dynamic properties / property name interpolation)

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 @{ } ? Martin Turjak 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 versions, see my original answer.) Your mixin would work basically as is: LESS: .vendor(@property;