less

I think this is not possible, but I thought I ask in case there is a way. The idea is that I have a variable for path to web resource folder: @root: "../img/"; @file: "test.css"; @url: @root@file; .px { background-image: url(@url); } I get this as a result: .px { background-image: url("../img/" "test.css"); } But, I want the strings to combine into one string like this: .px { background-image: url("../img/test.css"); } Is it possible to concatenate strings together in Less? Paulpro Use Variable Interpolation : @url: "@{root}@{file}"; Full code: @root: "../img/"; @file: "test.css"; @url: "@

SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins). Does LESS have this feature as well? jonschlinkert Yes, Less.js introduced extend in v1.4.0 . :extend() Rather than implementing the at-rule ( @extend ) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS's implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work: .sidenav:extend(.nav) {...} or .sidenav { &:extend(.nav); ... }

How do I extend a Less class which is dynamically formed using & combinator? Less which generates expected output: .hello-world { color: red; } .foo { &:extend(.hello-world); font-size: 20px; } Expected CSS output: .hello-world, .foo { color: red; } .foo { font-size: 20px; } Less does not generate expected output: .hello { &-world { color: red; } } .foo { &:extend(.hello-world); font-size: 20px; } Unexpected CSS output: .hello-world { color: red; } .foo { font-size: 20px; } Extending a dynamically formed selector (loosely using the term) like that is currently not possible in Less. There is an

Less uses the & Operator to enhance the possibilities for nesting . .header { color: black; .navigation { font-size: 12px; &.class { text-decoration: none } } } which causes a substitution of the & with the parent selector and results in a concatentation of the actual selector right to the parent selector: .header .navigation.class instead of the normal appending, which would result in .class being a decendant: .header .navigation .class . Now what also is possible is the following ( see also here ): .header { color: black; .navigation { font-size: 12px; #some-id & .foo { text-decoration: none

首先，需要保证电脑安装过Node.js ，下载地址： https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后，安装lessc模块 打开cmd控制台 输入下面一行npm命令，安装less模块：-g是全局安装，如果不加会安装在当前目录。 npm install less -g 安装less-plugin-clean-css插件 （less的插件，用于压缩代码） npm install less-plugin-clean-css -g PHPStorm 点击File>Settings>Tools>File Watcher 添加less自动编译参数 PhpStrom会自动识别lessc.cmd文件，如果不能识别，手动找到npm目录的lessc.cmd文件即可，我这里添加的--clean-css参数会自动代码压缩，也可以不加，就不会自动压缩代码了。 这样在项目里编辑less文件时，会自动时时生成css文件了 效果如下： 来源： https://www.cnblogs.com/zcpblog/p/11346123.html