less

less undefined method error

由 穿精又带淫゛_ 提交于 2019-12-01 11:23:11
I have the following less compile error. My less is below not sure what is causing this. undefined_methodError: error evaluating function `darken`: Object #<Object> has no method 'toHSL' in /Users/anderskitson/Sites/mrskitson.ca/wp-content/themes/wordpress-bootstrap/library/less/variables.less:164:34 163 @navbarBackground: "../images/nav.png"; 164 @navbarBorder: darken(@navbarBackground, 12%); 165 (This action was triggered by a change to navbar.less) Less File @navbarBackground: "../images/nav.png"; background: url("{@navbarBackground}"); mu is too short From the fine manual : darken Decrease

SASS Replicating nested selector

由 让人想犯罪 __ 提交于 2019-12-01 11:06:15
问题 I'm using SASS for a project and so far I'm pretty satisfied with it. However I have some code that should only be presented for IE 7 and below, using the class name .ie-lt8 for that. But when i extend that selector in SASS, with a nested selector i create multiple selectors. Example (extending a display: inline-block code for IE): SASS /* My extension code */ .ie-lt8 %ie-inline-block { display: inline; zoom: 1; } /* I want the li to be inline-block */ #my-ul li { display: inline-block;

Variable from string interpolation returns a non unit value

由 ぃ、小莉子 提交于 2019-12-01 11:05:57
问题 This is the first time I'mn building a site using LESS and encountered a problem best described by the code below: @section-row-padding-size-xs: 30px; @section-row-padding-size-sm: 50px; @section-row-padding-size-md: 100px; @section-row-padding-size-lg: 140px; .section-row-padding( @size ) { @padding-size: ~"@{section-row-padding-size-@{size}}"; .section-row { padding: @padding-size 0; &.quarter-padding-top { padding-top: @padding-size * 0.25; } &.quarter-padding-bottom { padding-bottom:

Build a repetitive selector within a Less loop

由 只谈情不闲聊 提交于 2019-12-01 10:50:48
I've seen various ways of looping in LESS, but I haven't found a way to build selectors (agglutinate would be the right term I guess). For example, I'd like something like this: .staticClass .repeatedClass .repeatedClass > .finalStaticClass{ height: 20px; } Where .repeatedClass would be generated according to the loopcount. .staticClass and .finalStaticClass would be (as the name implies) static. Also, the height property would be increased by 10 (or any given number) for every loopcount. I would go about it somehow in this manner: .generateClasses (@index, @n, @in:"") when (@index > 0) {

How to read this LESS css?

由 倖福魔咒の 提交于 2019-12-01 10:45:09
I am trying to figure out Joni Korpi's Frameless CSS frameless grid ( http://framelessgrid.com/ ) and I'm having a hard time reading the .less file he has. I have a basic understanding that LESS uses variables so I know column = 48 and gutter = 24 and that's about it. Does 1cols = 1 * (48 + 24) - 24)/ 12 ? What I don't understand is @1col: @1cols; and .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; } Can anybody help? https://github.com/jonikorpi/Frameless/blob/master/frameless.less @font-size: 16; // Your base font-size in pixels @em: @font-size*1em; // Shorthand for

Bootstrap Less的使用

由 回眸只為那壹抹淺笑 提交于 2019-12-01 10:21:13
简介 由于CSS 无法定义变量 以及 冗余重复 的代码 在大项目中编写CSS会有很多重复 于是有了更高级的预处理语言 Less和Sass Less相比Sass 使用更 方便简洁 而Sass拥有更 强大的功能 编译工具 Less 和 Sass 都需要经过 编译 生成CSS 才可以使用 经常使用的编译工具是koala 这儿给出Linux下64位最新版本koala_2.3.0_x86_64 其他版本 官网 自行下载 链接: https://pan.baidu.com/s/14F1himmYeHORxyNX-ooonQ 密码: ufvo Less用法 (需要先下载Less) 1 Less使用 @ 定义和引用 变量 //Less 源码@color:#ffffff; #header{ color: @color; } //经过Koala编译后 #header { color: #ffffff; } 2 使用 混合 上面提到正是由于CSS 重复 的代码才导致Less和Sass 的出现 因此Less可以实现代码 复用 //Less源码 .rounded-corners(@radius:5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; -o-border-radius: @radius; border-radius:

less命令使用说明

由 ◇◆丶佛笑我妖孽 提交于 2019-12-01 09:57:22
1、命令概述 less 工具对文件或其它输出进行分页显示的工具，是linux正统查看文件内容的工具，功能极其强大。less 的用法比起 more 更加的有弹性。 在 more 的时候，只能向前浏览不能向后 ，但若使用了 less 时，就可以使用 [pageup] [pagedown] 等按 键的功能来往前往后翻看文件，更容易用来查看一个文件的内容！除此之外，在 less 里头可以拥有更多的搜索功能，不止可以向下搜，也可以向上搜。 2、命令语法 less【选项】 【文件】 3、命令选项 -b：设置缓冲区的大小 -e：当文件显示结束后，自动离开 -f：强迫打开特殊文件，例如外围设备代号、目录和二进制文件 -g：只标志最后搜索的关键词 -i：忽略搜索时的大小写 -m：显示类似more命令的百分比 -N：显示每行的行号 -o <文件名>：将less 输出的内容在指定文件中保存起来 -Q：不使用警告音 -s：显示连续空行为一行 -S：在单行显示较长的内容，而不换行显示 -x <数字>：将TAB字符显示为指定个数的空格字符 命令内部操作： 　　/字符串：向下搜索”字符串“的功能 　　?字符串：向上搜索”字符串“的功能 　　n：重复前一个搜索（与 / 或 ? 有关） 　　N：反向重复前一个搜索（与 / 或 ? 有关） 　　u：向前滚动半页 　　b：向前翻一页 　　d：向后滚动半页 　　f

Build a repetitive selector within a Less loop

由 点点圈 提交于 2019-12-01 09:07:42
问题 I've seen various ways of looping in LESS, but I haven't found a way to build selectors (agglutinate would be the right term I guess). For example, I'd like something like this: .staticClass .repeatedClass .repeatedClass > .finalStaticClass{ height: 20px; } Where .repeatedClass would be generated according to the loopcount. .staticClass and .finalStaticClass would be (as the name implies) static. Also, the height property would be increased by 10 (or any given number) for every loopcount. 回答1

LESS: How can I pass a mixin as an argument to another mixin?

由 ↘锁芯ラ 提交于 2019-12-01 08:49:22
问题 I have some basic mixins that apply some rules using media queries .on-small(@rules) { @media (@minWidthSmall) { @rules(); } } .on-medium(@rules) { @media (@minWidthMedium) { @rules(); } } // and .on-large, .on-x-large and so on And I'm trying to build a very simple flex-based grid system, I'm trying to pass the mentioned mixins as parameters so I can have a generic .make-column mixin. as follows: .make-col(@break-point-mixin, @span, @size) { flex: 1; box-sizing: border-box; /****************

vue设置全局样式变量 less

由 冷暖自知 提交于 2019-12-01 08:33:29
1.第一步： npm install sass-resources-loader --save-dev 2.然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码： function lessResourceLoader() { var loaders = [ cssLoader, 'less-loader', { loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/assets/styles/common.less'), ] } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } 　　path.resolve(__dirname, '../src/style/style.less')路径改成自己对应的文件 然后后面将 return{} 块中的 less: generateLoaders('less')
订阅 less