sass入门_Sass入门：安装和基础

在本文中，我们将讨论称为Sass或语法很棒的样式表CSS预处理器。

如果您一直在关注我们以前在LESS上发表的文章，那么我们确定您熟悉CSS预处理程序 。 Sass和LESS都是CSS预处理程序，它们主要使用变量，混合函数和函数之类的编程语言，以更动态的方式扩展了我们编写纯静态CSS的方式。

安装Sass

在组成Sass之前，我们需要先安装它。 Sass建立在Ruby之上 。 如果您使用的是Mac，很可能已经安装了Ruby。 如果您可以在Windows中安装Ruby，请使用此Ruby安装程序 。

安装完成后，可以转到“ 终端” （在Mac上）或在“命令提示符”（在Windows中），然后在其中键入以下命令行：

sudo gem install sass

gem install sass

如果安装成功，您将在终端/命令提示符中收到以下通知。

接下来，我们需要使用以下命令选择Sass观看的目录；

sass --watch path/sass-directory

命令行以上将每看.scss / .sass文件path/directory ，每当在该目录中的文件的一个改变，萨斯将更新相应的文件，或者如果没有创建一个。

如果我们需要Sass生成特定目录中的文件，则可以通过这种方式进行；

sass --watch path/sass-directory:path/css-directory

我们还可以使用此命令行查看特定文件而不是目录。

sass --watch path/sass-directory/styles.css

如果watch命令成功执行，则以下类似此通知的内容将出现在“终端/命令提示符”中。

Sass应用

但是，如果您讨厌通过终端或命令提示符工作，则可以将某些应用程序用于Sass。 免费选项是Scout ; 它基于Adobe Air构建，因此可以在所有操作系统（Windows，OSX和Linux）上运行。

但是，它的运行速度非常慢，如先前报道的那样。

因此，如果您没有耐心，也可以选择付费。 价格因每个应用程序而异， Compass.app为10美元， Fire.app为14美元， Codekit为25美元。

代码突出显示

尽管Sass主要是CSS扩展，但是您当前的编辑器可能无法正确突出显示语法。 幸运的是，已经有一些包几乎所有的代码编辑器，使.sass或.scss代码高亮。

如果您像我一样使用Sublime Text 2，则可以使用这些软件包。 Sublime Text HAML＆Sass和Sublime Text 2 Sass Package ，并且为了更简单的方式，您可以通过Package Control安装这些软件包之一。

粗话

Sass和LESS实际上共享一些通用语言，以下是其中一些。

变数

$color-base: #000;
$width: 100px;

与LESS变量的唯一区别是Sass中的变量用$符号定义。

嵌套规则

header {
	width: 980px;
	height: 80px;
	nav {
		ul { 
			list-style: none;
			padding: none;
			margin: none;
		}
		li {
    		display: inline;
			a { 
				text-decoration: none; 
			}
  		}
  	}
}

混合功能

@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

运作方式

li {
    width: $width/5 - 10px;
}

条件陈述

@if lightness($color-base) >= 51% {
	background-color: #333333;
} @else {
	background-color: #ffffff;
}

在LESS中，您可以通过Guard表达式执行类似的操作，这在本教程中已经介绍过。

最终思想

就是这样。 在下一篇文章中，我们将开始探索Sass语言及其伴侣Compass。 敬请关注。

翻译自: https://www.hongkiat.com/blog/getting-started-saas/