如何在 Less 中表示变量？

LESS代表更精简的样式表。它是一个向后兼容的 CSS 语言扩展。它的功能之一是它允许您在样式表中使用变量。变量可用于存储可重用的 CSS 值。通过让用户在单个位置定义常用值，这使用户更容易。

定义变量： Less 中的变量用 at (@) 符号表示。我们可以使用冒号 (:) 来赋值。

CSS

@color-primary: #009900;
@background-dark: #272822;
@background-light: #fff;

使用变量作为属性的值：

CSS

.card {
  color: @lt-gray;
  background: @background-light;
  font-size: @font-2;
}

使用变量作为函数的参数：

CSS

@link-color:        #428bca;
@link-color-hover:  darken(@link-color, 10%);

下面的示例演示了 Less 变量的使用。

示例 1：

gfg.html

  

    

  

    
Welcome to GeeksforGeeks
    
Paragraph 1
    
Paragraph 2
    
Paragraph 3
    
Paragraph 4
    
Paragraph 5

  

无风格

@green-color: #25C75C;
@black-color: #000;
@background-dark: #272822;
@background-light: #ebebeb;
  
body {
    font-family: 'Lucida Sans', Verdana, sans-serif;
}
  
h1 {
    color: @green-color;
}
  
div {
    padding: 10px;
}
  
.odd {
    color: @black-color;
    background-color: @background-light;
}
  
.even {
    color: @green-color;
    background-color: @background-dark;
}

预编译style.less后得到的文件名style.css

样式.css

body {
  font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
  color: #25C75C;
}
div {
  padding: 10px;
}
.odd {
  color: #000;
  background-color: #ebebeb;
}
.even {
  color: #25C75C;
  background-color: #272822;
}

输出：

示例 2：

gfg.html

  

    

  

    
Welcome to GeeksforGeeks
    

        

            Link 1 will take you to Page 1.
        
    

  

无风格

@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
@green-color: #25C75C;
  
body {
    font-family: 'Lucida Sans', Verdana, sans-serif;
}
  
h1 {
    color: @green-color;
}
  
div {
    padding: 10px;
}
  
.link {
    color: @link-color;
    text-decoration: none;
}
  
.link:hover {
    color: @link-color-hover;
    cursor: pointer;
}

预编译style.less后得到的文件名style.css

样式.css

body {
  font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
  color: #25C75C;
}
div {
  padding: 10px;
}
.link {
  color: #428bca;
  text-decoration: none;
}
.link:hover {
  color: #3071a9;
  cursor: pointer;
}

输出：

无需悬停