如何刪除引號中的動態十六進制值LESS

Question

我創建了一個函數，該函數創建一個十六進制代碼以創建隨機顏色。 我采用以下方式：

生成代碼的Mixin： _functions.less

.generateRandomColor() {
    @ramColor: `"#" + (Math.random()*0xFFFFFF<<0).toString(16)`;
}

導入和使用mixin的less樣式表： style.less

#container {
    > a {
        color: @red;
        text-decoration: none;
        padding: .2em;
        .generateRandomColor();

        border: @ramColor solid 1px;

        &:hover {
            cursor: pointer;
        }
    }
}

生成的CSS： style.css

#container > a {
    color: #ff0000;
    text-decoration: none;
    padding: .2em;
    -webkit-transition: all linear 0.86791842 s;
    -moz-transition: all linear 0.86791842 s;
    -ms-transition: all linear 0.86791842 s;
    transition: all linear 0.86791842 s;
    border: "#a93bc5" solid 1px; /* **The problem is here** */
}

簡而言之，我想為color創建十六進制代碼，但在編譯文件（.css）中不顯示引號

這是將在其中使用的HTML代碼：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/less.css"/>
        <!--<script src="js/libs/less-1.7.0.min.js" type="text/javascript"></script>-->
    </head>
    <body>
        <h2>Main Title</h2>
        <h4>Less Example</h4>
        <div id="container">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </body>
</html>

Answer 1

您的混入：

.generateRandomColor() {
  @ramColor: `"#" + (Math.random()*0xFFFFFF<<0).toString(16)`;
}

在選擇器中調用時，會在引號內生成顏色：

.container {
   .generateRandomColor();
   color: @ramColor;
}

生成

.container {
   color: "#45ff09";
}

要從生成的CSS中刪除引號，只需在反引號前放置~ ，以使混合中的字符串轉義：

.generateRandomColor() {
  @ramColor: ~`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`;
}

現在它將正確生成顏色：

.container {
   color: #750ab2;
}

波浪號 ~等效於函數e() ，該函數還轉義字符串。 這也將起作用。 這是一個選擇問題：

.generateRandomColor() {
     @ramColor: e(`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`);
}

更新正如下面的評論中提到的@ seven-phases-max一樣，推薦的解決方案是使用color()代替~或e() 。 您生成的顏色字符串在一個由mixin返回的變量中 ，您可能需要重用它並使用顏色函數（ lighten() ， fade()等）進行進一步處理。 函數e()和~可以生成最終的CSS字符串 。 他們在屬性上可以。 在最終CSS生成之前用在變量中，它們仍然是string類型。 因此， 最好的解決方案是：

.generateRandomColor() {
     @ramColor: color(`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`);
}

如何刪除引號中的動態十六進制值LESS

問題描述

1 個解決方案

解決方案1
1 已采納 2014-06-10 04:36:50

如何刪除引號中的動態十六進制值LESS

問題描述

1 個解決方案

解決方案1 1 已采納 2014-06-10 04:36:50

解決方案1
1 已采納 2014-06-10 04:36:50