sass语法_Sass：语法很棒的样式表

sass语法

介绍 (Introduction)

使用HTML和CSS创建网页效果很好，但是缺乏Sass提供的多功能性。 我不是Sass专家，但是我已经在几个项目中使用了它，这非常棒。 如果您想了解有关Sass的更多信息，如何安装Sass和所有爵士乐，请在 here. 此处查看文档站点。

There are two main ways to write Sass code: SCSS (Sassy CSS) and Sass. SCSS looks more like normal CSS because it uses curly braces and semicolons. However, Sass relies on whitespace to differentiate sections. For example, in SCSS you may write:

编写Sass代码的主要方法有两种：SCSS（Sassy CSS）和Sass。 SCSS看起来更像普通CSS，因为它使用花括号和分号。 但是，Sass依靠空白来区分部分。 例如，在SCSS中，您可以编写：

.caption {
  @include master-text
  font: {
    style: italic;
    size: 0.75em;
  }
  color: gray;
}

while in Sass you would write:

而在Sass中，您将编写：

.caption
  +master-text
  font:
    style: italic
    size: 0.75em
  color: gray

In both cases, it compiles to the same CSS so it is really just a personal preference of how you would like to code. Don’t worry if you don’t understand what some of the above code means; by the end of this, you’ll have a better idea of how Sass works. Some of the main features I’ve found to be useful are variables, mixins and nesting. 

在这两种情况下，它都可以编译为相同CSS，因此实际上只是您希望如何编码的个人喜好。 如果您不了解上述某些代码的含义，请不要担心； 到此为止，您将对Sass的工作方式有一个更好的了解。 我发现有用的一些主要功能是变量，mixin和嵌套。

考拉 (Koala)

我发现可以与Sass一起使用的工具是 Koala. Koala is a gui application for Mac, Windows and Linux that will compile your Sass code into CSS. It can be configured to listen to your project folders and automatically compile any time you save your files. Koala also does error checking, so it’ll catch all your syntax mistakes as you go. The alternative to Koala would be using the command line. This isn’t all that bad, but I’ll take a nice GUI over the command line any day. I don’t Sass without Koala, and neither should you. Koala 。 Koala是Mac，Windows和Linux的GUI应用程序，它将Sass代码编译为CSS。 可以将其配置为侦听项目文件夹并在保存文件时自动进行编译。 Koala还会进行错误检查，因此您可以在执行过程中捕获所有语法错误。 Koala的替代方法是使用命令行。 这并不是很糟糕，但是我每天都会在命令行上使用漂亮的GUI。 没有考拉，我不会无礼，你也不应该。

As a side note, all examples I provide will be using Sass syntax rather than SCSS syntax. However, I have posted another article here that goes over some more Sass using the SCSS syntax.

附带说明一下，我提供的所有示例都将使用Sass语法而不是SCSS语法。 但是，我在这里发布了另一篇文章，它使用SCSS语法介绍了更多的Sass。

And here. We. Go.

和这里。 我们。 走。

变数 (Variables)

无论您使用哪种编程语言，变量都是绝对关键。 在Sass中，变量可以提供更大的灵活性，并且如果您需要在许多地方使用某个值，可以使您的生活更轻松。 例如，为您在整个网站中使用的特定颜色定义变量很有用。 您可以使用以下符号来定义变量：

$main-color: #af0000

background-color: $main-color

This compiles to CSS as this:

这样可以编译为CSS：

background-color: #af0000;

Pretty cool, no?

很酷，不是吗？

混合蛋白 (Mixins)

如果您要遵守DRY（不要重复自己）原则，则必须使用Mixins。 在 Sass, here’s what is said about mixins: “Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.”  Sass的主要站点上，关于混合的内容是这样说的：“ CSS中的某些东西编写起来有些繁琐，尤其是使用CSS3和现有的许多供应商前缀时。 使用mixin，您可以创建要在整个站点中重复使用CSS声明组。 您甚至可以传入值以使混入更加灵活。 mixin很好地用于供应商前缀。”

Here’s how it works:

运作方式如下：

