less

html功能: 1.gulp-htmlmin html文件的压缩的 2.gulp-file-include 公共头部的抽取 ——注意： 在我们的html里面 需要加上 @@include(抽取的代码块的文件路径) css功能 1.gulp-csso css压缩 2.gulp-less less的转换 js功能 1.gulp-uglify js的压缩 2.gulp-babel es6转成es5 任务构建 我们可以把多个任务放在一个任务队列里面 ，然后给这个任务队列去一个名字，那我们在执行命令的时候，只需要 执行 gulp default 按照我们任务列表里面的顺序，依次去执行里面的任务 来源： https://blog.csdn.net/qq_34987378/article/details/100674263

I have just installed Web Essentials 2012 for VS2012, but when I open a .less file, nothing is highlighted and the preview window doesn't display. Are there any settings or something I am missing to make this work? Web Essentials does not include Less tools anymore, you need to install the ASP.NET and Web Tools 2012.2 update to work with Less. A bit more details can be found on Web Essential's developer's blog. 来源： https://stackoverflow.com/questions/15323250/less-files-in-visual-studio-not-syntax-highlighted

I am trying to reuse a set of classes set inside a media query as mixins to use throughout a website instead of embedding un-semantic class names in html. Here is an example of my problem. @media (min-width: 1000px) { .foo{width:120px;} .foo-2{width:150px;} } @media (max-width: 999px) { .foo{width:110px;} .foo-2{width:120px;} } .bar{.foo;} .bar-2{.foo;} .bar-3{.foo-2;} the .bar-X will never get any styles applied. I can guess that this is happening because LESS doesn't create .bar-X inside media queries, so nothing will ever be applied. Is this a bug in LESS, or something I can never achieve?

前端写样式使用预处理语言开发，是最有效的和方便维护 下面解释下在 less 预处理样式开发中遇到的几个问题，以便后续开发参考 1 mixin & include & extend @mixin mixin 可以声明函数 并且会返回新的样式组合，相当于样式组合工具 可以声明多个重名的 mixin函数，参数可以不同，并且在调用的时候，会根据传入的参数个数匹配调用最合适的 mixin函数 mixin 中可以使用 @if 关键字按照条件返回合适的样式 mixin 语句可以声明函数或者变量，声明函数时，可以使用when关键字 .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } mixin 可以是已有的样式，使用方式可以加()或者不加 可以给 mixin 加 !important 相当于是作用在普通样式上 @include include 相当于函数的调用，或者是变量的引用，可以使用已有样式，或者使用mixin声明的样式函数返回的样式，样式只在当前作用域生效，且不影响其他样式产出结果。 @extend 有作用域，在 @media中使用，只会作用于当前 media，使用当前media内的样式 extend 相当于给当前样式的子样式 通常用在 & 父选择器，样式，id选择器的后面，作用是扩展子类样式 2

I'm working on converting Unsemantic from SASS to LESS and while I'm building the loop to create my classes: .populateGridClasses (@index, @interval) when (@index > 0) { @num: @index * @interval; (~".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}") { .grid(); } .populateGridClasses(@index - 1, @interval); } .populateGridClasses (0, @interval) {} // Create the grids in an inverval of 5 .populateGridClasses(20, 5); // Create the grids in thirds .populateGridClasses(3, 33); It creates the classes as so: .eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100 { -webkit-box-sizing:

I am trying to use gradient style for my buttons, but, I have a problem with hover style, Here is the button before hover: And here is after hover: Here is haml of button: = link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do %h3 Take a Tour LESS: .tour_btn { #gradient > .vertical(#F98C51, #a35b35); } Any idea please ? is it possible to specify another gradient style for hover state ? Or at least, not to change button when hover ? Twitter Bootstrap animates the background-position on hover with a transition (since background-gradients cant