less | 易学教程

LESS Declare variables using class names?

阅读更多关于 LESS Declare variables using class names?

问题 I have a button class that sets up padding etc for an element, followed by a class that defines a background colour. .button { padding: 0.5em 1em; text-transform: uppercase; color: #fff; &.green { background:@green; //declared previously } // ... more colours } Is it possible to declare the @green variable as the class name? This would save me having to copy/paste the &.green block for each colour I am wanting to use. I've not been able to find anything the docs regarding this sort of

Automatic update of generated css files via m2e

阅读更多关于 Automatic update of generated css files via m2e

I'm using the lesscss-maven-plugin to generate different css files to the target directory ( target\generated-sources ) and then use maven-war-plugin to add this directory as an webResouce. Those files will generate perfectly fine. However the m2e-plugin (version 1.0.0) won't copy those files in the according web-resources folder ( m2e-wtp\web-resources ), when they have changed . Only when I run a eclipse "maven/update project" changes will be updated. But I want the changes to take affect automatically, when the files have changed. Here is my pom configuration: <plugin> <groupId>org.eclipse

need spacing between divs using twitter bootstrap v3

阅读更多关于 need spacing between divs using twitter bootstrap v3

问题 Using twitter bootstrap v3 rc1. I have three .sub-content-block divs on my page, with .make-column(4); applied to each. I have tried adding .make-row; to a div that contains all three of the sub-content-block divs, and set it to .make-column(12) too, in hopes of having spacing between each div. As you can see in the screenshot, there is no spacing between each div, if I do not have a background color, it looks like there is some spacing, but thats more so padding than spacing. The gutter

Loops make Less to run out of memory. (Structure optimization)

阅读更多关于 Loops make Less to run out of memory. (Structure optimization)

问题 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

LESS @import: Passing paths to lessc

阅读更多关于 LESS @import: Passing paths to lessc

I'd like to use LESS stylesheets in a parent and child theme, in which most of the stylesheet information is specified by the parent and the child simply overrides a few files. This is possible with the Ruby version of LESS like so: var parser = new(less.Parser)({ paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less' // Specify a filename, for better error messages }); but is it possible with the command line compiler lessc ? I'd like to say: $ lessc --path=".;../parent" style.less Looking at the lessc source code: case 'include-path': options.paths =

Passing LESS variable to JavaScript

阅读更多关于 Passing LESS variable to JavaScript

I have a LESS file that has some variables: @font-size: 100%; @label-align: left; @field-width: 230px; @icon-size: 16px; @icon-padding: 8px; In my JS script I need to know the sum of some initial values the user has set in the LESS file. The computed css values might change according to parent container size. Those values also change on first load, depending on the window size. Some elements are also dynamically created so it makes it really hard to grab the correct initial values in JS because I would have to declare variables at different points in the code and in different scopes. One idea

Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

阅读更多关于 Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

问题 I add some code to mixins.less: img { &:extend(.img-responsive); } See also: Images not responsive by default in Twitter Bootstrap 3? and https://stackoverflow.com/a/15573240/1596547 When i run grunt dist from the command line i got: Running "recess:bootstrap" (recess) task >> Parser error in less/mixins.less >> 549. img { >> 550. &:extend(.img-responsive); >> 551. } Warning: Use --force to continue. Aborted due to warnings. But when i compile it with Lessc: lessc bootstrap.less i don't find

Repeat dots in LESS / SASS for Content property

阅读更多关于 Repeat dots in LESS / SASS for Content property

问题 Take a look at below CSS styles and i'm planning to use LESS & SASS for two different projects and is this possible in preprocessors . .longDots { content: " ......................................................................................................"; } .shortDots { content: "...................."; } What exactly, I want to do to avoid repeated dots to have it as single dot and that too configurable to change it as -, #, * Something mixin like below. .longDots { content: repeater('

翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果

阅读更多关于翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果

Gitbook 是一款产品文档构建工具,也可以用于构建个人博客,默认情况下电脑端访问时左侧菜单是展开状态,可偏偏有人想要实现默认折叠效果,于是诞生了这篇文章! 善良的我选择帮助别人可能是网上关于 Gitbook 的教程相对来说有些落后,加上写文章时分享了不少关于 gitbook 系列教程 ,因此关注我的粉丝好友中有不少是来源于 Gitbook . 所以上个月有个好友问我能不能配置 Gitbook 默认折叠的效果,心里有些犯难,作为 gitbook 的忠实粉丝,我都不知道 gitbook 还有这方面的配置?! 但是,善良的我总是有求必应, 不忍心拒绝小白用户,于是我便抱着试一试的心态开始研究一下如何默认折叠? 当然, 解决问题前还是要先复现一下问题 ,然后在命令行中熟练敲入了 gitbook serve 命令来启动本地服务器,为了排除缓存等影响,特意打开了 Chrome 浏览器的无痕模式 ,果不其然默认左侧菜单是展开的 ! 「雪之梦技术驿站」: 不能复现的问题都不是我的问题, 拒绝解决此类问题 ,搞不好是你自己环境搭建问题呢! 蓦然回首官方文档已走问题复现后就要开始寻求解决之道,虽然印象中并没有相关配置,但是难保记忆混乱遗漏了某些配置项,所以还是先看看官方文档怎么说的吧! 但是,当你在浏览器中输入 gitbook 官方文档时,并找不到想象中的官方文档而是

Import .css file in Less using nodejs gulp

阅读更多关于 Import .css file in Less using nodejs gulp

According to this question it's possible to import css file from less v.1.4.0. I tried to use gulp-less task, and it's not working. There's any way to import css file like this: @import "../spritesheet.css"; with nodeJS gulp? There are several ways to include files in LESS, depending on what you need, using @import ([keyword]) "filename" . Allowed keywords are: reference: use a Less file but do not output it inline: include the source file in the output but do not process it less: treat the file as a Less file, no matter what the file extension css: treat the file as a CSS file, no matter what