番禺怎样优化网站建设,4s店网站模板,丹阳seo公司,婚纱摄影网站优化技巧文章目录 前言LESS的系统要求安装LESS例子输出Less编译css工具后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板… 文章目录 前言LESS的系统要求安装LESS例子输出Less编译css工具后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 LESS的系统要求 操作系统:跨平台 浏览器支持: IE(Internet Explorer 8)FirefoxGoogle ChromeSafari。
安装LESS
步骤(1):我们需要NodeJ运行LESS示例。 要下载NodeJ请打开链接node 您 会看到如下所示的屏幕: 下载zip文件的最新功能版本。
步骤(2): 接下来运行安装程序以在系统上安装 Node.js 。
步骤(3): 接下来通过NPM(节点程序包管理器)在服务器上安装LESS。 在命令提示符下运行以下命令。
npm install -g less步骤(4): 接下来在成功安装LESS后您将在命令提示符下看到以下行:
-- less2.6.1-- errno0.1.4| -- prr0.0.0-- graceful-fs4.1.3-- image-size0.4.0-- mime1.3.4-- mkdirp0.5.1| -- minimist0.0.8-- promise7.1.1| -- asap2.0.3-- request2.69.0| -- aws-sign20.6.0| -- aws41.3.2| | -- lru-cache4.0.0| | -- pseudomap1.0.2| | -- yallist2.0.0| -- bl1.0.3| | -- readable-stream2.0.6| | -- core-util-is1.0.2| | -- inherits2.0.1| | -- isarray1.0.0| | -- process-nextick-args1.0.6| | -- string_decoder0.10.31| | -- util-deprecate1.0.2| -- caseless0.11.0| -- combined-stream1.0.5| | -- delayed-stream1.0.0| -- extend3.0.0| -- forever-agent0.6.1| -- form-data1.0.0-rc4| | -- async1.5.2| -- har-validator2.0.6| | -- chalk1.1.1| | | -- ansi-styles2.2.0| | | | -- color-convert1.0.0| | | -- escape-string-regexp1.0.5| | | -- has-ansi2.0.0| | | | -- ansi-regex2.0.0| | | -- strip-ansi3.0.1| | | -- supports-color2.0.0| | -- commander2.9.0| | | -- graceful-readlink1.0.1| | -- is-my-json-valid2.13.1| | | -- generate-function2.0.0| | | -- generate-object-property1.2.0| | | | -- is-property1.0.2| | | -- jsonpointer2.0.0| | | -- xtend4.0.1| | -- pinkie-promise2.0.0| | -- pinkie2.0.4| -- hawk3.1.3| | -- boom2.10.1| | -- cryptiles2.0.5| | -- hoek2.16.3| | -- sntp1.0.9| -- http-signature1.1.1| | -- assert-plus0.2.0| | -- jsprim1.2.2| | | -- extsprintf1.0.2| | | -- json-schema0.2.2| | | -- verror1.3.6| | -- sshpk1.7.4| | -- asn10.2.3| | -- dashdash1.13.0| | | -- assert-plus1.0.0| | -- ecc-jsbn0.1.1| | -- jodid255191.0.2| | -- jsbn0.1.0| | -- tweetnacl0.14.1| -- is-typedarray1.0.0| -- isstream0.1.2| -- json-stringify-safe5.0.1| -- mime-types2.1.10| | -- mime-db1.22.0| -- node-uuid1.4.7| -- oauth-sign0.8.1| -- qs6.0.2| -- stringstream0.0.5| -- tough-cookie2.2.2| -- tunnel-agent0.4.2-- source-map0.5.3例子
下面是一个简单的LESS示例。 hello.htm
!doctype html
headlink relstylesheet hrefstyle.css typetext/css /
/head
bodyh1Welcome to W3Cschool/h1h3Hello!!!!!/h3
/body
/html接下来让我们创建一个与CSS非常相似的文件 style.less 唯一的区别是它将以 .less 扩展名保存。 应在文件夹 nodejs 中创建文件 .html 和 .less 。
style.less
primarycolor: #FF7F50;
color:#800080;
h1{
color: primarycolor;
}
h3{
color: color;
}使用以下命令将 style.less 文件编译为 style.css :
lessc style.less style.css当您运行上述命令时它将自动创建 style.css 文件。 无论何时更改LESS文件都需要在cmd中运行上面的命令然后更新 style.css 文件。
运行以上命令时 style.css 文件将具有以下代码:
style.css
h1 {color: #FF7F50;
}
h3 {color: #800080;
}输出
让我们执行以下步骤看看上面的代码如何工作: 将上面的html代码保存在 hello.htm 文件中。 在浏览器中打开此HTML文件将显示如下输出。
Less编译css工具
您可以使用Less编译成css工具进行测试 例如 less转译css
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
