less | 易学教程

LESS call a mixin dynamically

阅读更多关于 LESS call a mixin dynamically

问题 How do you call a mixin dynamically? A use case might be to generate a style guide: // The mixin which should be called .typography-xs(){ font-family: Arial; font-size: 16px; line-height: 22px; } // The mixin which tries to call typography-xs .typography-demo(@typographyName, @mixinName) { @{typographyName} { &:before{content: '@{typographyName}';} // Calling the mixin dynamically @mixinName(); } } // Example call of .typograhpy-demo .typography-demo(xs, typography-xs); Is such a dynamic call

Execute “less” from command-line PHP w/ Scrolling

阅读更多关于 Execute “less” from command-line PHP w/ Scrolling

问题 I want to execute less and similar programs from the command-line in PHP. I have tried the usual suspects (exec, shell_exec, passthru, etc), and while many of them can dump the file to the screen, the process is terminated before I can make use of it. If I wanted cat , I'd use it. How do I execute a program in this fashion? 回答1: You could use proc_open to feed input to and get output back from a process via pipes. However, it doesn't seem like less allows for user interaction via pipes as it

Less2css error 终极解决方案

阅读更多关于 Less2css error 终极解决方案

使用sublime Text3 的时候，安装less2Css后，和很多人一样以为大功告成，开始要运行编译less文件，结果开始发现　　　　于是乎开始搜索问题和解决方案，然后就有了下面的解决方案1 　　方案1：通过window path + less.js-windows 的方式（网上可以快速找到这种解决的方式）　　注意： window 操作系统下，经常会看到编译less的最后，会弹出一个"for install see less-plugin-clean-css"的error,好像所有的window操作系统都会这样（至少window7和window8.1是这样），原因是因为压缩css的时候出现了问题，如果我们把less2css的参数改下，就可以让这个error错误提示不显示！如下图　　生活总是很蛋疼的，有些时候总是不能do one,run angwhere,你懂的。在window下有时候竟然方案一不能实行，所以才会有方案二的衍生，因为办法总比问题多！当时通过自己测试后发现这个方法简洁方便！　　方案2：node+npm 全局安装 less 轻松解决问题　　　　 1.npm install less -g：全局安装less（请确保你已经安装好了node.js+npm环境）　　　　 2.检测less是否被全局安装(注意前后的区别) 　　　　3.编译less文件来源

Less2css error 终极解决方案

阅读更多关于 Less2css error 终极解决方案

How do I get Twitter Bootstrap's Less files to work with Sinatra AssetPack?

阅读更多关于 How do I get Twitter Bootstrap's Less files to work with Sinatra AssetPack?

问题 I am trying to get Bootstrap's Less files working with Sinatra AssetPack, but I am getting Less parser errors. These errors lead me believe that the less files being imported through bootstrap.less are not aware of each other. I have an app.rb file: require 'sinatra/base' require 'sinatra/assetpack' class App < Sinatra::Base set :root, File.dirname(__FILE__) register Sinatra::AssetPack assets do css :bootstrap, [ '/css/bootstrap.css' ] end get '/' do erb :index end # start the server if ruby

How to space vertically stacked buttons in Bootstrap 3

阅读更多关于 How to space vertically stacked buttons in Bootstrap 3

问题 I want to have 3 buttons across a row in Bootstrap 3, but when it changes to the xs grid, stack them vertically. I'd like to introduce some spacing (margin) between the buttons - but only when the buttons are stacked vertically. Can I do this in LESS? <div class="row"> <div class="col-sm-4 btn-vert-block"> <span> <button type="button" class="btn btn-primary btn-block">Go Back</button> </span> </div> <div class="col-sm-4 btn-vert-block"> <span> <button type="button" class="btn btn-primary btn

Extract item from css LESS list by name

阅读更多关于 Extract item from css LESS list by name

问题 If I have a list in less like: @colors: 'red' #f00, 'green' #0f0, 'blue' #00f; I know that I can loop over the list and get the colors, but what if I want to get a specific one? Say I want to do extract(@colors, 'green') to get #0f0 out of the list. Is there a way to do this? If it takes a few steps instead of 1 that is fine, I am just curious if it is possible. The documentation only mentions getting an item from a list by index. http://lesscss.org/functions/#list-functions-extract 回答1: The

Can't compile nested less files with Web Compiler 2015

阅读更多关于 Can't compile nested less files with Web Compiler 2015

问题 well, I was quite surprised when installing Web Essentials 2015 for Visual Studio 2015 that it didn't include a less compiler anymore: "Web Essentials 2015 no longer contains features for bundling and minifying of JS, CSS and HTML files as well as compiling LESS". Everything worked fine before with Visual Studio 2013. So I downloaded Web Compiler 2015, as it is the new compiler from Mads Kristensen. But, after adding all the needed files to be compiled to the compilerconfig.json, I have an

What is the equivalent of command “Compass watch” for LESS CSS pre-processor?

阅读更多关于 What is the equivalent of command “Compass watch” for LESS CSS pre-processor?

问题 I was using SASS as CSS pre-processor for Drupal theme. Where in the command line if I use $ compass watch . It keep on watching the change in .scss file and apply to .css file. Just I am trying Bootstrap theme and there I am using LESS CSS pre-processor, Where I have to use $ lessc less/style.less css/style.css every time to apply change. What is the equivalent of $ compass watch for LESS. 回答1: You need to install less-watch-compiler: npm install -g less-watch-compiler Make sure you

Is it faster to precompile less?

阅读更多关于 Is it faster to precompile less?

问题 So I am wondering whether it is better for me as far as page speed, to precompile my less style sheets instead of using less.js. After testing this via google page speed, I noticed I actually went down a couple points after precompiling. As far as i know it should be less demanding on the user. But I guess I am wrong? Is there something else I should take into account? Minifying the css is also an option, but I don't think that will make a considerable difference. Thanks. 回答1: I think you