less

Less, multiple imports

由 六月ゝ 毕业季﹏ 提交于 2019-12-08 08:53:51
问题 I thought within Less you could do imports at the rule level? e.g. given two Less files with identical variable names but different values @import (reference) 'file1.less' .myrule1 { @import (reference) 'file2.less' // use varA from file2 } .myrule2 { // use varA from file1 } Is this not allowed, it doesn't seem to be in the latest Less version Failing that can you do this @import (reference) 'file2.less' .myrule1 { // use varA from file2 } @import (reference) 'file1.less' .myrule2 { // use

Mixin using LESS

由 孤街浪徒 提交于 2019-12-08 08:52:36
问题 I'm reading the LESS official documentation (version 1.5) but I cannot understand how to import a reference to another CSS in order to use its content in my own file. For example: mystyle.less @import (reference) "bootstrap.min.css"; .mylabel { .label-success; } It shows this error: NameError: .label-success is undefined Perhaps I misunderstand the documentation? 回答1: You can only use reference with other LESS files. You cannot mix and match LESS and CSS files with that method. If you need to

Is there any (good) way to extend a class within a mixin, and then use that mixin within a media query, using Less?

由 送分小仙女□ 提交于 2019-12-08 07:39:26
问题 I've been working on building out some Less files to help speed up my CSS workflow, and also to help produce more efficient, cleaner CSS. The way I see it: Mixins are a great way to help speed up the workflow, but they have the drawback of potentially making the outputted CSS longer than necessary . Extending classes is the ideal solution for ensuring the amount of duplicate style declarations is minimized, helping clean that up... So, to help balance things out I wrote out a set of standard,

LESS mixins with multiple arguments

由 那年仲夏 提交于 2019-12-08 07:37:25
问题 I have this little mixin set up: .linear-gradient(@direction:top, @color1:#fff, @color2:#000) { background-image: -webkit-linear-gradient(@direction, @color1, @color2); } Then, in my main.less I'm trying something like this: a { .linear-gradient(top, #999, #666); } That works fine, by say I want to do something like this: a { .linear-gradient(top, , #666); } Now, the first color should default to its default mixin color. How do I do this? Is this even possible 回答1: Less isn't quite that

PhpStorm: group/nest *.map files under source LESS (along with *.css files)

由 被刻印的时光 ゝ 提交于 2019-12-08 07:24:24
问题 Currently PhpStorm nests the generated *.css file under the *.less file when the file watcher is configured. Is there any way to get the *.map file under there as well? Example: Is it one of these settings in the less.jar > plugin.xml file? <idea-plugin version="2"> <name>LESS support</name> <id>org.jetbrains.plugins.less</id> <category>HTML/JavaScript Development</category> <vendor>JetBrains</vendor> <description> <![CDATA[ This plugin supports <a href="http://lesscss.org/">LESS</a> dialect

Angular CLI 'ng serve' to ignore less and use available css

由 谁都会走 提交于 2019-12-08 05:42:05
问题 I am using Angular CLI for Angular2 project. And I am using less for my styling. To compile less file with Angular CLI, I have to import less file with its absolute path. Which breaks editor's intellisense. So instead of using LESSPlugin comes with AngularCLI, I want to use IDE's less watcher and compiler (available in vs code as well as webstorme) to compile less to css. But there are less files still exists in source, 'ng serve' try to compile less and that breaks the build. Is there any

how to protect embedded div style not to be overridden by website style

由 两盒软妹~` 提交于 2019-12-08 05:22:33
问题 I have div with its own style. I embedded this div on other website. <div id="scoped-div"> <style> label { color: green; } </style> <label> Scoped div </label> </div> But I face problem, my div style is overridden by website style. I don't want to use iframe . Except for the use of iframe is there any other way to protect my div style by external style changes? 回答1: Your request is exactly what Shadow DOM makes possible: attach a Shadow DOM to the element you want to protect (here: #scope-div

LESS: concatenate multiple background rules

由 Deadly 提交于 2019-12-08 04:44:52
问题 I have a mixin that creates a gradient with vendors' prefixes, and I would like to add this background to a DIV in addition to another background-image . .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background:@start-color; background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); background-image+: linear

Problems generating source map files with current Gulp setup

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-08 04:40:29
I have set up a gulpfile.js in my project. It's working pretty nicely mostly, except when it comes to generating source maps, especially for the LESS files it compiles to CSS . I have put together a gist which contains all the files in my gulp setup. Please note that other than the gulp file.js itself, all the other files are inside a directory called tasks . The problems I am having are that I had to disable the autoprefixer in development because the source maps that were being generated were invalid as the autoprefixer modified the original CSS file after the source maps were generated. To

Paths to images not generated correctly when importing .less files using Web Essentials

由 我是研究僧i 提交于 2019-12-08 04:35:33
问题 An issue I'm having with Web Essentials is that the paths to my images seems to be generated incorrectly. For example, when I have this structure: /css main.less /* imports _sub.less */ main.css /* generated */ /css/subfolder _sub.less and _sub.less contains a reference to an images with '../img/some/folder/myimage.jpg' , it gets prefixed by the subfolder in the generated css file. Resulting in 'css/subfolder/../img/some/folder/myimage.jpg' . That is incorrect because ../img does not exist
订阅 less