less | 易学教程

LESS conditional variable change inside mixin

阅读更多关于 LESS conditional variable change inside mixin

问题 I need to achieve such effect, but even when @padding actually < @height it still use multiplier value 2, which is non-sense...Is there any limitation i don't know about? .btn-svg-offset(@height, @padding) { @paddings-n: floor(@height / @padding); @multiplier: 2; & when (@padding < @height) { @multiplier: 1; } @btn-svg-offset: @padding + ((@height / @multiplier) * @paddings-n); }; Any workarounds are welcome) 回答1: & when is not if (they usually say so just for short). & {...} is still a

Streamline LESS mixin

阅读更多关于 Streamline LESS mixin

问题 I have some LESS for making margins based on the side being passed (top, right, bottom, left or all): .margin(@px,@side) when (@side = top) { (){ margin-top: ~"@{px}px"; } } .margin(@px,@side) when (@side = right) { (){ margin-right: ~"@{px}px"; } } .margin(@px,@side) when (@side = bottom) { (){ margin-bottom: ~"@{px}px"; } } .margin(@px,@side) when (@side = left) { (){ margin-left: ~"@{px}px"; } } .margin(@px,@side) when (@side = all) { (){ margin-top: ~"@{px}px"; margin-right: ~"@{px}px";

Custom cursor with .less

阅读更多关于 Custom cursor with .less

问题 I am using Joomla 2.5 with a Gantry-powered theme. I am trying to build a custom text type with .less, and I am way out of my depth. The text is clickable, and that plays an audio file. Now I am looking for a clean way to be able to change the text attributes site-wide without editing every article every time. I am trying to make a custom class in a .less file that will change the mouse cursor on hover, but I can't get it to work at all. Here is how I set up the audio: <audio type="audio/mpeg

Calculate min / max of two values in Less

阅读更多关于 Calculate min / max of two values in Less

问题 How do i get the maximum or minimum of two values in Less. Just like Math.min() or Math.max() in javascript. I think this will be useful to use in your mixins. 回答1: This feature has been implemented in the meantime. Have a look at the official Function Reference: min() max() 回答2: Less min/max builtin functions are planned for future releases, see: https://github.com/less/less.js/pull/1371. For now you could try, based on https://stackoverflow.com/a/15982103/1596547: .max(@a,@b) { @max: ~"@{b

Unable to use Less.Parse using dotless in c#

阅读更多关于 Unable to use Less.Parse using dotless in c#

问题 I am following the link https://github.com/dotless/dotless/wiki/Using-.less to minify the css. I have include the dll and made Web.config changes. However when the refer it in index.cshtml as Less.Parse , the Less namespace is not available and and getting the exception "The name Less does not exists in the current context".. can somebody advise what am I missing? 回答1: I have solved it.. just missing parent name space and conversion works like a charm dotless.Core.Less.Parse(css) 回答2: If you

less、sass、styus三者的区别

阅读更多关于 less、sass、styus三者的区别

变量 Sass声明变量必须是【$】开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。 Less声明变量用【@】开头，其余等同Sass。 Stylus中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有【=】。作用域 Sass：三者最差，不存在全局变量的概念 Less：最近的一次更新的变量有效，并且会作用于全部的引用！ Stylus：Sass的处理方式和Stylus相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效嵌套三种css预编译器的【选择器嵌套】在使用上来说没有任何区别，甚至连引用父级选择器的标记&也相同继承 Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用【@extend】开始，后面接被继承的选择器。Stylus的继承方式来自Sass，两者如出一辙。Less则又独树一帜地用伪类来描述继承关系导入@import Sass中只能在使用url()表达式引入时进行变量插值 $device：mobile； @ import url ( styles . # { $device } . css ) ; Less中可以在字符串中进行插值 @device : mobile ; @ import "styles.@{device}.css" ; Stylus中在这里插值不管用

Importing LESS CSS Files with variables

阅读更多关于 Importing LESS CSS Files with variables

问题 I have 2 LESS CSS files called core.less and style.less core.less is located under: \css\core.less and its contents are below: body { background: @bg_color; color: @font_color; } style.less is located under: \css\green\style.less and its contents are below: @bg_color: #0F0; @font_color: #FFF; @import "../../core.less"; The core.less file contains all the css rules, in LESS format, but does not provide the definitions for the variables. The style.less defines all the variables referenced in

“bootstrap/less/bootstrap.less” overwriting all Selectors (vs 2013)

阅读更多关于 “bootstrap/less/bootstrap.less” overwriting all Selectors (vs 2013)

问题 what can I do that "bootstrap/less/bootstrap.less" is not overwriting all my css -styles (I could only use the .less files I only needed(e.g.: bootstrap/less/buttons.less ), but I need all classes). When I import "bootstrap/less/bootstrap.less" it's going to overwrite my bootstrap menu and all standard selectors like input, textarea ..., but I want only to overwrite the css classes i want, but not everything ... thanks :) [UPDATED: 09-04-2014] Background information for my project: Important

How to create generic CSS class with input parameter

阅读更多关于 How to create generic CSS class with input parameter

问题 I am showing list of items on UI. Those items have attribute as tLevel. Depending on tLevel value I want to create tree structure. Something like this item1 tLevel=0 item2 tLevel=1 item3 tLevel=2 item4 tLevel=1 item5 tLevel=2 item6 tLevel=3 item7 tLevel=3 item8 tLevel=3 item9 tLevel=0 item10 tLevel=1 item11 tLevel=1 HTML template <div class="treeLevelCSS(' + tLevel + ')" /> CSS should be something like .treeLevelCSS(tLevel){ "margin-left: " + (tLevel * 15) + "px" } I am not sure what I have

are variable mixin names in LESS possible?

阅读更多关于 are variable mixin names in LESS possible?

问题 What I want to do is to create a mixin that takes arguments and uses one or more of the arguments as names for other mixins to be included. as I'm not sure about the proper terms, I'll try to explain through example: @gradients{ light:#fafafa; //Should these also be prefixed with @? dark:#888888; } @gradientBackground(@name,@height){ background-image:url('../img/gradients/{@name}-{@height}.png'); //this works background-color:@gradients[@name]; } .someBox{ @gradientBackground(light;150); } /