SASS初体验

来源:互联网 时间:1970-01-01

SASS用法指南

本文主要 参照 +亲身实践来总结SASS的使用方法。

因为css不是一种编程语言,所以各种麻烦事情你懂得。而sass的出现就是为了使我们这些前端代码工人能更加快捷、高效的编写css样式。特别是当你的Boss或者产品主意不定时会改来改去时,一个变量统统搞定。【最好还是搞定那些产品吧~】

你需要的 scss与css转换器 或者 考拉 一个使用熟练的编辑器 推荐 sublime 关于sublime的配置可以去看看 认识SASS SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。 SASS提供四个 编译风格 的选项:

变量

compact压缩之后的css文件:

嵌套

&:代表父元素

来看生成的css代码:

继承

css代码:

mixin

在sass中可以定义可重用的代码块,通过@mixin 块名称 就可以定义好一个重复利用的样式。注意,这部分还可以定义参数。

css代码中就不会显示定义的代码部分,只显示.box类的样式:

至此先结束。

因为平时用的最多的就是以上的知识。当然SASS的好处不止如此,感兴趣的同学可以继续 深入学习 。



相关阅读:
Top