less | 易学教程

Dynamically set LESS variables from user settings

阅读更多关于 Dynamically set LESS variables from user settings

问题 This is a simple matter to explain really. It's either possible or it's not. I have user settings in the DB, or will have at least. These settings will contain things like font sizes, colors and opacity. I need to get them from the member object and into the LESS styles. Before I go on I should let you know that I'm using Node.js + Sails.js + MongoDB. My member object will look similar to ( truncated data ): { _id: ObjectId("52afc219c41e159808d41be5"), createdAt: ISODate("2013-12-17T03:16:41

Dynamically set LESS variables from user settings

阅读更多关于 Dynamically set LESS variables from user settings

parent selector in less

阅读更多关于 parent selector in less

问题 Normally in less to reference a parent selector is: .parent { .grand-pa & { /* this rules will apply to: .grand-pa .parent {....} background: grey; } } What I'm trying to do is something similar. example code HTML: <div class="panel panel-parent"> <div class="panel-child"> {{content}} </div> </div> Less code: .panel { .panel-child { // some rules &.panel-parent & { //<=== IS IT POSSIBILE SOMETHING LIKE THIS?? // .panel.panel-parent .panel-child{...} } } } The only solution I have found is to

How to create list output in less?

阅读更多关于 How to create list output in less?

问题 I am trying to create a list which is calculated from another list. For example, if I have a list like 1,2,3,4... then the output has to be 10,20,30,40... Is there any other way to create a list from another in less? Please refer the below codes. @input: 1,2,3,4; .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i), @i)} .create-list(@input){ .for(@input); .-each(@value, @a) {

Node/less: util.puts: Use console.log instead

阅读更多关于 Node/less: util.puts: Use console.log instead

问题 When I run lessc from my terminal it's riddled with these util.puts: Use console.log instead warnings. How do I make them go away? mbayazit:~$ lessc --help util.puts: Use console.log instead usage: lessc [option option=parameter ...] <source> [destination] util.puts: Use console.log instead util.puts: Use console.log instead If source is set to `-' (dash or hyphen-minus), input is read from stdin. util.puts: Use console.log instead ... I just installed less via: sudo apt-get install g++ curl

lesscss import and watch

阅读更多关于 lesscss import and watch

问题 I have two files: black.less /* imports */ @import "elements.less"; @import "crush.less"; @import "tree.less"; I'm using the less watch functionality by adding: less.watch(); Sure enough I can see the traffic getting black.less. Black.less hasn't changed though so any change in any of the files being imported is not counted as a change and the style is not updated. If I however touch black.less the style updates as it should. Is there a way to automatically update regardless of if it's an

lesscss import and watch

阅读更多关于 lesscss import and watch

Configure Webpack to build a directory of LESS files into corresponding CSS files

阅读更多关于 Configure Webpack to build a directory of LESS files into corresponding CSS files

问题 I'm hoping to use Webpack compile all our less files in /less to /public/css and include them in our server-side templates as regular css ( not sticking the text into the using ExtractText plugin or overloading require). That is, I'm trying to get Webpack + a LESS loader or plugin to glob to compile all the .less files: /less/foo.less /less/bar.less /less/unknown-new-less-file.less ... and output them to /public/css/foo.less /public/css/bar.less /less/unkown-new-less-file.less I then want to

表析LESS、Sass和Stylus的异同

阅读更多关于表析LESS、Sass和Stylus的异同

/*--> */ /*--> */ . 首页博客园联系我前言：CSS预处理语言 . 基本差别 . 基本语法 . 变量与作用域 . 混合（Mixins） . 嵌套实现后代选择器 . 继承 . 条件语句 . 循环语句 . 综合对比 . 留言评论返回顶部前言： CSS 预处理语言 CSS 预处理语言可为 CSS 增加更多编程特性，以 CSS 作为目标生成文件。这些语言可有效提高编程效率，使 CSS 更加简洁、适应性更强、可读性更加，并使项目更易于维护。本文将在开发者角度使用表格横向对比的方式客观分析目前主流的 CSS 预处理语言 LESS 、 Scss 、 Stylus 的异同之处。不介绍这些语言的安装、编译等内容。默认读者已熟悉CSS并可能已用过以上至少一种CSS预处理语言。鉴于目前 Sass 语言有分别以“ .sass ”和“ .scss ”为文件名后缀的两套语法规则，本文只介绍 Sass3 之后的版本，即以 Scss 表示。基本差别 LESS Scss Stylus/staɪləs/ 后缀名 *.less *.scss *.styl 编译方法均可以通过各自方式在本地编译成 *.css 文件有很多第三方编译工具可以将这些格式的文件编译为 *.css 文件特别项可以在 HTML 文件中引入 less.js 文件与像引入 *.css 文件一样的方式引入 *

LESS SCSS MIXIN conversion

阅读更多关于 LESS SCSS MIXIN conversion

问题 Body classes may have .m01 , .m02 , .m03 , .m04 depending on the colour break for the section of the pages. I am trying to convert LESS into SCSS , but I am having trouble converting the mixing below. //-LESS //-Sample colours @m01_col_lvl_01: red; @m02_col_lvl_01: green; @m03_col_lvl_01: blue; @m04_col_lvl_01: black; //- start colour mixin loop .module_colours(4); .module_colours(@n, @i: 1) when (@i =< @n) { //-colours @col_lvl_01_multi: "m0@{i}_col_lvl_01"; .m0@{i} #site-name { background