LESS和SASS入门

 

LESS和SASS入门

 

 

 

 

 

 

新建项目

 

 

 

 

 

 

 

项目结构

 

 

 

Less

VS2015中已经集成了LESS。

 

新建Less样式表文件，main.less

 

 

 

Package.json中添加gulp-less依赖。

 

 

 

在Gulpfile.js中添加：

 

 

 

任务运行管理器中运行less

在wwwroot/css目录下生成main.css文件

 

 

添加lessTest.html，对生成的main.css进行测试，是否生效

 

运行结果

 

 

 

 

 

Sass

Package.json中添加依赖：

 

Gulpfile.js中添加：

 

 

 

 

 

 

main2.scss

常量的使用

main2.css

 

 

 

main2.scss

包含

main2.css

 

 

main2.scss

继承

 

main2.css

 

 

 

 

Font Awesome

 

 bower.json中添加

 

 

 

 

Gulpfile.js中添加

 

 

 

 

新建FATest.html

 

 

运行结果

 

 

有图标。

 

 

http://fortawesome.github.io/Font-Awesome/icons/