javascript - less 没有在 head 中定义-6ren

javascript - less 没有在 head 中定义

转载作者：太空宇宙更新时间：2023-11-04 12:15:53

25

4

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $('head style[type="text/css"]').attr('type', 'text/less');
        less.refreshStyles();
    });

</script>

我尝试使用此代码 http://jsfiddle.net/andsens/Yns9P/但我的控制台说 less 未定义，发生在 less.refreshStyles(); 行。我也尝试将它包含在正文中，但仍然给我同样的错误。

最佳答案

我遇到了同样的“Less is not defined”问题，试图让确切的代码在本地工作。我也在看 this 的 jsfiddle CSS 径向进度条教程。

在努力完成本教程以尝试找到我遗漏的内容之后，我遇到了作者 GIT对于教程博客。

我对 Less 了解不多，我只是在修修补补。

Here是让事情最终运行的代码。所以好像我错过了标签:

<style type="text/less><style>

这是来自 git 页面的完整代码:

<!DOCTYPE html>
<html>
<head>
    <style type="text/less">
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0,0,0,0.2);
    @percentage-color: #97a71d;
    @percentage-font-size: 22px;
    @percentage-text-width: 57px;
    margin: 50px;
    width:  @circle-size;
    height: @circle-size;
    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width:    @circle-size;
            height:   @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
            border-radius: 50%;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width:       @inset-size;
        height:      @inset-size;
        position:    absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top:  (@circle-size - @inset-size)/2;
        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
        .percentage {
            height:   @percentage-font-size;
            width:    @percentage-text-width;
            overflow: hidden;
            position: absolute;
            top:      (@inset-size - @percentage-font-size) / 2;
            left:     (@inset-size - @percentage-text-width) / 2;
            line-height: 1;
            .numbers {
                margin-top: -@percentage-font-size;
                transition: width @transition-length;
                span {
                    width:          @percentage-text-width;
                    display:        inline-block;
                    vertical-align: top;
                    text-align:     center;
                    font-weight:    800;
                    font-size:      @percentage-font-size;
                    font-family:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
                    color:          @percentage-color;
                }
            }
        }
    }
    @i: 0;
    @increment: 180deg / 100;
    .loop (@i) when (@i <= 100) {
        &[data-progress="@{i}"] {
            .circle {
                .mask.full, .fill {
                    -webkit-transform: rotate(@increment * @i);
                    -ms-transform: rotate(@increment * @i);
                    transform: rotate(@increment * @i);
                }   
                .fill.fix {
                    -webkit-transform: rotate(@increment * @i * 2);
                    -ms-transform: rotate(@increment * @i * 2);
                    transform: rotate(@increment * @i * 2);
                }
            }
            .inset .percentage .numbers {
                width: @i * @percentage-text-width + @percentage-text-width;
            }
        }
        .loop(@i + 1);
    }
    .loop(@i);
}
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
window.randomize = function() {
    $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
    });
    </script>
</head>

<body>
Animate percentage
<div class="radial-progress" data-progress="0">
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset">
        <div class="percentage">
            <div class="numbers"><span>-</span><span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span>5%</span><span>6%</span><span>7%</span><span>8%</span><span>9%</span><span>10%</span><span>11%</span><span>12%</span><span>13%</span><span>14%</span><span>15%</span><span>16%</span><span>17%</span><span>18%</span><span>19%</span><span>20%</span><span>21%</span><span>22%</span><span>23%</span><span>24%</span><span>25%</span><span>26%</span><span>27%</span><span>28%</span><span>29%</span><span>30%</span><span>31%</span><span>32%</span><span>33%</span><span>34%</span><span>35%</span><span>36%</span><span>37%</span><span>38%</span><span>39%</span><span>40%</span><span>41%</span><span>42%</span><span>43%</span><span>44%</span><span>45%</span><span>46%</span><span>47%</span><span>48%</span><span>49%</span><span>50%</span><span>51%</span><span>52%</span><span>53%</span><span>54%</span><span>55%</span><span>56%</span><span>57%</span><span>58%</span><span>59%</span><span>60%</span><span>61%</span><span>62%</span><span>63%</span><span>64%</span><span>65%</span><span>66%</span><span>67%</span><span>68%</span><span>69%</span><span>70%</span><span>71%</span><span>72%</span><span>73%</span><span>74%</span><span>75%</span><span>76%</span><span>77%</span><span>78%</span><span>79%</span><span>80%</span><span>81%</span><span>82%</span><span>83%</span><span>84%</span><span>85%</span><span>86%</span><span>87%</span><span>88%</span><span>89%</span><span>90%</span><span>91%</span><span>92%</span><span>93%</span><span>94%</span><span>95%</span><span>96%</span><span>97%</span><span>98%</span><span>99%</span><span>100%</span></div>
        </div>
    </div>
</div>
</body>
</html>

希望这对您有所帮助。

关于javascript - less 没有在 head 中定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28714876/

25

4

0

