less

Generation CSS group via less

由 孤街浪徒 提交于 2019-12-07 04:30:36
问题 Is it able to create such a mixin which generate CSS group? I will explain what I mean below: .fancymixin(@max, @prefix) { //content what I don't know how to code } .fancymixin(10, x); It generates something like: .x10, .x9, .x8, .x7, .x6, .x5, .x4, .x3, .x2, .x1 { //some fancy style I want to set } 回答1: You can use a loop (created using a guarded mixin) with one base class like below. The base class has the common properties and can be extended as many times from within the loop as required.

Use Node.js as standalone LESS-compiler in project?

由 白昼怎懂夜的黑 提交于 2019-12-07 04:02:43
问题 I've been trying to incorporate the lessc compiler in a large project that has the basic setup from Bootstrap and it only results in various compileerrors (for which there are tickets for everyone with different solutions). Not one solution give me what I want, which is a way to compile the less-pile through the command line. I compile various other assets through node.js and hoped to do the same thing with the less, but every googlepage I find on the subject is Node.js+Express which is not

How do I create nested loops with LESS CSS?

由 半城伤御伤魂 提交于 2019-12-07 03:11:33
问题 What I know is that this: @iterations: 8; .mixin-loop (@index) when (@index > 0) { .my-class-@{index} { width: (100% / @index); } .mixin-loop(@index - 1); } .mixin-loop (0) {} .mixin-loop(@iterations); … Will result in this: .my-class-8{width:12.5%} .my-class-7{width:14.285714285714286%} .my-class-6{width:16.666666666666668%} .my-class-5{width:20%} .my-class-4{width:25%} .my-class-3{width:33.333333333333336%} .my-class-2{width:50%} .my-class-1{width:100%} … Making it the LESS equivalent of:

CSS rule for classes with number greater than

由 て烟熏妆下的殇ゞ 提交于 2019-12-07 01:26:19
问题 My stylesheet looks like this: .thing-1 { background-image: url('top.png'); } .thing-2 { background-image: url('top.png'); } .thing-3 { background-image: url('top.png'); } /* etc... */ Followed by this: .thing-20 { background-image: url('bottom.png'); } .thing-21 { background-image: url('bottom.png'); } .thing-22 { background-image: url('bottom.png'); } /* etc... */ I am looking for a way to simplify my stylesheet with LESS or something similar. Here's what I'd like to do: .thing-[i < 15] {

Refresh less css which has other imported less files without page load

由 家住魔仙堡 提交于 2019-12-07 00:15:19
I want to use watch mode in my development environment. It works fine with single less file. But I have so many less files which are imported to app.less. My app.less looks @import "variables"; @import "mixins"; It seems I can not use watch mode in this setting. Is there any other ways? bullgare I'm totally agree with this comment Refresh less css which has other imported less files without page load . Thanks, thevasya. But there's no need to start several terminals. watch: { less: { files: ['less/*.less'], tasks: 'less' }, reload: { files: ['*.html', 'css/app.css', 'js/*.js'], tasks: 'reload'

Webpack, less-loader - Unexpected token - Why?

由 為{幸葍}努か 提交于 2019-12-06 21:44:28
问题 I'm using Webpack (in a Windows environment) and I'm trying to use less-loader and extract-text-webpack-plugin to generate a css file. I have less , webpack-core and webpack also in my node_modules folder. In my app I use: require('./index.less'); My Webpack config: const path = require('path'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: [ './app/index.jsx' ], output: { path: path.join(__dirname, '/public'), filename: "js/app.js" }, module: {

Intellij indents 4 spaces when I have configured it to do 2 spaces (LESS)

由 你说的曾经没有我的故事 提交于 2019-12-06 18:56:06
问题 On Intellij IDEA 14, I have tried to set my preferences in Editor > Code Style > LESS to do 2 space indents but no matter what I do, my code ends up getting formatted with 4 space indents. How do I get it to do 2 space indents for LESS? 回答1: If your project has an ".editorconfig" file, IntelliJ 14 uses that by default (which overwrites your settings). If you absolutely do not wish to use these settings, you need to disable the editorconfig plugin. 回答2: Not as likely, but if you make a scratch

How can I instruct less to ignore math for certain styles?

由 ⅰ亾dé卋堺 提交于 2019-12-06 18:31:33
问题 I'm using the new calc function in CSS to get the width for an object, as in: width: calc(100% - 40px); Unfortunately, since this is in a LESS file, LESS is "helpfully" pre-converting this to 60% during compile time. I want less to ignore math when it's in a calc function since I need the browser to do this calculation, not less. Is there anyway I can make LESS ignore this calculation so I can pass it straight to the browser? 回答1: Use it through an escaped string: width: ~"calc(100% - 40px)";

Get less variables list using less.js

由 本小妞迷上赌 提交于 2019-12-06 17:01:11
问题 I'm using client-side less.js. Is there a way to get all variables from my less file. I know how to modify variables: less.modifyVars({ "@var": "#fff" }); But I want to get all of them, like (don't work): var variables = less.getVars(); 回答1: This is going to be an unconventional answer as it seems that this data isn't publicly exposed as part of the browser facing API. tl;dr Save a local copy of the less.js file. Add this function definition somewhere function exposeVars(root) { var r=root.

What is the equivalent of LESS's “import (reference) 'style'” in SASS

由 爷，独闯天下 提交于 2019-12-06 16:47:53
问题 In addition to application.css.scss, I have multiple partials like homepage.css.scss. At the moment I have to add @import 'bootstrap' to each one of them in order to use bootstrap variables and mixins. Let's say I want to change my default links colour to red, I'd add that to application.css.scss. But the links in homepage.css.scss will not be red because the bootstrap import will override it with blue. In LESS, I can do @import (reference) "bootstrap", how can I do that in SASS? 回答1: The
订阅 less