预计阅读时间: 5 分钟
less官网 http://lesscss.org/
sass官网 http://sass-lang.com/
可以命令行安装也可以直接下载，其中less可以通过Nodejs的npm包管理去下载管理，sass则需要ruby去下载安装。
通过命令行，npm安装less
立即学习“前端免费学习笔记（深入）”；
npm install -g less
Less知识点
变量
@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
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
772
收藏
