sass学习（1）——了解sass

为什么要选择sass

我们在手写css中，会遇到很多很麻烦的问题。倒不是一些技术的问题，而是工程量的问题。例如，如何可以代替难记的16进制颜色，如何可以让层次更清晰，还有重复的代码该如何偷懒。其实这一切的原因，大部分是因为css并不是一个编程语言，这虽然让入门的门槛降低。但是一旦遇到工程量大的问题上，就会有些蛋疼。毕竟偷懒是人的天性。

然后一些工程师就开始琢磨如何可以让css更加的好用，于是一些less，sass/scss，就出现了。我们可以利用sass完成一些非常酷炫的事情，并且可以让你的代码更清晰更简洁，减少非常多的工作量。而你所需要的付出，仅仅是一段轻松的学习。

sass的安装

这里就不多讲sass的安装了，因为我用的是mac，自带ruby的，所以整个流程是十分的简单。这里给一个地址给需要的人：sass安装。

在mac上，仅需要sudo gem install sass即可。

关于sass和scss的关系

其实这两个东西，据我了解是同一个东西而已。只不过sass出来的早，并且它的代码块是通过缩进来控制的，这一个特点却让很多对编程不感冒的同学感到十分别扭。后来sass就做出了改变，按照以往的{}来区分代码块，减少学习曲线。

我们可以大致看看，这两种写法的样子

\------demo.sass------\
$white: #FFFFFF

body
	color: $white

	.whiteDiv
		background: $white

\------demo.scss------\
$white: #FFFFFF;

body{
	color: $white

	.whiteDiv{
		background: $white
	}
}

------编译后------
body {
  color: #FFFFFF;
}
body .whiteDiv {
    background: #FFFFFF;
}

其实都是大同小异的对吧！如果你厌烦了大括号和分好，你可以用sass的严格缩进来控制代码的层次。但是如果你是基于团队协作工具，那么就选择尽量平滑些的scss，但无论怎样，它们都是一个非常酷的工具。