首页 > 技术文章 > LESS和SASS入门

heavyhe 2015-06-02 16:19 原文

 

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/

推荐阅读