less

Less mixin and variables

由 无人久伴 提交于 2019-12-02 05:47:12
问题 I have the following mixin: .iconFont(@color: @green, @font-size: 18px){ color: @color; font-size: @font-size; } If I want only to change the second variable value, I need to write the first variable default value? h1{ .iconFont(@green, 14px); } 回答1: No, there is no need to specify the default value for the first parameter while calling the function. Instead you can just use named parameters feature to explicitly let the compiler know that the value you are passing in the mixin call is for

Writing browser specific hack in Less (for <IE9)

由 梦想的初衷 提交于 2019-12-02 05:36:13
问题 I want to do something like this (Source - CSS Tricks Article): #veinte { color/*\**/: blue\9; } in Less for IE7 and IE8 but it gives errors. The below works: #diecinueve { color: blue\9; } but there are some elements that I dont want to be called in IE9. e.g. I have something in IE9 with :before elements but because IE8 doesnt support it, I want to give it a padding only in IE8. But this #veinte { color/*\**/: blue\9; } gives errors in Less. I tried this #veinte { color~"/*\**/": blue\9; }

Rem fallback for ie7-8

由 倖福魔咒の 提交于 2019-12-02 05:34:41
I'm using the "rem" unit for all my "modern" websites, to make this compatible with ie7-8 I'm using a less function ".font-size(10);" that outputs "font-size:10px; font-size:1rem;" As I am using rem for practical everything (width, top, letter-spacing,...) my css would be much leaner without the pixel fallback. How difficult would it be making a .htc file that automatically formats rem into px? Are there other ways without js? If you need to support IE7/8, just stick with the LESS fallback function. It's simply not worth trying to get rid of the pixel fallback to save bytes. Let's exaggerate

LESS Declare variables using class names?

由 为君一笑 提交于 2019-12-02 05:17:09
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 selector, but something along the lines of: &.(green|blue|red) { background: @{$1}; } which would generate the

Generate styles using LESS recursive function and media queries

由 吃可爱长大的小学妹 提交于 2019-12-02 05:03:35
问题 I am trying to generate some relative to screen height and decided to try to use LESS to generate something like that, even if a bit heavy just as a test: @baseHeight: 1px; .setRelativeHeight(@screenHeight, @minHeightDiff, @maxHeightDiff) when(@screenHeight < 2400) { @media (min-height: @baseHeight * @screenHeight) { min-height: @baseHeight * (@screenHeight - @minHeightDiff); max-height: @baseHeight * (@screenHeight - @maxHeightDiff); } .setRelativeHeight(@screenHeight + 20, @minHeightDiff,

How to apply less functions to gradient colors?

由 ≡放荡痞女 提交于 2019-12-02 04:38:27
I am new in less. I want to apply less functions to the gradient colors. I have tried best of my knowledge but I couldn't get the output. Can any one please suggest me the correct way to get the less function derived colors. I tried the below codes. @input: #fff , #aaa 25%, #ccc 50%, #000 100%; @light: 10%; @dark: 20%; div{ .custom-grad(@input, @light, @dark); } .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)} .custom-grad(@input, @light, @dark) { .for(@input); .-each(

Colors in Bootstrap custom download?

由 假如想象 提交于 2019-12-02 04:19:59
So I'm using the Bootstrap Customize and Download page to generate a version of the Bootstrap files with custom colors. I got the idea that I wanted to add some other colors (e.g. @purpleLight) to make upkeep of the site design easier, so I look through the downloaded contents the site generates, and my customizations don't appear to be anywhere, let alone somewhere for me to add others. Here's what comes in the bootstrap.zip the site spits out: css bootstrap.css bootstrap.min.css img glyphicons-halflings.png glyphicons-halflings-white.png js bootstrap.js bootstrap.min.js ...and that's it. So,

CSS Keyframe animations for all browsers?

由 人盡茶涼 提交于 2019-12-02 04:08:23
问题 I have a swing animation that I would like to work on all (modern) browser. Do I have the correct css? Also, what are the other browsers equivalent for: -webkit-transform-origin:top; also, is there an easier way to write this out, seems like a lot of code? Im using less. .bow{ -webkit-animation: swing 3s infinite ease-in-out; -moz-animation: swing 3s infinite ease-in-out; -o-animation: swing 3s infinite ease-in-out; -ms-transition: swing 3s infinite ease-in-out; animation: swing 3s infinite

Angular 6 - Less CSS' import is not working anymore

由 六月ゝ 毕业季﹏ 提交于 2019-12-02 04:08:17
I wanted to re-use some structure from an Angular 5 project which uses Less. In this old project I could simply load .less files using this line from within a component: @import '~app/shared/less/bootstrap'; This would load: /my-app/src/app/shared/less/bootstrap.less Now I have a blank Angular 6 project, which is also configured to use Less as a preprocessor: ng new my-app --routing --style less Extract from angular.json : "my-app": { "prefix": "app", "schematics": { "@schematics/angular:component": { "styleext": "less" } }, "architect": { "build": { "options": { "styles": [ "src/styles.less",

How to do LESS @import without @import literally?

由 自作多情 提交于 2019-12-02 04:00:17
问题 I'm using LESS. From Google PageSpeed I've learnt that, using @import in CSS file will hamper the site speed. So I'd like to exclude any @import thing from my CSS. I have 2 different stylesheets reset.css , and rebuild.css - to avoid @import I copied all of their code into my main stylesheet. So the real styles of my site got below many code and that's a problem. So I need the two stylesheets to @import into the styles.less (main stylesheet) file, in a way, so that, they actually won't
订阅 less