less

这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的比较 4、为什么选择使用Sass而不是Less？ 什么是Sass和Less？   Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？   CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。   转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。 为什么要使用CSS预处理器？   作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。 CSS有具体以下几个缺点：   语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；   没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。   这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。   但是

I can replace this code with <div class="row"> <div class="span10">...</div> <div class="span2">...</div> </div> With this, to make it more semantic <div class="article"> <div class="main-section">...</div> <div class="aside">...</div> </div> <!-- Less stylesheet --> .article { .makeRow(); .main-section { .makeColumn(10); } .aside { .makeColumn(2); } } How can I do this with the fluid grid though: <div class="row-fluid"> <div class="span10">...</div> <div class="span2">...</div> </div> <!-- Less stylesheet --> .article { ??? .main-section { .makeColumn(10); } .aside { .makeColumn(2); } } I

index.less @import "common"; body{ min-width: 320px; width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; background-color: #F7F7F7; } *{ box-sizing: border-box; text-align: center; } img{ display: block; } a{ text-decoration: none; } @bounce:50; /* 顶部搜索框 */ .top{ position: relative; overflow: hidden; &::before{ content: ""; position: absolute; height: 2000rem / @bounce; width: 2000rem / @bounce; border-radius: 2000rem / @bounce; z-index: -1; background: linear-gradient(to right,rgb(255, 220, 220),rgba(255, 0, 0, 0.658)); left: -86.5%; top: -1600rem /

I use LESS , and I would like to take advantage by various integrated color functions that allow to set only few basic colors, and then derive others changing Hue, Saturation, Lightness, Spin, ecc. Let's imagine that we have the following 2 colors (a light-green and a dark-green in this example) in my colorizer: @primary-color: rgb(0,100,60); @secondary-color: rgb(185,215,50); I would like to explicitly set only @primary-color and then obtain @secondary-color after an appropriate HSL transformation. (for example darken(hsl(90, 80%, 50%), 20% ) ) Is there any way to determine what hsl setting I

I like the sizes of all items using twitter bootstrap when (in my browser) I've zoomed out twice, ctrl -, ctrl -, rather than the default, viewing with ctrl+0. Zooming affects font sizes, the responsive design, and a dozen of the other great reasons I want to use bootstrap, so I don't want to hackishly just fix a width and break all of that. Does Bootstrap have a single CSS value (or a small set of them) that I can change somewhere that produces something like this zoom and sizing? I realize setting zoom itself is more of a browser-issue, so I'd rather not hard-code it that way, either. EDIT

Is there a function in less.js to pass a string of less code and return css code? I'm hoping to make a live less editing environment, so the user could edit the less string and I can recompile it and display the css. I see there is a php solution: http://leafo.net/lessphp/ but would like to stay in js if it's a possibility. Thanks! You can instantiate the less.Parser. Looking at the browser.js source it actually turned out to be quite easy: var cssString = '@color: #FFFF00; body { color: @color; }'; new(less.Parser)().parse(cssString, function (e, tree) { var css = tree.toCSS(); alert(css); })

I've recently starting using LESS CSS - it's awesome (I recommend you check it out if you haven't yet). I'm working on a project, where I would like to do the following (It's not proper syntax, it's only to try and explain my problem): if(lightness(@background_color) <= 50%) { @secondary_color = #fff; } else { @secondary_color = #000; } I know that I can use mixins for this, but the above method would save me from having to write a mixins everytime I need to change a color based on the @background_color variable (since I will be using @secondary_color for borders, background colors, etc). I've