less | 易学教程

Multiple properties are getting treated as separate arguments in mixins

阅读更多关于 Multiple properties are getting treated as separate arguments in mixins

问题 I'm trying to write a mixin, but I can't seem to get the arguments working the way I want: multiple properties are getting treated each as a separate argument. Current Code .transition(@property: all, @time: 1s, @timing: ease-in-out) { -moz-transition: @property @time @timing; -webkit-transition: @property @time @timing; -o-transition: @property @time @timing; transition: @property @time @timing; } a { .transition(color, opacity, .5s); } Desired Output a { -moz-transition: color, opacity .5s

Font awesome not working in Firefox

阅读更多关于 Font awesome not working in Firefox

问题 I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes. This is how my directory looks like -- Project -- js -- css -- less -- font-awesome -- css -- font -- less All I've modified in the Project > less > boostrap.less file has been: @import "sprites.less"; //for this line @import "../font-awesome/less/font-awesome.less"; As I said in Chrome works fine but for some reason Firefox shows only boxes.

“Please try running this command again as Root/Administrator” error when trying to install LESS

阅读更多关于 “Please try running this command again as Root/Administrator” error when trying to install LESS

问题 I'm trying to install LESS on my machine and have installed node already. However, when I enter "node install -g less" I get the following error and am not sure what to do? FPaulMAC:bin paul$ npm install -g less npm ERR! Error: EACCES, unlink '/usr/local/lib/node_modules/less' npm ERR! { [Error: EACCES, unlink '/usr/local/lib/node_modules/less'] npm ERR! errno: 3, npm ERR! code: 'EACCES', npm ERR! path: '/usr/local/lib/node_modules/less' } npm ERR! npm ERR! Please try running this command

How to use if statements in LESS

阅读更多关于 How to use if statements in LESS

问题 I'm looking for some kind of if-statement to control the background-color of different div elements. I have tried the below, but it doesn't compile @debug: true; header { background-color: (yellow) when (@debug = true); #title { background-color: (orange) when (@debug = true); } } article { background-color: (red) when (@debug = true); } 回答1: LESS has guard expressions for mixins, not individual attributes. So you'd create a mixin like this: .debug(@debug) when (@debug = true) { header {

Is there a SASS.js? Something like LESS.js?

阅读更多关于 Is there a SASS.js? Something like LESS.js?

I have used LESS.js before. It's easy to use, something like <link rel="stylesheet/less" href="main.less" type="text/css"> <script src="less.js" type="text/javascript"></script> I saw SASS.js . How can I use it in a similar way? Parsing a SASS file for use immediately in HTML. It seems like SASS.js is more for use with Node.js ? var sass = require('sass') sass.render('... string of sass ...') // => '... string of css ...' sass.collect('... string of sass ...') // => { selectors: [...], variables: { ... }, mixins: { ... }} chriseppstein There is no officially sanctioned JavaScript

移动端rem适应布局

阅读更多关于移动端rem适应布局

移动端rem适应布局 rem rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示24px 媒体查询使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机，Android，平板等设备都用得到多媒体查询语法规范 @media mediatype and|not|only(media feature) { CSS-Code } 媒体类型值解释说明 all 用于所有设备 print 用于打印机和打印预览 scree 用于电脑屏幕，平板电脑，智能手机关键字 and：可以将多个媒体特性连接到一起，相当于“且”的意思 not：排除某个媒体类型，相当于“非”的意思，可以省略 only：指定某个特定媒体类型，可以省略媒体特性【注意】要用小括号进行包含值解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 less介绍

Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

阅读更多关于 Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

问题 Is it possibile to add span3 class in a mixin to avoid putting it in every element in my HTML? Something like: .myclass { .span3; // other rules... } EDIT I apologize I forgot to specify an important detail: span3 is a standard class of Bootstrap. I didn't find its definition in any file of the Bootstrap framework. 回答1: New Answer (requires LESS 1.4.0) What you actually desire is something known as extending in LESS and SASS terminology. For example, you want an HTML element (just an example)

Generate random number in LESS CSS?

阅读更多关于 Generate random number in LESS CSS?

问题 Tried searching for this but it's difficult given the syntax. Is there any way to generate a random number in LESS? I checked the documentation and don't see anything, but wondered if anyone knew of a trick or undocumented solution. 回答1: According to the documentation: JavaScript evaluation JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If

Loop through array of variable names in Less

阅读更多关于 Loop through array of variable names in Less

In our app, we have a preset list of colors that a user can be choose from and everything related to that user will have that color. Throughout the app, we will have various modules with the color attached as a class name. eg. <div class="example_module green"> ... </div> We are using LESS for our CSS. In a number of places we are doing things like this: .example_module.green { background: @green; } .example_module.red { background: @red; } .example_module.blue { background: @blue; } etc I'd like to be able to set all these color names as an array and iterate over them. If we add colors in the

How to namespace Twitter Bootstrap so styles don't conflict

阅读更多关于 How to namespace Twitter Bootstrap so styles don't conflict

I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I'm not experienced with this yet so I don't quite understand how to do this. Here's an example of the HTML that I'm trying to style: <div class="normal-styles"> <h1>dont style this with bootstrap</h1> <div class="bootstrap-styles"> <h1>use bootstrap</h1> </div> </div> In this example, Twitter Bootstrap would normal style both h1 s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.