NodeJs管理Less/Sass_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 08:48:37
원래의
997명이 탐색했습니다.

预计阅读时间: 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
로그인 후 복사
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!