很多人对Sass有略微的抵触,大多喜欢直接写CSS样式,因为这样可以避免工作中的复杂。但是Sass确实是一个强大的工具,其功能能够实现CSS样式所无法实现的。而且可以让任何形式的样式都能够方便的引入到开发工作中。可能对于Sass需要花一些时间去了解和熟悉适应,但是对于其强大功能而言,确实是有必要去认识一下Sass!
起初笔者对于Sass的陌生让我不敢去尝试使用,生怕Sass会完全改变我个人的编写和管理样式的方式。但是熟悉之后对其有了深入了解,今天就把一些技巧分享给大家。向大家展示一下Sass如何操作才能够不干扰你的工作流程而补充你的不足。
关于Sass的种种:
如果在你的样式中需要更换一套颜色,你需要一一找出其位置,并且将其属性替换,你是否希望这样处理CSS吗?
$brand-color: #fc3;
a {
color: $brand-color;
}
nav {
background-color: $brand-color;
}
如果你只改变了某一处的属性,而其他地方属性会随之改变吗?你可以使用Sass,或者在整个样式表里,重复的风格在不同地方使用呢?
p {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
footer {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
把一些共用的部分,规划成一个可重用的块,只需要定义一次,然后引用到你需要的地方即可实现全部的替换。
@mixin default-type {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
p {
@include default-type;
}
footer {
@include default-type;
}
Sass是可以做到一次操作实现全盘效果,以上两个例子很简单,配合CSS样式灵活使用,让你的工作效率更快,更灵活,相对更容易一些。Sass可以当做一个助手,也能够带给你无限的便捷。
CSS学习难点分析:
其实学习CSS也并非是一件易事。你需要对其每一个属性的作用做一个了解,了解其每一个属性是如何和谐层叠在一起才能够正常工作,还需了解不同浏览器所支持不同属性标签等问题。想要全盘掌握并非是一件容易的事!尤其是对一些复杂板块的后期维护更不是一件容易的事。但是很多人却没能认识到这一点!
CSS样式的出现其实也并非是为了今天所做的这些事,因为浏览器的不断升级以及不同浏览器的出现,CSS也在不断的更新升级而超出了其设计的初衷。但是我们依然对其有一定的依赖,因为CSS能够帮助我们实现更多的可能。
什么是Sass?
Sass其实是一个你所写的CSS样式表和CSS文件浏览器之间的预处理,弥补了CSS语言的不足。允许你写CSS代码不需要 重复。对于那些时常需要维护的样式来说,提供了方便。
Sass是一种语言的CSS,使用Sass描述的文档具有干净风格和结构。相对于传统的CSS语法来说,Sass能够做更多的事情。Sass提供了一个更简单、更优雅的语法CSS,实现各种功能,是一种比较有用的管理CSS样式的一种全新的方式。