我们一起学SASS

写在前面

sass大约是4年前(2011年)的新技术,sass官网有详细介绍,包括安装指南、学习教程、语法细节文档等等,很全面也很清晰

为什么有必要学sass?因为很多前端自动化工具都用sass,比如京东的JDF、淘宝的KISSY都支持sass,在实际产品的开发中,sass用得很多,而且sass语法很简单,学习成本不高

至于sass与less,其实差异不是很大,功能相似,只是在语法细节上有差别。而且就功能而言,sass要略强于less,所以看看sass肯定是不亏的

一.sass是什么?

据官方说法,sass(Syntactically Awesome Style Sheets)是一种css扩展语言

我们知道的css只是一种标记语言,缺乏可编程特性,比如不支持变量、函数、逻辑流控制等等,缺乏这些特性使得css代码不易维护和修改,而sass就是要给css扩展这些可编程特性

类似的东西还有less和stylus,三者的区别请查看开源中国社区:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

二.sass与scss的区别

scss(Sassy CSS)是新版sass,其实区别不大,主要在语法格式上有差异:sass不需要花括号和分号,用缩进表示嵌套关系,仅此而已

P.S.一般都用scss格式的,可能是因为更容易从css格式过渡过来

三.sass具体语法

P.S.此处给出完整测试代码,细节都在注释里,建议打开sass在线编辑,把下面的代码粘过去,与生成的css代码对比理解

如下图:

如果不喜欢这种看代码说话的方式,可以查看W3CPlus:sass语法,提供了图文并茂的讲解

P.S.个人更喜欢看代码说话,因为代码简单明了,没废话,如果代码示例恰到好处的话就更好了

四.在线资源

  • sass官网:最标准,最权威

  • W3CPlus:有一篇很详尽的入门文章,图文并茂(上面也提到了)

  • sass在线编辑器:不想装ruby,还要用sass,用它就对了

  • RubyInstaller:Windows下装不了ruby?这里有好用的exe

参考资料

posted @   梦烬  阅读(1815)  评论(2编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现
点击右上角即可分享
微信分享提示