转载

NodeJs管理Less/Sass

预计阅读时间: 5 分钟

介绍

less官网 http://lesscss.org/

sass官网 http://sass-lang.com/

可以命令行安装也可以直接下载，其中less可以通过Nodejs的npm包管理去下载管理，sass则需要ruby去下载安装。

通过命令行，npm安装less

npm install -g less

Less知识点

Variables变量定义
Nested Rules嵌套规则（&代表当前元素的父元素）
Operations算数表达式
Functions函数
Scope作用域
import引用文件

变量

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111;  #header {   color: @light-blue; }

output输出

#header {   color: #6c94be; }

嵌套规则

#header {   color: black;   .navigation {     font-size: 12px;   }   .logo {     width: 300px;   } } //相当于下面代码 #header {   color: black; } #header .navigation {   font-size: 12px; } #header .logo {   width: 300px; }

算数表达式

// example with variables @base: 5%; @filler: @base * 2; // result is 10% @other: @base + @filler; // result is 15%

函数

@base: #f04615; @width: 0.5; //percentage, saturate, lighten, spin等都是函数 .class {   width: percentage(@width); // returns `50%`   color: saturate(@base, 5%);   background-color: spin(lighten(@base, 25%), 8); }

作用域

@var: red; #page {   #header {     color: @var; // white   }   @var: white; }

引用文件

@import "library"; // library.less @import "typo.css";

怎么编译less呢？

命令行进入存放less文件的文件夹，用下述命令编译less，下面是在当前文件夹下输出css。lessc命令后面是less的存放路径和css的存放路径

$ lessc styles.less styles.css

less中间件用法

less-middleware官网： https://www.npmjs.com/package/less-middleware ，进入项目文件夹，用命令行安装

npm install less-middleware --save

原文 http://boke.iflsy.com/archives/1222

正文到此结束

所属分类：编程技术

本文标签： node 时间编译代码 logo 管理 CSS 下载安装 http DDL js lib https example
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

NodeJs管理Less/Sass

介绍

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流