CSS预处理器Sass -- Sass、compass初识及其安装(1)

前言：为了在项目中更高效的编写出高质量的、兼容性更强的CSS代码，一般咱们会在项目中使用CSS预处理器，我的更习惯使用Sass。

1.CSS预处理器

　　<1>什么是CSS预处理器？

　　　　CSS预处理器是新定义的一种以CSS为目标文件语言，开发时只须要使用这种语言进行编码工做，预处理器一般实现浏览器兼容、变量、结构体等功能，代码更易维护。

       <2>为何须要CSS预处理器？

　　　　对于小型项目、或样式简单的项目，能够直接编写CSS代码。可是对于大型项目，牵扯不少样式复杂的页面和模块，若是使用原生CSS须要分别对不一样的页面编写CSS文件达不到复用，会很麻烦并且不易维护。若是使用预处理器，能够利用变量、函数、继承等功能方便的实现CSS的编写。

2.预处理器之Sass

　　<1>什么是Sass？

　　　　Sass是CSS的一种预处理器，是一种相似编程语言的源语言，目的是解决补充CSS自己的不足。

　　<2>我为何选择Sass?

　　　　变量：使用sass中的变量能够实现更增强大的功能。

　　　　颜色：使用RGB或RGBA实现颜色值的自动装潢

　　　　嵌套：嵌套规则更加直观清晰，与html嵌套相对应。

　　　　媒体查询：media query书写更加简单。

　　　　CSS压缩：实现CSS的自动压缩。

　　<3>.Sass和.Scss两种文件格式的区别?

　　　　.Sass：.sass是Sass最原始的文件格式，为了配置haml而设计，遵循缩进式的代码风格(不使用大括号包裹，末尾不添加分号;)。

　　　　例子：sass

    body
        background-color: black

　　　　不使大括号包裹，末尾不须要书写分号结束。

　　　　.Scss：使第三代开始，在保留缩进式风格的基础上，向下兼容普通的CSS代码格式，大括号进行包裹，末尾分号结束。

　　　　例子：scss

    body {
        background-color: black;
    }

　　　使用大括号包裹，同时结尾使用分号，书写格式更相似原生CSS。

3.SASS类库之Compass

　　<1>什么是compass？

　　　　Compass更像是sass的一个基础类库，是一个很是丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。

       <2>compass的五大模块？

　　　　reset模块：重置元素默认样式的影响。

　　　　CSS3模块：支持CSS3引入的新属性。

　　　　layout模块：支持页面的栅格化布局。

　　　　typograph模块：主要负责板式的填充。

　　　　utilities模块：类库自己提供的工具类。

 

4.SASS与Compass的安装

　　我使用vsCode编辑器，安装了Live Sass Compile插件就能帮我实时的完成Sass文件的编译，但这里咱们依然学习下Sass传统的安装。　　

　　<1>安装Ruby？

　　　　CSass是用Ruby开发的，因此咱们安装Sass和Compass的前提是先安装Ruby。

　　　　第一步：进入Ruby的官网，https://rubyinstaller.org/downloads/

　　　　第二步：下载图示安装包

　　　　

　　　　第三步：正常安装软件，一路next，等待安装完成。

　　　　第四步：在命令行中运行Ruby -v，若是出现以下表示成功

　　　　

　　　　　　　　若是出现命令找不到的提示，那么咱们就须要配置环境变量。

       <2>Sass和Compass的安装？

　　　　因为Compass是依赖于Sass的，咱们只需安装Compass就Sass也就会安装成功。

　　　　命令行中运行：gem install compass

　　　　注意：这里下载可能会失败，觉得gem默认会从Ruby官方库下载compass，不少外国资源一般是被墙了的，这时候须要切换下载源。

　　　　第一步：gem source查看当前资源路径

　　　　

　　　　第二步：gem source -r “资源路径”删除当前资源路径

　　　　

　　　　第三步：gem source -a “资源路径”添加新的资源路径，这里咱们添加淘宝的ruby镜像地址

　　　　

 　　　　第四步：而后再执行gem install compass，而后运行sass -v查看是否安装成功

　　　　

　　　　这里安装成功的是3.4.25版本。

 

　　总结：本节咱们初步认识Sass、Compass的做用和功能，而后完成Sass、compass开发环境的搭建，下节开始学习Sass、compass的使用。