=body-text
  font:
    family: Helvetica, sans-serif
    weight: 400
    style: normal
    size: 1em
  color: $bodyColor
  text-align: left

body
  +body-text
  text-align: left

Then it compiles to this in CSS:

然后将其编译为CSS：

body {
  font-family: “Helvetica”, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  color: #000000; // or whatever $bodyColor is defined as
  text-align: left;
}

These allow a great deal of flexibility, because they allow you to easily change properties further down the road. Let’s say that you decide later on that you want a particular text style to be different, even if you’ve used classes as efficiently as possible, you may still have to change a property in multiple places. Whereas if you use mixins, you only have to change that property once and it updates across the whole style sheet.

这些提供了很大的灵活性，因为它们使您可以轻松地在以后更改属性。 假设您稍后决定要使特定的文本样式有所不同，即使您尽可能有效地使用了类，您仍然可能必须在多个位置更改属性。 而如果您使用mixins，则只需更改该属性一次，它就会在整个样式表中更新。

As a side note, Koala is able to automatically prefix your CSS, so I personally have not needed to use mixins for prefixing. 

附带说明一下，Koala能够自动为您CSS加上前缀，因此我个人不需要使用mixins作为前缀。

I have found mixins particularly helpful for doing broad declarations for text, and then calling that mixin wherever I need that set of text styles. For example, I may do something like this:

我发现mixin对于执行广泛的文本声明，然后在需要该套文本样式的任何地方调用该mixin尤其有用。 例如，我可以这样做：

=masterText
  font:
    family: Helvetica, sans-serif
  color: #000
  line-height: 2rem

h1, h2, h3, h4, h5, h6, p
  +masterText

h1
  color: red
  font:
    size: 2rem
    weight: 800

//h2-p styles below this

This gives you a good amount of control over all your styles, and makes it very easy to make broad strokes to your whole site by changing one value.

这使您可以很好地控制所有样式，并通过更改一个值来轻松地对整个网站进行广泛的笔触。

套料 (Nesting)

这个概念并不是很难理解，但是如果做错了，它可能会使事情搞砸。 它的主要目的是允许您仅对代码的每一层进行一次作用域调整，从而使代码更整洁。 这到底是什么意思？ 好吧，也许仅仅向您展示会更容易。 这通常是用CSS编写的内容：

nav {
  position: fixed;
  width: 100%;
  height: 100px;
}
nav ul {
  background-color: #000;
  float: right;
}
nav ul li {
  display: inline;
  margin: 10px 25px;
}
nav ul li a:link {
  color: #fff;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
nav ul li a:visited {
  color: #fff;
}
nav ul li a:hover {
  color: #ff0000;
}

That’s a lot of wasted space and repetition! Here’s how it looks in Sass:

那浪费了很多空间和重复！ 这是Sass的外观：

nav
  position: fixed
  width: 100%
  height: 100px
  ul
    background-color: #000
    float: right
    li
      display: inline
      margin: 10px 25px
      a
        &:link
          color: #fff
          transition: all 0.25s ease-in-out
        &:visited
          color: #fff
        &:hover
          color: #ff0000

Looks much cleaner, right? It will compile into the CSS you see above, but it looks much different here. The notation may look a bit confusing, but it’s actually pretty simple. You list the top-level tag and just keep drilling down. The ampersand is used to refer to the parent tag. So in this case, you can use it to easily do pseudo classes.

看起来更干净了吧？ 它将编译为您在上面看到CSS，但是在这里看起来却大不相同。 该表示法可能看起来有些混乱，但实际上非常简单。 您列出了顶级标签，然后继续向下钻取。 “＆”号用于引用父标记。 因此，在这种情况下，您可以使用它轻松地执行伪类。

That’s the basics of Sass, and these are a few of the techniques that I use most often.

这是Sass的基础，而这些是我最常使用的一些技术。

Stay Sassy Experts.

保持野蛮的专家。

翻译自: https://www.experts-exchange.com/articles/17463/Sass-The-Syntactically-Awesome-Style-Sheet.html

sass语法