less

1、CSS 　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML （ 标准通用标记语言 的一个应用）或 XML （标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 　　 .form-control-static { min-height: 34px; padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; } .form-control-static.input-lg, .form-control-static.input-sm { padding-right: 0; padding-left: 0; } .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } 　　 　　 爱思考的小伙伴肯定会发现css样式总是一大推一大堆的出现，无法合理的实现复用、运算。下面less成功的解决这个问题。 　　　　　 　　　　　　　　　　　　　　　

Less Sass styuls 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 官网 中文网 http://www.w3cplus.com/css/less 概要 为什么要有预处理CSS CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。 很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。 什么是预处理CSS CSS语言的超集，比CSS更丰满 CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强

认识webpack webpack是一个js模块打包工具，作用： 1.我们只需要将webpack进行模块化开发，然后通过webpack来处理模块间的依赖关系，不仅仅是js文件，我们的css，图片，json文件等等在webpack中都可以当成模块来开发 2.除了打包文件，webpack还可以对资源进行处理，比如：压缩图片，将scss转换成css，将ES6语法转换成ES5，将TypeScript转换成JavaScript 和grunt/gulpd的对比 grunt/gulp更加强调的是前端流程的自动化，模块化不是他的核心 webpack更加强调的是模块化开发管理，而文件压缩合并，预处理等功能，是他附带的功能 如果功能模块依赖简单，只需要简单的合并，压缩，就使用grunt/gulp即可，如果项目使用了模块化管理，而且相互依赖强，就使用webpack webpack的安装 首先，webpack依托于node环境 npm install @webpack3.6.0 -g （全局安装） cd到对应目录 npm install @webpack3.6.0 --save-dev （局部安装） 在终端直接执行webpack命令，使用的全局安装的webpack 在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack 准备工作 我们创建两个文件夹

I really enjoyed finding out you could create a media query variable that you can easily reuse and makes your code much more readable. @tablet: ~"(min-width: 768px) and (max-width: 980px)"; @media @tablet { ... } I want to know if it's possible to group a media query with a selector. It doesn't appear to work the way I've implemented it, but I thought I'd ask to see if it's even probable. @tablet: ~"(min-width: 768px) and (max-width: 980px)"; body { aside { ... } &.homepage, @media @tablet { aside { ... } } } I understand that media queries are different from run-of-the-mill selectors because

What I'm trying to do: I have (for now) 7 colors as variables. I want to be able to use them at several places and iterate throught them. This is what I have that don't work @color1:#06A1C0; @color2:#8F4F9F; @color3:#ED1D24; @color4:#5A9283; @color5:#B38C51; @color6:#EC008C; @color7:#8F4F9F; @iterations: 8; .mixin-loop (@index) when (@index > 0) { color@{index}:hover{ @tmp: ~'@color'; @num: @index; color: @tmp@num; } .mixin-loop(@index - 1); } .mixin-loop (0) {} .mixin-loop(@iterations); What I need I want this as a result .color1:hover{color#06A1Co} .color2:hover{color#8F4F9F} etc.. What's

I have the following LESS: .container { .column, .columns { .one& { width: 40px; } } } When I compile I'm getting the following for my CSS: .one.container .column, .one.container .columns { width: 40px; } But I expected to get: .container .one.column, .container .one.columns { width: 40px; } It appears the parent operator ( & ) in LESS is actually referencing what I'd expect to be the grandparent. Am I nesting things properly? The docs don't show any examples of nesting more than one level deep. Can I achieve my desired output with nesting? I'm using lessc 1.3.3 installed via npm. It's

Can I parse LESS client side, and return the results? I am currently using as recommended in documentation, which is to include less file, and minified less parser afterwards. I want to be able to return the raw css so I can save it as a css file. I do not want to install node.js and the likes, I want a client side solution. A look at the less.js source brings up the Parser object. Assuming that less.js is included in the page: var data = "@colour: red; #example { background-color: @colour; }", parser = new less.Parser({}); parser.parse(data, function (error, root) { // code that handles the

It seems that LESS' import strategy for URL doesn't account for relative paths the same as CSS does. test.less @import "sub/test.less"; div.a { background-image:url('imagea.jpg'); } sub/test.less div.b { background-image:url('imageb.jpg'); } output.css div.b { background-image:url('imageb.jpg'); } div.a { background-image:url('imagea.jpg'); } correct_output.css div.b { background-image:url('sub/imageb.jpg'); } div.a { background-image:url('imagea.jpg'); } Is there a way to get this behavior from LessJS or is this a bug in the implementation? This has been fixed here it seems. As detailed very

I'm using node.js and the "less" compiler middleware: app.configure(function() { // ... app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] })) // ... }) Now i've got a faulty .less -file, but I can't find any docs on how to get the error message. The page I receive is this: <html> <head> <title>[object Object]</title> <style> /* css stuff */ </style> </head> <body> <div id="wrapper"> <h1>Connect</h1> <h2><em>500</em> [object Object]</h2> <ul id="stacktrace"></ul> </div> </body> </html> So that's not helpful. Anybody got an idea? Ah, ok, got it. The trick is to leave away

LESS beginner. Wrote a test html below <head> <link rel="stylesheet" type="text/css" href="404.less"> <script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script> </head> <body>test</body> But got a warning in Chrome Resource interpreted as Script but transferred with MIME type text/x-c++: "http://lesscss.googlecode.com/files/less-1.3.0.min.js". Why? You probably want your link tag to say: <link rel="stylesheet/less" type="text/css" href="404.less"> That said, if this is being served from a webserver it could be that that's detecting the mime type wrong