Question

大家好我有一个用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; 
}

我想应用一种轻松的效果，但是可以不做这件事吗？

.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%);  
}

我可能有一个较少的功能，采用mybackground的颜色并减轻30％而不是声明foreach div hover事件？类似的东西：

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

Answer 1

使用Mixin

这有助于减少代码重复。

<强> LESS

@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中使用循环可以进一步减少这种情况。例如，请参阅以下答案：

Answer 2

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

在LESS主页上有一个usage section，其中显示您可以添加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 functions reference guide您可以看到它们仅用于数据操作，例如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);

减少背景div

2 个答案:

使用Mixin