less | 易学教程

What is the purpose of the less.js and styles.less

阅读更多关于 What is the purpose of the less.js and styles.less

问题 Can someone explain why I would want to use the less.js script along with its stylesheet? I don;t understand the purpose and its advantages. Thank you. Erik 回答1: Less.js is a CSS pre-processor, it means that you will be able to write your in style using the Less pre-processor languages in a *.less file, then Less.js will compile it into pure CSS. CSS pre-processor comes with a lot of powerful features such as: variables , mixins , nested rules , operations , imports and a lot more. With Less

less on iis not working

阅读更多关于 less on iis not working

问题 I use less with the dotless dll downloaded from http://www.dotlesscss.org/ I have added to web config all references suggested by the site <add type=" dotless.Core.LessCssHttpHandler ,dotless.Core" validate="false" path="*.LESS" verb="*" /> <section name="dotless" type="dotless.Core.configuration. DotlessConfigurationSectionHandler ,dotless.Core" /> When i run the application with visual studio development server on my pc all works fine. When i run the application with local IIS there is an

Less Mixin Variable within CSS selector

阅读更多关于 Less Mixin Variable within CSS selector

问题 Is is possible to concatonate the value of a less mixin variable within a css selector name? ie: .leftImage{ .alignContent(left); } .alignContent(@side: left; @marAmount: 20px;){ img{ float: @side margin-@side: @marAmount; } } So what im trying to do is mixin the value of @side (in this instance) with a partial css selector of 'margin-' ultimately trying to create 'margin-'left'' (without the quotes) 回答1: In LESS 1.6.x and higher it is as simple as: .leftImage { .alignContent(left); }

Am I overcomplicating my LESS for vendor prefixes?

阅读更多关于 Am I overcomplicating my LESS for vendor prefixes?

问题 I've started using LESS for CSS lately and was wondering if my method is the correct way to target multiple vendor prefixes by creating my own LESS "mixin" (I think)? .transition (@transition: 1s) { transition: @transition; -webkit-transition: @transition; -moz-transition: @transition; } So if I were for example to have a .btn class and call .transition (which works) .btn:hover { color: red; .transition(@transition: 1s ease-in); } And for animations. @animate-fadein: fadeIn 1.7s linear;

In LESS, can I loop over class/mixin “patterns”?

阅读更多关于 In LESS, can I loop over class/mixin “patterns”?

问题 I need loop over 400+ Font Awesome icon variables (look at the source) by a "pattern", I mean the pattern is @fa-var-* , i.e. @fa-var-apple , @fa-var-archive and so on. Purpose is create some custom class like .btn-apple , .btn-archive and using the unicode value inside the variable. Is this possible in LESS? 回答1: You can create multiple classes dynamically by using array loops like below. However, the array list values have to be defined prior hand for the loop to be executed. @variables:

Less syntax with @@ meaning

阅读更多关于 Less syntax with @@ meaning

问题 I have downloaded a theme for bootstrap and In their less sources I have a mixin like: .label-color(@color) { @label-class:~"label-@{color}"; @badge-class:~"badge-@{color}"; @label-color:@@label-class; .@{label-class}, .@{badge-class} { background-color:@label-color !important; } } .label-arrow(@color) { @label-class:~"label-@{color}"; @label-color:@@label-class; .@{label-class}{ &.arrowed:before { border-right-color:@label-color; } &.arrowed-in:before { border-color:@label-color; } &.arrowed

Less - parametric mixin with shorthand numeric and or string values, with rem and px fallback

阅读更多关于 Less - parametric mixin with shorthand numeric and or string values, with rem and px fallback

问题 Using Less, I'm trying output css combination shorthand values for properties, whilst detecting the type of a value passed as a variable depending on how many values are passed as variables. one value @v1 two values @v1 and @v2 four values @v1 , @v2 , @v3 and @v4 And for each variable detected, check if is is a number greater than 0, and if so output a rem and px value for each property value, so the complied css might be something like: .demobox{ border-width: 10px 20px 0 0; border-width:

VUE CLI3 less 全局变量引用

阅读更多关于 VUE CLI3 less 全局变量引用

方法一 1、添加依赖 style-resources-loader 2、vue.config.js中添加 module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [], }, }, }; 3、添加全局less引入 module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, './src/assets/varibles.less'), ], }, }, }; 4、加入path const path = require('path'); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, './src/assets/varibles.less'), ], }, }, }; 方法二 const path = require('path') module.exports = {

Trying to isolate bootstrap by using Less

阅读更多关于 Trying to isolate bootstrap by using Less

问题 I am following this tutorial https://formden.com/blog/isolate-bootstrap I am using Terminal on my Mac. I have done steps 1-3. When I try to do step 4 it says "lessc: ENOENT: no such file or directory, open '/Users/mikelee/prefix.less' ". Can anyone figure out what is going wrong or suggest a better/easier way to isolate bootstrap css? Thanks. 回答1: You can use isolated css for Bootstrap 4.1 (compiled with LESS) - https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes It have isolated

Less, reference not working

阅读更多关于 Less, reference not working

问题 My understanding of reference is that it should only include the bits of the imported file it needs. Here it seems to be bringing in other parts? Main file .FadedGrid { @import (reference) './kendo.less'; .k-grid-header th { background-color: @input-background-color; } } kendo.less file @input-background-color: #000; /* Nothing from here is used*/ @import "theme.less"; theme.less file .UnrelatedRule { background-color: #000; } output .FadedGrid .UnrelatedRule { background-color: #000; }