欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Sass入门教程

发布时间:2017-07-01  编辑:杨雨个人博客网站   点击:   

 Sass入门教程

Sass(Syntactically Awesome StyleSheets)是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

简单简洁

语义化(expressive)

重复使用性好(reusable)

可维护性和扩展性好

Sass 的语法分为:

新的SCSS ( Sassy CSS、Sass 3,扩展名为*.sCss);

旧的SASS ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass);

关于两者比较的补充可以参考这篇文章What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。

本文地址:http://itbyc.com/web/html5/17013.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1