无标题文章

[TOC]##为什么要学习Sass和Compass###简单一来说，主要目标： - 使用Sass和compass可以写出更加优秀的CSS - 可以解决CSS编写过程中的一些痛点问题，如精灵图合成sprite 等 - 能够有效的组织样式，图片，字体等项目元素当然前提是你要首先会写CSS，要不然也不会写出好的Sass和compass，不过也不排除意外。###那么到底哪些人需要来学习sass和compass呢 - 担任重构工作的同学，写很多CSS，不知如何自动化. - 前端JS工程师，希望在项目周期内更好组织项目内容。##Sass的工作流程

sass工作流程

- 首选第一步编写后缀为.scss或者.sass的代码文件，这里为什么会有两种不同的后缀命名方式呢，这要和sass的历史和CSS3的发展有关.最早的sass文件都是以.sass为后缀文件，随着CSS3的发展Sass加入了.scss的类似CSS代码编写风格的文件。 - 通过Sass引擎compass编译生成后缀为 .css文件最后将样式代码Deploy到代码仓库（git或者github）上，生成静态页面网页呈现。----------###sass语法分类 >.Sass语法 h1 color: #000 background: #fff;>.Scss语法h1{ color: #000; background: #fff;} 注意：一个项目中可混合使用两种语法，但不能在一个文件中使用两种语法 ##Sass和compass安装>由于Sass底层开发环境是由Ruby开发的，所以需要部署安装Ruby进行Sass的安装和编译使用，下面介绍一下Ruby的安装。 注意：这里说明一点，由于中国网络的限制，一般Ruby的安装是需要翻墙的，具体怎么翻，相信大家都有自己的方法，网上也可以搜到很对，这里就不做介绍了 ###Ruby的安装登录Ruby的官方网站 http://www.ruby-lang.orrg/en/ 进行下载安装，可以下载Mac,Linux,Windows 版本，这里讲一下Windows版本的安装，其他操作系统类似。> 安装Ruby,选择文件目录，注意添加Ruby的执行程序到你安装的路径中。

这里写图片描述

查看Ruby版本号 Ruby -v 这里同样由于网络原因，需要将Amazon上的Ruby资源路径换成国内淘宝Ruby资源路径 >执行gem sources --remove https://rubygems.org/ //移除原来资源文件gem sources -a https://ruby.taobao.org/ //换成淘宝资源###安装Sass和文件创建gem install sass同时可以指定sass安装版本号3.3gem install sass --version=3.3卸载指定版本gem uninstall sass --version=3.30新建一个名为learn-sass-cli的文件mkdir learn-sass-cli //创建文件cd learn-sass-cli/ //进入文件目录echo off >main.scss //新建main.scss文件sass main.scss mian.css //将main.scss文件编译成main.css文件打开main.scss文件，输入简单的全局设置样式*{ margin: 0; pading: 0;}编译生成的文件目录如下所示

这里写图片描述

其中.sass-cache是一个编译缓存文件，main.scss是一个sass文件，main.css.map是一个映射文件，main.css便是最终编译生成的样式文件。 至此sass的安装和文件创建便完成了，下面介绍compass的安装和创建*###compass安装和文件创建comapss安装类似sass gem install compasscompass -v //查看版本号创建workspace工作文件 mkdir workspacecd workspace/compass create learn-compass-init //创建compass文件实时监听文件变化 cd learn-compass-init/compass watch

这里写图片描述

workspace工程目录如下所示

这里写图片描述