less

Getting to grips with LESS here but one thing is still a little unclear. Lets say I have multiple color themes for my website, controlled by a class on the body tag. From this I can redefine the various colors for each element within each theme. Easy enough but fairly time consuming if I have a lot of elements to change... and a lot of themes. Every time I add a new theme I need to write out all the selectors again, with different color values. I am basing my working so far on another post I found: LESS.css variable depending on class ... However it still seems overly complicated for what I

I am using less and Grunt, and am moving to gulp. My less works. When I run: lessc public/less/myapp.less I get working output with no errors. All my less, including includes, is in public/less , BTW. Here is my gulpfile: var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); gulp.task('compileLess', function () { gulp .src('./public/less/*') .pipe(less({ paths: ['./public/less'], // Search paths for imports filename: 'myapp.less' })) .pipe(gulp.dest('./public/css')); }); // The default task (called when you run `gulp`) gulp.task('default',

I have set up a virtual application on my localmachine and it is running but it's not loading the CSS file. And I am using the lessCSS for styling my application and I think the reason here for not loading the css here is that LESSCSS style sheet uses .less extension. So what to do in order to read *.less file extension? There is no need to add a handler. Just add a MIME type (now known as Internet Media Type) for .less and set the MIME type to text/css . Web servers see the extension of requests (just like extensions of files). If they know the extension, they serve the file, and add an HTTP

Twitter bootstrap documentation talks about three mixins to generate grid systems: .container-fixed(); #grid > .core(); #grid > .fluid(); I know how to setup the page to use bootstrap and less... But I don't know how to use the grid system semantically. The documentation says what mixins to use but not how... ¿ Could anyone ilustrate how to use them in order to create semantic grids ? Just to figure out or to see how it works :S Thank you !! In navbar.less of bootstrap you will find the following. grid and .core are used to namespace the .span() .navbar-fixed-top .container, .navbar-fixed

一、介绍 Less （Leaner Style Sheets 简洁的样式表） 是一门向后兼容的 CSS 预处理语言 ，它扩展了CSS 语言。 less is more. 几种 css 预处理语言的诞生先后顺序： Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。 Less 诞生于 2009 年， 受 Sass 的影响 创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。 二、安装 & 使用 1、在 Node.js 环境 ： npm install -g less > lessc styles.less styles.css 2、在浏览器环境 ： <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ><

I'm relatively new to both bootstrap and less and this is a test run. The goal is to take the bootstrap classes and turn them into simple and semantic classes using less. I keep getting error messages saying that .col-sm-12 and .col-md-8 are undefined. How do I do resolve this issue. /*less styles file*/ @import "bootstrap.min.css"; @boom: #ea7000; @screen-sm: ~"(min-width:768px)"; @screen-md: ~"(min-width:992px)"; @screen-lg: ~"(min-width:1200px)"; .tim { height: 200px; @media screen, @screen-sm { background-color: black; .col-sm-12; } @media screen, @screen-md{ background-color: @boom; .col

为什么要预处理器 css层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，它不具备任何语法支持，它主要缺陷如下： 语法不够强大，比如：无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。 什么是CSS预处理器 CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。 CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。 常用的CSS预处理器 SASS 基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习

I wanted to use twitter bootstrap CSS only in a specific element in my web page. I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved @import outside #my_div then I got all css definitions for twitter boostrap. #my_div { @import "../twitter_bootstrap/lib/bootstrap.less"; } How can I namespace a less css file? Nucleon I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users. Edit bootstrap.css / bootstrap-responsive