石家庄网络公司:如何快速建立Less.js【译转】

时间:2014-12-17 13:21:10 浏览:628次

    Less是一门CSS预处理语言,它扩充CSS语言,增加了诸如变量、混合(mixin)、函数等功能,让CSS更易维护、方便制作主题、扩充。Less可以运行 Node、浏览器和Rhino平台上。网上有很多第三方工具帮助你编译 Less 源码。现在less.js已经逐步被运用在网站建设中,虽然还是要进行最还是css编写,但是运用上却相当便利了。那如何来快速建立Less.js?今天笔者小丹要分享的文章就是这个主题了。

    Less.js(或更少)是一个CSS预处理器,可以彻底改变你的写作方式CSS。并且很容易安装和设置为web开发。

    有几种方法可以安装和配置较少,但对于发展中在浏览器中或者如果你只是感兴趣尝试而不需要一个web服务器上安装它,最快的方法是引用less.js图书馆在HTML文档中。让我告诉你怎么做?

    首先,从GitHub下载Less.js。

    另外:如果你使用Git、fire up the CLI,导航到您的项目目录,然后克隆回购越少你的电脑:

    git clone https://github.com/less/less.js.git

    有很多文件和目录内 less.js-master目录,当你打开它但我们只对里面的东西感兴趣dist目录(在开源行话是“分布”的简称目录,生产使用的文件)。

    在 dist目录,你会发现两个JavaScript文件: less.js和 less.min.js——你可以任选一个。

    less.js评论版,这是伟大的如果你喜欢阅读源代码。 less.min.js是一个简化版,有一个较小的文件大小。

    把less.js或less.min.js在您的项目目录中。

    与你的代码编辑器或文本编辑器:

    创建一个HTML文档。

    创建一个样式表。它应该有一个文件扩展名 .less。例子: styles.less。

    在<head>你的HTML文档,参考减少样式表和JS文件你放在你的项目目录:

    <head>
      <link href="styles.less" type="text/css" rel="stylesheet/less"/>
      <script src="less.js" type="text/javascript"></script>
   </head>

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title>Less.js: Quick Setup</title>
    <link href="styles.less" type="text/css" rel="stylesheet/less"/>
    <script src="less.js" type="text/javascript"></script>
    </head>
    <body>
    <h1>Less.js: Quick Setup</h1>
    <p><a href="http://sixrevisions.com/tutorials/set-up-less-js/">Read the tutorial</a></p>
    </body>
    </html>

    LESS

    /* 变量*/
    @body-bg-color: #83b692;    // 绿色
    @text-color: #fff;          // 白色
    @button-bg-color: #f9627d;  // 粉红色

    /* LESS CSS */
    body {
      background: @body-bg-color;
      color: @text-color;
      font-family: sans-serif;
      text-align: center;
    }
    a:link, a:visited {
    background: @button-bg-color;
    color: @text-color;
    display: inline-block;
    padding: 10px 10px;
    text-decoration: none;
   }
    a:hover {
    background-color: desaturate(@button-bg-color, 50%);
   }
    a:active {
    background-color: saturate(@button-bg-color, 50%);
   }

    结果

    浏览器错误提示

    默认情况下,不将提醒你每当遇到网页中的错误,这是有用的在web开发。

    编译部署之前少CSS

    开发完成后,编译 .less文件定期 .css文件。如果你想做这个快速上手,你可以使用一个少在线编译器。

    上面的少CSS被使用编译如下LESSTESTER:

    /* Variables */
    /* LESS CSS */
    body {
      background: #83b692;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    a:link,
    a:visited {
      background: #f9627d;
      color: #ffffff;
      display: inline-block;
      padding: 10px 10px;
      text-decoration: none;
    }
    a:hover {
      background-color: #d08b97;
    }
    a:active {
      background-color: #ff5c79;
    }

    推进少

    尽管本教程中描述的方法是最快的方式启动和运行与少,最好只用于研究,测试和开发,因为让JavaScript库的过程,CSS访问者每次请求您的web页面是一个糟糕的性能。

    一旦你准备好少承诺,在您的web开发项目中使用它,最好的选择是在web服务器上安装和设置或删除 less.js库和编译您的CSS正常CSS。

    (转载请注明转自:www.wangzhan.net.cn/news/n1536.htm,谢谢!珍惜别人的劳动成果,就是在尊重自己!)

上一篇:SEO实战:网站排名不靠外链靠基础

下一篇:Baidu spider关于网站解析的问题

返回列表

网站建设知识

品牌创意网站建设 上市公司网站建设 大型门户类网站建设 全方位网站运营代理
企业官方网站建设 B2C电子商务网站建设 专题活动网站(MINISITE)

更多 +联系我们

24小时服务热线:400-1180-360

业务 QQ:  444961110传真: 0311-80979256

渠道合作:  444961110@qq.com

更多 +关于我们

河北供求互联信息技术有限公司(河北供求网)诞生于2003年4月,是康灵集团旗下子公司,也是河北省首批从事网站建设、电子商务开发,并获得国家工业和信息化部资质认证的企业。公司自成立以来,以传播互联网文化为已任, 以高科技为起点,以网络营销研究与应用为核心,致力于为各企事业单位提供网络域名注册、虚拟主机租用、网站制作与维护、网站推广和宣传、网站改版与翻译、移动互联网营销平台开发与运营、企业邮局、网络支付、系统集成、软件开发、电子商务解决方案等优质的信息技术服务,与中国科学院计算机网络信息中心、腾讯、百度、阿里巴巴、搜狗、360、电信、联通、中国数据、万网、中资源、阳光互联、点点客、北龙中网、电信通等达成战略合作伙伴关系。

版权所有 © 河北供求互联信息技术有限公司-最优秀的石家庄网站建设公司,为您提供石家庄网站建设、网站推广等优质服务.   
服务热线:400-1180-360 传真:0311-80979256 增值电信业务经营许可证:冀B2-20105159 冀ICP备09010972号

在线留言
免费试用
扫一扫

扫一扫
赠送神秘大礼

全国免费服务热线
400-1180-360

返回顶部