使用scss-to-css_SCSS-使编写CSS再次有趣

使用scss-to-css

Shoutout to

喊到

Emily Plummer for giving me this article! She did most of it, I just finished it up and posted it for her :) Emily Plummer给我这篇文章！ 她完成了大部分工作，我刚刚完成并为她张贴了它：)

---

 

---

介绍 (Introduction)

In a previous article, I gave some tips on Sass using the Sass syntax. This time around though, I’m going to be using the SCSS syntax to show you some more features of Sass. Here are four singular capabilities of Sass.

在上一篇文章中 ，我使用Sass语法提供了有关Sass的一些技巧。 不过这次，我将使用SCSS语法向您展示Sass的更多功能。 这是Sass的四种独特功能。

1.超长选择器 (1. Super Long Selectors)

通常，在编写CSS时，我们发现自己在编写冗长的选择器，然后在下一条规则中必须重复相同的长选择器，以选择其他子元素。 稍微复制粘贴会减轻痛苦，但是这些长的选择器仍然使阅读代码变得困难。

Sass fixes this with nesting! Here's an example:

Sass通过嵌套解决了这个问题！ 这是一个例子：

Let's say you want to edit a button, that is inside of a < ul > that is ​inside of a < div > that is inside of a < section > that is inside of a < container >, and you really need to be specific in this case so that your styles don't carry over. In regular CSS you would have to do something like this:

假设您要编辑一个按钮，该按钮位于<ul>内，位于<div>内，位于<section>内，位于<container>内，您确实需要具体说明在这种情况下，您的样式就不会保留下来。 在常规CSS中，您将必须执行以下操作：

.container .sectionName .divName ul .button { color: #fff; }

But then you realize you need to edit three other things in that unordered list, and they all have to be as specific as possible. Now you have to do this:

但是随后您意识到您需要编辑该无序列表中的其他三项内容，并且它们都必须尽可能具体。 现在，您必须执行以下操作：

.container .sectionName .divName ul .button { color: #fff; }
.container .sectionName .divName ul .kittens { border: 2px solid #fff; }
.container .sectionName .divName ul .puppies { font-size: 4rem; }
​.container .sectionName .divName ul .lava { background: red; }

With SCSS you would just do:

使用SCSS，您只需执行以下操作：

.container .sectionName .divName ul { 
  .button { color: #fff; }
  .kittens { border: 2px solid #fff; }
  .puppies { font-size: 4rem; }
  .lava {  background: red; }
}

Beautiful! The code is pleasant to read, and you just saved a bunch of time by not having to write out long selectors.

美丽！ 该代码易于阅读，并且您不必写长选择符就节省了很多时间。

2.供应商前缀 (2. Vendor Prefixes)

The web developer's best frenemy. Vendor prefixes are tedious to include in your CSS, but ceaseless advocates for the end user that we are, they are necessary. With Sass you can create a mixin, then @inclue that mixin wherever it's needed in the code. Here's an example:

Web开发人员的最佳选择。 供应商前缀要包含在您CSS中是很乏味的，但是对于我们这样的最终用户，他们不断地提倡，它们是必需的。 使用Sass，您可以创建一个mixin ，然后在代码中需要的地方@include包含该mixin。 这是一个例子：

@mixin linearGrad($top, $bottom) {  
  background: $top;
  background: -moz-linear-gradient($top, $bottom);
  background: -webkit-linear-gradient($top, $bottom);
  background: linear-gradient($top, $bottom);
}

And then to call it:

然后调用它：

.divName {  @include linearGrad(#ff666,#ffccff); } 

3.媒体查询 (3. Media Queries)

Sass还允许您将媒体查询嵌套在其目标元素内。 这使您的代码更易于阅读，并且编辑媒体查询的速度也更快。

.kittens {
  width: 300px;
  @media screen and (max-width: 320px;) {
    width: 120px;
  }
  @media screen and (min-width: 1200px;) {
    width: 600px;
  }
}   

4.响应式数学 (4. Responsive Math)

数学可能是有史以来最糟糕的事情。 但是，Sass可以节省一天。 假设您需要调整文本区域的大小，并使用960像素网格。 不要让您的TI-89淘汰那些数字，只需让Sass承担繁重的工作即可。

.textArea {
  width: 320px / 960px * 100%;
}  

结论 (Conclusion)

Well, that’s all folks! If you haven’t tried out Sass yet, you may need to rethink your entire life -- or at least your coding choices. It will revolutionize the way you approach building websites and make your job as a developer easier. 

好吧，这就是所有人！ 如果您还没有尝试过Sass，则可能需要重新考虑自己的一生-或者至少是编码选择。 它将彻底改变您建立网站的方式，并使您作为开发人员的工作更加轻松。

Again, if you want to see more Sass, check out my other article. And for even MORE information, check out the official documentation.

同样，如果您想了解更多Sass，请查看我的其他文章 。 有关更多信息，请查看官方文档 。

翻译自: https://www.experts-exchange.com/articles/17485/SCSS-Make-Writing-CSS-Fun-Again.html

使用scss-to-css