less | 易学教程

Less CSS Extend and media queries

阅读更多关于 Less CSS Extend and media queries

问题 I have a few Less utilities that I've used as extends - here's a typical scenario. .clearfix { &:before, &:after { content:""; display:table; } &:after { clear:both; } } However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios. What I would like to do is to declare the code once and reuse it. I came up with this pattern which works and allows me to use the utility inside media queries, or wherever it suits. The question is I am doing it wrong

LESS building a string in a loop for dynamic gradient

阅读更多关于 LESS building a string in a loop for dynamic gradient

问题 So here's what I'm trying to do. I want to be able to send in a few different colors and percentages, as a dynamic length list, to a LESS loop, to create a gradient. At the same time, I'd also like to prepend browser prefixes. The reason for this request is because I'm using CSS gradients in place of graphics for speed and minimizing requests. Here's how I'm doing it now, but I'd like a better, more flexible solution: .mkgrad(@gclrs, @gdir) { @m:length(@list); .looppref(@m, @j: 1) when (@j =<

Compile LESS files with source maps

阅读更多关于 Compile LESS files with source maps

How can I compile a LESS file to output a source map file ( .css.map ) in addition to a CSS file? Is there a way to do it on both command line (NodeJS's lessc ) and on any GUI-based programs? Update: New shortest answer The docs have been updated! As new features hit LESS, sometimes the docs lag behind a bit, so if you're looking for bleeding-edge features, you're still probably better off running lessc (see longer answer) and checking what pops out of the help text. http://lesscss.org/usage/ Short answer You're looking for any number of the following options from the command line: --source

LESS - set variables on the client side

阅读更多关于 LESS - set variables on the client side

问题 I have created a LESS (http://lesscss.org/) version of a simple css grid solution (http://simplegrid.info/. Now I can happily roll my own grid sizes with the server script from LESS (lessc). That's working for me. For demo purposes I would like to create a HTML page, where I can put the size of the css grid in a textbox and the the grid would change dynamically. Beginning of the demo is here: http://jsfiddle.net/8QHNc/ So instead of changing @layoutwidth: 720px; in the <style rel="stylesheet"

Missing Font-Awesome.less variables in my .less file after importing

阅读更多关于 Missing Font-Awesome.less variables in my .less file after importing

问题 I got an interesting parse error in my project. I use Font Awesome and I imported it into my app.less file. (I use the official less.js client-side compiler.) @import "@{assets}/font-awesome/less/font-awesome.less"; When I use the .fa class in my HTML it works good so it compiled into css, BUT when I use the less variables in my own less file like this... .icon-chevron-up, .icon-chevron-down{ .@{fa-css-prefix}; // or .fa } ...the parser halted with a... ParseError: Unrecognised input in app

预处理器Less和Sass

阅读更多关于预处理器Less和Sass

什么是CSS预处理器使用一种专门的编程语言，对web样式进行编码，然后再编译成正常的css文件，他对css进行扩展，比css多出来很多功能，比如变量、嵌套、混合、继承等。 less语法（1）变量 less允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。 @color: #4D926F; #header { color: @color; } h2 { color: @color; } （2）Mixins（混入）代码复用很多动态语言都支持Mixins特性，它是多重继承的一种实现，在less中，混入是指在一个class中引入另外一个已经定义的class，就像在当前class中增加一个属性一样。 less文件 //定义一个样式选择器 .roundCorners(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } //在另外的样式选择器中使用 #header{ .roundCorners; } #footer{ .roundCorners(10px); } 经过编译生成的css文件 #header { -moz-border-radius:5px; -webkit-border-radius:5px;

Simplifying Repetitive LESS

阅读更多关于 Simplifying Repetitive LESS

问题 I am creating a themeing system for a WordPress network that supports multiple layout themes that can support color schemes for a variety of universities. To do so, I periodically compile a LESS file (using lessphp) with school-specific variables and essentially use it as a library of helper classes in the themes. Each school has 3 colors defined in LESS as: @primary , @secondary and @tertiary . The method is straightforward and functional but requites a lot of repetition in the code. For

less免编译语法

阅读更多关于 less免编译语法

less免编译语法（笔记） less中有些可以无需编译部分，可让浏览器完成部分语法： ~“免编译部分” 例子 less代码 .footer{ width:~"cacl(100px+100)"; height:cacl(100px+100); } 生成的css代码 .footer { width: cacl(100px+100); height: cacl(200px); } 来源： CSDN 作者： HHH 917 链接： https://blog.csdn.net/weixin_43245095/article/details/89164227

Can't get less.js to work

阅读更多关于 Can't get less.js to work

I can't get less.js to work and I have no idea why. Heres the HTML i tried: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" />  <link rel="stylesheet/less" href="main.less" />   <script src="less-1.0.18.min.js" type="text/javascript"></script> </head> <body> <p> Lorum ipsum </p> </body> </html> And heres main.less: p { color: blue; } The less-1.0.18.min.js file is downloaded from http://lesscss.googlecode.com/files/less-1.0.18.min.js . All files is in the same

Less mixin with optional parameters

阅读更多关于 Less mixin with optional parameters

I have a Less mixin defined as: .fontStyle(@family, @size, @weight: normal, @style: normal, @color: #ffffff, @letter-spacing: normal) { font-family: @family; font-size: @size; color: @color; font-weight: @weight; font-style: @style; letter-spacing: @letter-spacing; } How can I define usage like: .fontStyle('NimbusSansNovCon-Reg', 12px, , , , 0.1em); I.E. use the defaults for @weight , @style , @color To supply a parameter that far down the string of arguments, you have to also supply the expected variable it is to define. So this: .fontStyle('NimbusSansNovCon-Reg', 12px, @letter-spacing: 0.1em