Heim  >  Artikel  >  Web-Frontend  >  NodeJs管理Less/Sass_html/css_WEB-ITnose

NodeJs管理Less/Sass_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:48:37999Durchsuche

预计阅读时间: 5 分钟

介绍

less官网 http://lesscss.org/

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

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

通过命令行,npm安装less

npm install -g less

Less知识点

  1. Variables变量定义
  2. Nested Rules嵌套规则(&代表当前元素的父元素)
  3. Operations算数表达式
  4. Functions函数
  5. Scope作用域
  6. 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
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn