less

总览 Less（代表Leaner样式表）是CSS的向后兼容语言扩展。这是Less（语言）和Less.js（将Less样式转换为CSS样式的JavaScript工具）的官方文档。 因为Less看起来就像CSS，所以学习起来很容易。Less不仅为CSS语言增加了一些方便的补充，这也是可以如此快速地学习它的原因之一。 有关较少语言功能的详细文档，请参阅功能。 有关少内置函数的列表，请参见函数 有关详细的使用说明，请参阅使用Less.js 有关Less的第三方工具，请参见工具 Less会为CSS增加什么？这是功能的快速概述。 变数 这些是不言自明的： @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } 输出： #header { width: 10px; height: 20px; } 了解有关变量的更多信息 混合蛋白 混合是一种将一组属性从一个规则集中包含（“混入”）到另一规则集中的方式。假设我们有以下课程： .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } 我们想在其他规则集中使用这些属性。好吧，我们只需要在需要属性的类的名称中输入，如下所示： #menu a { color

I am using PhpStorm 8 to work on some LESS files. variables.less gets imported from styles.less . When I save variables.less only a variables.css is being made. How do I configure the watcher to transpile only styles.less > styles.css and automatically upload styles.css ? Here's my current config: Current watcher config http://www.bilder-upload.eu/upload/e60eb3-1432718715.jpg You need to enable Track only root files option so that only main file will be compiled. If it does not work -- delete your existing watcher and create new one from scratch. Here is mine (as an example -- works fine for

I've pieced together this approach for generating vendor-prefixed properties and animations using LESS. First some factory functions: .vendorprefix (@property, @value) { -webkit-@{property}: @value; -moz-@{property}: @value; -ms-@{property}: @value; -o-@{property}: @value; @{property}: @value; } .keyframes(@name; @animation) { @animation(); @-webkit-keyframes @name { .frames(-webkit-) } @-moz-keyframes @name { .frames(-moz-) } @-o-keyframes @name { .frames(-o-) } @keyframes @name { .frames(~'') } } The '.vendorprefix' function can be used for general purpose properties including setting

I am looking at less.js, mixin looks like the way touching the variable in css but i am not sure if my problem is solvable using less.js. I want to make some class with parameter, e.g. with the format marginTop-10 or marginTop(15) 10,15 are some numbers which i can change to specify the margin top pixel, basically these numbers can be any number.and i will use these class in my paragraph class such as <p class="marginTop(some number)">css help</p> How can i make this happen? Bass Jobsen You should first write your Less file, for instance as follows: .marginTop(@topMargin) { margin-top:

I have the following snippet of Less: @Foo: 50px; .someClass { width: calc(~'(100% - @{Foo}' - 5px); } This works fine. However, if I change this to: @Foo: 50px; .someClass { width: calc(~'(100% - @{Foo}' + 5px); } We now have a ParseError . We're on a bit older version of Less, but I've tried it on the official Less preview site and it still breaks. Is this a bug or am I doing something silly? Harry This is a very interesting case. The below code compiles fine and produces the expected output when --strict-math setting is turned on ( --strict-math=on ). @Foo: 50px; .someClass { width: calc(e(

I'm working on a less project, but as is start to become a bit big, every time that i'm trying to compile i run out of memory. This is my current structure: style.less colors.less icons.less styles style1 style2 style3 Now, colors.less is a list of colors and their classes icons.less a list of icons and their classes style.less is the main file, where all is included and compiled styles is a folder containing all the difference for every different style my question (well, actually is more a suggestion than a question) is: how can i optimize this structure so that i don't run out of memory

There is a little SASS to LESS convergence here... Does anyone know what is the correct syntax for these? The code below is the pure SASS mixins I used to use. Thanks for helping @mixin linear-gradient($left, $right, $optional:false) { @if $optional and type_of($optional) == number { background: -webkit-linear-gradient($optional + deg, $left, $right); background: -o-linear-gradient($optional + deg, $left, $right); background: -moz-linear-gradient($optional + deg, $left, $right); background: linear-gradient($optional + deg, $left, $right); } @else { @if $optional == "right" { background: