1

大家好,我有一个用 php 和更少开发的网站。我有这个html:

<div id="navigation">
    <div class="verde1-bg">
    </div>
    <div class="verde2-bg">
    </div>
    <div class="verde3-bg">
    </div>
    <div class="verde4-bg">
    </div>
</div>

和更少/css

@verde1:#adbf21;    
@verde2:#405908;    
@verde3:#4f7302;    
@verde4:#618c03;

.verde1-bg{
    background:@verde1;
}

.verde2-bg{
    background:@verde2; 
}

.verde3-bg{
    background:@verde3; 
}

.verde4-bg{
    background:@verde4; 
}

我想为每个 div 应用亮度效果,但可以不做这件事吗?

.verde1-bg:hover{
    background: lighten(@verde1, 30%);
}

.verde2-bg:hover{
    background: lighten(@verde2, 30%);  
}

.verde3-bg:hover{
    background: lighten(@verde3, 30%);  
}

.verde4-bg:hover{
    background: lighten(@verde4, 30%);  
}

我可以在 less 中使用一个函数来获取 mybackground 的颜色并将其调亮 30% 而不是将 foreach div 声明为悬停事件?就像是:

#navigation{
   div:hover{
      lighten(div.background, 30%);
   }
}
4

2 回答 2

2

使用 Mixin

这有助于减少代码重复。

较少的

@verde1:#adbf21;    
@verde2:#405908;    
@verde3:#4f7302;    
@verde4:#618c03;

.setBackground(@color) {
    background: @color;
    &:hover {
      background: lighten(@color, 30%);
    }
}

.verde1-bg{
    .setBackground(@verde1);
}

.verde2-bg{
    .setBackground(@verde2);
}

.verde3-bg{
    .setBackground(@verde3);
}

.verde4-bg{
    .setBackground(@verde4);
}

CSS 输出

.verde1-bg {
  background: #adbf21;
}
.verde1-bg:hover {
  background: #e1eb8e;
}
.verde2-bg {
  background: #405908;
}
.verde2-bg:hover {
  background: #a5e515;
}
.verde3-bg {
  background: #4f7302;
}
.verde3-bg:hover {
  background: #b1fb13;
}
.verde4-bg {
  background: #618c03;
}
.verde4-bg:hover {
  background: #bafb2d;
}

这可以通过在 LESS 中使用循环来进一步减少。例如,请参阅以下答案:

  1. 更少的 mixin 或选择器来根据同级索引更改位置?
  2. LESS CSS - 函数中的不同元素
于 2013-03-25T20:05:52.090 回答
1

由于 的性质LESS,一个语法较少的编译器CSS,我认为它无法完成,LESS不与网页及其元素交互,它只是编译里面的代码file.less并将其嵌入到网页中。

在 LESS 主页中有一个用法部分,其中显示您可以添加 javascript 函数,但我认为它是用于less vars manipulation,而不是从页面获取元素数据,也许您可​​以在那里尝试一下。

<script type="text/javascript">
less = {
    env: "development", // or "production"
    async: false,       // load imports async
    fileAsync: false,   // load imports async when in a page under
                        // a file protocol
    poll: 1000,         // when in watch mode, time in ms between polls
    functions: {},      // user functions, keyed by name
    dumpLineNumbers: "comments", // or "mediaQuery" or "all"
    relativeUrls: false,// whether to adjust url's to be relative
                        // if false, url's are already relative to the
                        // entry less file
    rootpath: ":/a.com/"// a path to add on to the start of every url
                        //resource
};
</script>
<script src="less.js" type="text/javascript"></script>

还有一个LESS 函数参考指南,您可以在其中看到它们仅用于数据操作,例如file.less.

escape(@string);               // URL encodes a string
e(@string);                    // escape string content
%(@string, values...);         // formats a string

unit(@dimension, [@unit: ""]); // remove or change the unit of a dimension
color(@string);                // parses a string to a color
data-uri([mimetype,] url);       // * inlines a resource and falls back to url()

ceil(@number);                 // rounds up to an integer
floor(@number);                // rounds down to an integer
percentage(@number);           // converts to a %, e.g. 0.5 -> 50%
round(number, [places: 0]);    // rounds a number to a number of places
sqrt(number);                  // * calculates square root of a number
abs(number);                   // * absolute value of a number
sin(number);                   // * sine function
asin(number);                  // * arcsine - inverse of sine function
cos(number);                   // * cosine function
acos(number);                  // * arccosine - inverse of cosine function
tan(number);                   // * tangent function
atan(number);                  // * arctangent - inverse of tangent function
pi();                          // * returns pi
pow(@base, @exponent);     // * first argument raised to the power of the second argument
mod(number, number);       // * first argument modulus second argument

convert(number, units);    // * converts between number types
unit(number, units);       // *changes number units without converting it
color(string);             // converts string or escaped value into color

rgb(@r, @g, @b);                             // converts to a color
rgba(@r, @g, @b, @a);                        // converts to a color
argb(@color);                                // creates a #AARRGGBB
hsl(@hue, @saturation, @lightness);          // creates a color
hsla(@hue, @saturation, @lightness, @alpha); // creates a color
hsv(@hue, @saturation, @value);              // creates a color
hsva(@hue, @saturation, @value, @alpha);     // creates a color

hue(@color);           // returns the `hue` channel of @color in the HSL space
saturation(@color);    // returns the `saturation` channel of @color in the HSL space
lightness(@color);     // returns the 'lightness' channel of @color in the HSL space
hsvhue(@color);        // * returns the `hue` channel of @color in the HSV space
hsvsaturation(@color); // * returns the `saturation` channel of @color in the HSV space
hsvvalue(@color);      // * returns the 'value' channel of @color in the HSV space
red(@color);           // returns the 'red' channel of @color
green(@color);         // returns the 'green' channel of @color
blue(@color);          // returns the 'blue' channel of @color
alpha(@color);         // returns the 'alpha' channel of @color
luma(@color);          // returns the 'luma' value (perceptual brightness) of @color

saturate(@color, 10%);                  // return a color 10% points *more* saturated
desaturate(@color, 10%);                // return a color 10% points *less* saturated
lighten(@color, 10%);                   // return a color 10% points *lighter*
darken(@color, 10%);                    // return a color 10% points *darker*
fadein(@color, 10%);                    // return a color 10% points *less* transparent
fadeout(@color, 10%);                   // return a color 10% points *more* transparent
fade(@color, 50%);                      // return @color with 50% transparency
spin(@color, 10);                       // return a color with a 10 degree larger in hue
mix(@color1, @color2, [@weight: 50%]);  // return a mix of @color1 and @color2
greyscale(@color);                      // returns a grey, 100% desaturated color
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                        // return @darkcolor if @color1 is > 43% luma
                                        // otherwise return @lightcolor, see notes

这些功能仅在 1.4.0 beta 中可用

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
于 2013-03-25T18:16:38.080 回答