初识sass框架

编写过页面的开发者都知道css这个东西，究其原意，也就是层叠样式表，我们页面的三大结构，html css javascript，其中html负责主要的页面结构，css就负责主要的页面样式，而我们的js就主要负责页面的动态，在这里我们知道css是基于渲染原理，和w3c来设计标准的，对于简单的页面来说，页面内容不是很多，所以样式也就不会很多，这种情况下面编写的css样式表，也就不会显得十分的臃肿，但是如果我们卡开发的是一些比较大型的网站的话，光是页面就会有很多，加上内容和样式，你就会发现里面会有很多重复性的代码，比如导航，一些div的样式，一些footer，nav等等，其中的样式规则是相同的，但是我们在进行开发的时候还是得进行重复的编写，这在无形之中就增加了我们的工作量。

思考一下有没有什么办法可以解决这一个问题呢?办法总是会有的，但是我们需要注意的就是选择一个高效的，之前提到过的使用angular中的模板引入，但是这样做的缺点就是即使你只需要引入很少的样式，但是你都得写很多的代码，这样做显然不太适合，在这里我们compass的sass框架，作为css的代表作品诞生了，下面我们就来领略一下这个神奇的sass。

我们都知道css充其量只能算是样式规则，样式表，还算不上是一个语言，因为在css中我们没有别的编程语言所能够使用的变量啊，赋值啊，继承什么的，但是在这里，我们sass的出现，就可以使得css变成语言，能够赋予它语言的特有属性，让css去组织模块，封装，复用代码，更重要的是让css看上去更加具有设计感，但是在这里我们仍然需要明白的是sass并不会让你写出更好的代码，如果你需要提高你的css代码水平。建议还是熟悉掌握基本的css语法，以及元素的使用方法，加上不断的项目经验，在这里sass能够帮你做到的是让你更高效的写出高可维护性的代码，主要体现在一下几个方面：

1.sass对于原生的CSS@import指令的扩展，我们都知道在一个页面中引入外部样式表有多种方法，但是@inport我们是不会选择去用的，主要是因为其效率实在很低。

但是在这里的@import可以把样式分散到多个更小的文件中去，这样一来整个css的结构马上就会变得清晰了。

2.其中的变量机制，通过sass我们可以避免之前的样式规则如行高，颜色，定位等等这里需要写，那边完全相同还是需要写，这sass就提供了一个统一的地方归纳整理，开发者如果需要改变一些布局，直接在变量上更改就会应用到整个页面中去，如果是传统的话需要页面的更改，那工作量就大了。

3.标准样式的分离，就像我们调用函数一样，将一些样式抽取出来，避免我们的复制粘贴。

4.这里深入了样式继承的概念，这个大大简化了我们查找bug的工作，我们需要的只是从父元素的继承机制入手，就可以轻松搞定。

以上简单罗列了一些sass的好处，通过这个可以让我们感受到sass和compass不仅是我们的开发者工具更是web设计师的设计工具，在熟悉了sass的基础上我们在完成页面的时候需要的就是一个对整个页面的一个宏观把控，我们不是站在编写页面的高度去看待，我们需要站在页面设计师的高度去看待。更多的sass方面的知识没有办法在这里一一罗列，感兴趣的可以去查一些资料，见识一下这个神奇的工具。