SASS笔记

前端开发离不开三剑客：html、Javascript、css.

html:主要进行网页内容的开发语言；
JavaScript: 主要对页面业务逻辑的开发语言；
css：主要对网页外观样式进行注解的文本；

没错就是文本，css仅仅是一种文件格式，而非编程语言，那么有没有一种对网页样式进行编程的语言那，答案是肯定的，比如本篇文章的主角SASS,还有另外两种比较常用的css预处理器(框架)Less CSS、Stylus。

1. CSS预处理器的必要性

 css主要对页面的DOM元素进行样式的设定，虽然某些样式也可以继承，比如font-size、opacity,CSS也提供了各种选择器，

其本质都是围绕DOM元素进行样式设定的，随着前端项目工程越来越大，样式文件的冗余性、可维护性带来的副作用也越发显得重要；

比如情景一，你的项目中定义了一个基本颜色，有上万处的不同元素运用了改样式，突然某天产品要求网站更新风格，换了一种色值，如何实现？

全局搜索该色值，将其替换为新的色值；
定义一个样式类，更改该样式类的色值，在每一处进行需要更改的DOM元素上添加该样式；

再比如情景二，你的项目多处引用了一个相似的border样式，仅仅是border的线宽不一样，如何实现？

定义多个样式类，每个样式类引用一种线宽；

不用css预处理器，我们同样可以满足产品的各种花式需求，仅仅是工作量大了一些，仅仅是重复的多写几行乃至几千行代码而已，仅此而已！！！

试想一下，加入我们的色值可以采用一个变量，只需要轻轻改变这个色值变量的值就可以满足场景一的需求；假如我们可以像编写JS代码一样写一个可输入变量的程序，

就可以满足产品设计场景二的需求，即便他有成千上万的线宽，你需要做的仅仅是更改一个变量即可；

是的，CSS预处理器已经完全为我们实现了，这就是CSS预处理器存在的意义

2. SASS主要特性

 CSS预处理器是一种语言，任何一种css预处理器都完全兼容css，它可以为CSS增加一些编程特性，无需考虑浏览器兼容性问题，让你在CSS中使用变量、简单的逻辑程序、函数等其他的一些功能，请不要停留在石器时代了，开启css编程的新起点吧；

2.1. sass提供四中可选的编程风格

nested:嵌套缩进的css代码； ————默认风格

expanded:没有缩进,扩展的css代码；

compact :简介格式的css代码；

compressed:压缩后的css代码；————生产环境使用

2.2. SASS主要功能

包括：变量支持、嵌套、混入(mixin)、继承、导入、函数、操作符

巴特西

SASS笔记

1. CSS预处理器的必要性

2. SASS主要特性

最新文章

热门文章