less

LessCSS - IE gradient filter with variables and lighten

最后都变了- 提交于 2019-12-04 03:24:29
问题 I need to have an IE gradient filter in Less CSS with a variable and lighten. Is this possible? #whatever { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten(@grayColor, 3%)', endColorstr='@greenColor', GradientType=0); } 回答1: As far as I know you can't mix escaping (because that's what you need here) and colour functions (lighen). So you'll need to store the startColor value in another variable. @grayColor :#dddddd; @greenColor : #ff0000; @start : lighten(@grayColor, 3

LESS - use nth-child variable in string

寵の児 提交于 2019-12-04 03:19:14
Surely there's a way to rewrite the following in LESS? #bg-slider{ li:nth-child(1){ background:url('../images/bg1.jpg'); } li:nth-child(2){ background:url('../images/bg2.jpg'); } li:nth-child(3){ background:url('../images/bg3.jpg'); } } I've tried: .bg-image (@slide) { background:url('../images/bg@{slide}.jpg'); } #bg-slider{ li:nth-child(n){ .bg-image(n); } } But that just gives '../images/bgn.jpg' for all li's. #bg-slider { li { .bkg(1); .bkg(2); .bkg(3); } .bkg(@i) { &:nth-child(@{i}) { background: url('../images/bg@{i}.jpg'); } } } 来源: https://stackoverflow.com/questions/20369614/less-use

confusion about using std::less and std::greater with std::sort

只谈情不闲聊 提交于 2019-12-04 03:15:23
问题 In C, sort usually implements as in the following example: #include <stdio.h> void Sort( int* arr, int n, bool(*cmp)(int,int) ) { for( int i=0; i<n-1; i++ ) { for( int j=i+1; j<n; j++ ) { if( cmp(arr[i], arr[j]) ) swap( arr[i], arr[j] ); } } } int ascending( int a, int b ) { return a > b; } // greater int descending( int a, int b ) { return a < b; } // less void main() { int arr[10] = { 1,3,5,7,9,2,4,6,8,10 }; // ascending Sort( arr, 10, ascending ); for( int i=0; i<10; i++ ) printf( "%d ",

On input focus change color of label. How?

爱⌒轻易说出口 提交于 2019-12-04 03:10:05
问题 On input focus I want to change the color of the label element. How can I achieve this in less? .control-label{ color: @gray-light; } .controls{ input, textarea{ background-color:red; &:focus{ .control-label &{ color: red; //HERE } } } HTML: <div class="control-group"> <label class="control-label" for="inputEmail">Firstname</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Firstname"> </div> </div> 回答1: I don't think you can without changing your HTML, see also:

User defined functions with LessCSS?

不问归期 提交于 2019-12-04 03:09:51
问题 I have just recently gotten into LessCSS and I am running into what I feel is major limitation and I was wondering if there was a way to do this?? I want to say I read somewhere that Sass allows for user defined functions but will LessCSS do the same? What I'm wanting to do: @fs: 16; // either return the value .s(@t,@s,@u) { // return @t/@s*@u; } #elem { margin-top: .s(30,@fs,1em); width: .s(900,@fs,1em); .child { width: .s(100,900,100%); } } // or have a property argument .s(@t,@s,@u,@p) { @

crossbrowser opacity mixin for .less

旧时模样 提交于 2019-12-04 03:01:51
I am trying to use Javascript in LESS to be compiled in phpstorm.. I am trying to create a function based off of a cross-browser implementation of opacity found at this site : link Specifically, I am trying to create a LESS function to recreate this piece of code: .crossbrowseropacity { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid

How to debug LESS in Chrome?

筅森魡賤 提交于 2019-12-04 02:53:02
It looks as though LESS debugging has come a decent distance since even a year ago, and I was wondering how many people have experience with debugging using developer tools in Chrome/Canary. I'm trying to ensure that when I'm debugging a file, the element's CSS shows up as the LESS file, rather than the CSS file. It's of little use to have CSS line numbers show up, when I need to know the requisite line number of the LESS file. I can do this in firefox with firebug and fireless, but it's not working in chrome I tried to follow the steps here , however it doesn't appear to be functioning for me

Wrong CSS Path - Live Reload issue with Grunt

梦想与她 提交于 2019-12-04 02:49:05
I have this setup in my Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ less: { development: { options: { compress: false, yuicompress: false, optimization: 0 }, files: { // target.css file: source.less file "assets/css/main.css": "assets/css/main.less" }, } }, watch: { styles: { // Which files to watch (all .less files recursively in the less directory) files: ['assets/css/*.less', 'assets/less/*.less'], tasks: ['less'], }, // Live reload CSS css: { files: ['assets/css/*.css'], options: { nospawn: true, interrupt: false, livereload: true, }, }, }, }); // Watch grunt

01 less的使用

守給你的承諾、 提交于 2019-12-04 02:32:54
使用less 安装两个包 1===》cnpm install less less-loader --save-dev less中的注释 以 //开头的注释 不会被编译到css文件中去 以 /**/ 包裹的注释 会被编译到css 文件中去 3===》 1)使用@来声明一个变量 @pink:pink; 【颜色值】变为变量 <p class="p">123</p> <style lang="less" scoped> @colorred: red; .p{ color: @colorred; } </style> ----------------------------- <p class="p">123</p> 2) css【属性】变为变量 将margin变为一个变量 @m: margin; .p { @m: 20px; 或者 @{m}: 30px; 推荐 } -------------------------------- 3) 变量可以作为【选择器】 @{作用的元素}{} <span>33</span> @sp: span; @{sp} { background: pink; } ------------------------------------ 4)less作为url. @{} 一般我们很少将 属性 和选择器 变为变量 记住 less中的变量都是延迟加载的

Compile LESS to multiple CSS files, based on variable value

孤街醉人 提交于 2019-12-04 02:31:55
问题 Having a single variable that specifies a color within a variables.less file (e.g. @themeColor: #B30F55; ), and a .json file that constitutes a list of entities, where each key is an entity ID and the value of the key is that entity's color (e.g. '8ab834f32' : '#B30F55', '3cc734f31' : '#99981F' ), how could I run a Grunt task that outputs as many independent CSS files as there are entities in the json, after substituting the variable value? 回答1: You can define a different task for each color.