less | 易学教程

How to generate CSS with loop in less

阅读更多关于 How to generate CSS with loop in less

问题 I am not familiar with Less . In my understanding, I think Less can transform the less format file to standard css file(if I am wrong, please correct me). Now I have a question below. Say you would generate 100 CSS classes like below(from .span1 to .span100 ) in a single CSS file. I want to know whether less can generate a CSS file like it? ... .span5 { width: 5%; } .span4 { width: 4%; } .span3 { width: 3%; } .span2 { width: 2%; } .span1 { width: 1%; } 回答1: Try this if you are using the

less 动态样式语言

阅读更多关于 less 动态样式语言

1.less的介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 2.less需要编译才能被浏览器解析浏览器本身只能解析css文件，对于less无法解析。要么对less进行编译，让他在node环境下转换成对应的css文件。要么引入less后再引用对应的js文件 <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script> 3.安装node环境 less的编译依赖node环境，请先安装node.js 安装完毕后在cmd下输入：node -v 这个命令用来查询node的版本，查询到版本号则表示安装成功 4.安装less编译程序在cmd环境下运行 npm install -g less 5.手动编译less文件在要编译的less文件目录下打开cmd窗口，输入以下命令即可执行编译 lessc test.less test.css 即可将此目录下的test.less编译成test.css文件 6.less变量的定义与使用 /*定义变量*/ @gbColor:red; .box{ width:

Add syntax highlighting to .less-files in NetBeans

阅读更多关于 Add syntax highlighting to .less-files in NetBeans

I want to have files with a .less extension use the CSS syntax highlighting in NetBeans, and I don't have any clue how to do this. I found a rather time consuming way to do this ( http://netbeans.dzone.com/tips/quickstart-guide-language-supp ), but it hit me that it must be easier way to do this. Anyone knows? a module which adds full less highlighting support can be downloaded from the following page: http://plugins.netbeans.org/plugin/32782/lesscss-module i tested the module with netbeans 7.0 and it worked flawless. You just have to add a new file type in Netbeans > Tools > Options >

Refactoring and removing unused CSS from SASS/LESS files

阅读更多关于 Refactoring and removing unused CSS from SASS/LESS files

I am working on a big single page application [backbonejs and rails] which has LESS as the CSS preprocessor and the generated .css files has grown to such an extent that for IE we have to split it into 3 files with http://blesscss.com/ Though there are tools to detect unused css and linting css, I am unable to find a proper solution for refactoring LESS/SASS files directly from uncompiled files instead of a single large generated .css file. Would like to know what is the best approach doing these tasks? Thanks in advance ! For finding and remove unused CSS use Uncss which has implementation as

Would it be a bad practice to use less.js in a production site (client-side javascript compliler for LESS style-sheets)?

阅读更多关于 Would it be a bad practice to use less.js in a production site (client-side javascript compliler for LESS style-sheets)?

问题 This script basically turns .less code into .css code. I think it will only cause problems if the user has javascript turned off, but do many people do that? Any suggestions? 回答1: Just compile the .less into .css before putting it into a production environment. That way it will still display to those without JS enabled, and won't suffer the issues @Plynx mentioned. As for compiling, there are some real-time compilers out there, specifically: For Mac - less.app For Windows - Less Parser Both

Compile less files with grunt-contrib-less won't work

阅读更多关于 Compile less files with grunt-contrib-less won't work

I'm using Grunt for building my web project. I installed grunt-contrib-less package und added a task to my grunt.initConfig({..}); less : { options: { paths: ['js/base'] }, files: { 'js/base/*.css' : 'js/base/*.less' } } when I run the target less via grunt less , it runs without errors but doesn't compile the less file to a css file. Running "less:files" (less) task Done, without errors. I have installed the lessc package via node, too. Doing lessc <source> <dest> works fine. Currently I have pointed with the files option directly to one dir which contains one less file for testing. Even if I

Bootstrap: How to add dropdown.less?

阅读更多关于 Bootstrap: How to add dropdown.less?

问题 I need to add a calendar into a form. I want to install this project: https://github.com/vitalets/bootstrap-datepicker But it is said that: Requires bootstrap’s dropdown component (dropdowns.less) for some styles, and bootstrap’s sprites (sprites.less and associated images) for arrows. How can i add that files to my app? Thank you very much! 回答1: You have to download and include the following assets. CSS http://getbootstrap.com/2.3.2/assets/css/bootstrap.css http://getbootstrap.com/2.3.2

How to pass a variable from PHP to LESS?

阅读更多关于 How to pass a variable from PHP to LESS?

问题 I use PHP (lessphp) to compile LESS files into CSS files on the serverside. I would like to pass a variable to the LESS file, like a color or a language: compile('input.less?lang=en') and use it as a variable in LESS like @lang. Is this possible? If not, are there any workarounds? 回答1: This is a built in feature of lessphp, here's the documentation: http://leafo.net/lessphp/docs/#setting_variables_from_php 回答2: I don't know less or lessphp so this may not be helpful and you may have already

.LESS together with Razor

阅读更多关于 .LESS together with Razor

Is it possible to use Razor View Engine (ASP.NET MVC) together with .LESS (similar to SASS - http://lesscss.org/ for .NET), since they're both using "@blah"? What I want to achieve is to create .LESS css files, mixed with Razor. UPDATED: Sorry for being a bit unspecific. What I want to do is to use Razor View Engine WITHIN the .less (dotlesscss) css files. This would be nice in order to e.g. pass site-settings like Theme customized from an admin into the css file. Problem is that the syntax will crash. An alternative is to use C# or some other View Engine instead. You should consider using

Using Grunt grunt-contrib-less) for compiling Bootstrap 3.1 LESS in Visual Studio 2013

阅读更多关于 Using Grunt grunt-contrib-less) for compiling Bootstrap 3.1 LESS in Visual Studio 2013

I used the following as pre-build event in Visual Studio 2013 to compile Bootstrap 3.0 with recess according to this answer and it worked recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css" Now this doesn't work for Bootstrap 3.1.1 and they say Grunt will do it. I've tried: grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css" But can't get it to work. Any ideas how to get Grunt to work with VS 2013. Note: I've Installed Node.js and recess earlier, then > npm