文章推荐： Java:写入期间意外退出

文章推荐： bash - Shell 脚本未通过 crontab 运行，但手动运行良好

文章推荐： java - 将 YAML 映射到 Java 对象时遇到问题

linux - compiler.h 文件中有 __cond_lock(x,c) 定义，但没有 __cond_unlock(x,c) 定义？
在complier.h中有一个宏定义如下: # define __cond_lock(x,c) ((c) ? ({ __acquire(x); 1; }) : 0) 但是这里我有一个问题，就是哪里
CURLOPT_ 定义
curl_easy_setopt 的选项在哪里？定义？我试图寻找 CURLOPT_VERBOSE 和其他一些整数值，但这些似乎没有在 curl.h 中明确定义。最佳答案第 792 行: #ifde
dllimport静态数据成员的C++定义
我确实有一个如下所示的类(class): //.h file class __declspec(dllimport) MyClass { public: //stuff pri
关系代数与逻辑优化规则(一):定义
作者: zhuwenzhuang, 2024.05.08. 阅读前假设读者熟悉数据库使用,了解 SQL 的语法和关系算子的大概含义, 能通过 EXPLAIN 命令查看数据库执行计划. 0 前言
Swagger header 定义
我似乎无法找到是否可以声明一个 header 对象以便在响应 header 中重用它，有一些示例定义了响应模式的对象，但它不会转置为响应 header 。我只设法制作了一个可重用的响应对象，如下所示:
CSS 选择器 * + * 定义？
css 选择器 * + * 实际上是什么意思？当您执行检查元素时，您可以在谷歌浏览器的控制台中看到它。在我看来，这似乎是对 "Every second child"应用一种风格，但仍然想确定。谁能帮我
Haskell primPutChar 定义
我试图弄清楚基本的IO Haskell 函数是定义好的，所以我使用了this reference我到了putChar函数定义: putChar :: Char -> IO () putChar
.net - TargetFrameworkAttribute 定义
我得到了一个自动生成的文件，该文件定义了程序集属性，我正在尝试理解内容。 [assembly: global::System.Runtime.Versioning.TargetFrameworkAtt
gnuplot，检查函数是否存在(定义)
This文档演示了如何检查变量是否先前已在 gnuplot 脚本中定义。文档中的示例: a = 10 if (exists("a")) print "a is defined" if (!exist
scheme - 定义、让和设置之间的区别!
好吧，这是一个相当基本的问题:我正在关注 SICP 视频，我对 define、let 和之间的区别有点困惑设置!. 1) 根据 Sussman 在视频中的说法，define 只允许为变量附加一个值一
枚举值的 XSD 定义
我一直在尝试定义一个包含只能具有以下三个值之一的字段的 XSD: 绿色红色蓝色本质上，我想在架构级别定义严格的枚举。我的第一次尝试似乎是错误的，我不确定修复它的“正确”方法。
class - “POCO”定义
有人可以定义“POCO”到底是什么意思吗？我越来越频繁地遇到这个术语，我想知道它是否仅与普通类有关还是意味着更多？最佳答案 “普通旧式 C# 对象” 只是一个普通的类，没有描述基础结构问题或域对象不
django CharField 定义
在我经常看到的一些django模型中 myfield = models.CharField(_('myfield')) class_name = models.CharField(_('Type'),
c - boolean 定义
每当 BOOL 数据类型不容易预定义时，我都会使用以下定义进行 boolean 运算， typedef unsigned char BOOL; (由于内存使用)。我意识到出于性能原因，使用本地总线宽
Java: vector 定义
l_ABC_BEANVector = utilRemote.fnGetVector("ABC_COVBEANVector"); 编码的含义是什么？任何帮助，我真的很感激。谢谢最佳答案唯一可以肯定地
JAVACC token 定义
我正在使用 javacc 开发一个项目，我遇到问题并需要一些帮助，我的文件中有这样的内容: STRING COPYRIGHT (C) 2003, 2004 SYNOPSYS, INC.; 我为单词 S
Haskell primPutChar 定义
我想弄清楚基本的 IO定义了 Haskell 函数，所以我使用了 this reference然后我到了 putChar函数定义: putChar :: Char -> IO () putCha
python - 定义@property
我在具体类中使用 @property 定义 getter 时遇到问题。这是Python代码: from abc import ABCMeta, abstractproperty class abstr
C 定义/全局变量依赖于其他东西
我正在为大学用 C 语言编写一个小游戏，但我陷入了困境。我(在头文件中)有这个结构: typedef struct{ game_element field[MAX_ROWS][MAX_COLU
c - 如何从flex文件中读取规则(定义)？
我一直在 .l 文件中创建标记定义。由于数据集数量庞大，它变得有点乏味。有没有办法读取文件中的所有单词，例如包含所有名词的 noun.txt 并给所有名词一个标记。基本上，我想自动化这部分: %%

首页

博学

6Ren·AI

商城

javascript - less 没有在 head 中定义