sass在css3的扩展_使用CodePen学习Sass，第三​​部分：扩展

sass在css3的扩展

As sites become complex information systems, the technologies we use to build them must grow and adapt. One of the more recent approaches to CSS development is object-oriented CSS (OOCSS), a methodology that is helped immensely by the power of @extend in Sass. To understand one is to understand the purpose of the other, so we’ll start with a very brief explanation of the various development methodologies:

随着站点成为复杂的信息系统，我们用于构建站点的技术必须不断发展和适应。 CSS开发的最新方法之一是面向对象CSS( OOCSS )，该方法在Sass中通过@extend的强大功能得到了极大的帮助。 理解一个就是理解另一个的目的，因此我们将从对各种开发方法的非常简短的解释开始：

OOCSS, first introduced by Nicole Sullivan, is one of a cluster of approaches that seek to impose modular control over site presentation; similar methods include SmaCSS, Atomic CSS and BEM. All of them reply on the fact that any HTML element can take multiple CSS classes. As a simple example, let’s use a typical class for article promos on a website:

OOCSS由Nicole Sullivan首次提出，是试图对网站展示实施模块化控制的一系列方法之一； 类似的方法包括SmaCSS，Atomic CSS和BEM。 他们都回答说， 任何HTML元素都可以采用多个CSS类。 作为一个简单的示例，让我们使用一个典型的类在网站上进行商品促销：

article.promo {
	border: 1px solid #333;
	border-radius: 2px;
	overflow: hidden;
}

This defines the root appearance of basic article promotional blocks on a web page. Let’s also assume that we’d like to have at least one article with a special appearance to make it stand out: something for breaking news, perhaps. Traditional CSS approaches would require us to duplicate the base styles of the .promo class in the new class of .breaking before adding anything new:

这定义了基本商品促销块在网页上的根外观。 我们还假设我们希望至少有一篇文章具有特殊的外观，以使其与众不同：也许是突发新闻。 传统CSS方法要求我们在添加新.breaking之前在新的.promo类中复制.promo类的基本样式：

article.breaking {
	border: 1px solid #333;
	border-radius: 2px;
	overflow: hidden;
	background: hsl(20,80%,80%);
}

There’s a very real problem with this approach: if we decide to change the presentational rules for the .promo class, we’d have to remember to also change the .breaking class, as well as any other that duplicated the base rules of .promo.

这种方法存在一个非常实际的问题：如果我们决定更改.promo类的表示规则，则必须记住也要更改.breaking类以及其他任何与.promo基本规则重复的.promo 。

Alternatively, we could break up the classes and write them this way instead:

另外，我们可以分解类，然后以这种方式编写它们：

.blockborder {
	border: 1px solid #333;
	border-radius: 2px;
	overflow: hidden;
}
.blockhighlight {
	background: hsl(20,80%,80%);
}

Note that I’ve renamed the classes to be both more generic and have more descriptive names; one of the principles of modular CSS is that classes should be treated as components that are infinitely reusable. By removing the element selector at the start of each and treating each component as a modular piece (a block of content, rather than a specific article) we create CSS components that are far more adaptive.

请注意，我已经将这些类重命名为更通用， 并且具有更多描述性名称。 模块化CSS的原理之一是类应被视为可无限重用的组件。 通过在每个元素的开头删除元素选择器，并将每个组件视为模块块(内容块，而不是特定的文章)，我们创建了更具适应性CSS组件。

Using these styles, an article we want to be “normal” would have the .blockborder class applied:

使用这些样式，我们希望成为“普通”的文章将应用.blockborder类：

<article class="blockborder">…

For a breaking news article, we’d apply both the .blockborder and .blockhighlight classes:.

对于重大新闻，我们将同时应用.blockborder和.blockhighlight类：。

<article class="blockborder blockhighlight">…

The result for the second article is that the two classes would combine, producing something like the appearance of the center block below:

第二篇文章的结果是，这两个类将结合在一起，产生类似于下面中心块的外观：

四出绅士 (Gentleman of Four Outs)

When a vulgar, blustering fellow asserts that he is a gentleman, the retort generally is, “Yes, a Gentleman Of Four Outs”—that is, without wit, without money, without credit, and without manners.

当一个粗鲁，粗暴的家伙断言自己是个绅士时，反驳通常是“是的，四个绅士的绅士”，也就是说，没有机智，没有钱，没有信誉，没有礼貌。

猎人 (Pot-hunter)

A man who gives his time up to rowing or punting, or any sort of match in order to win the “pewters” which are given as prizes. The term is now much used in aquatic and athletic circles; and is applied, in a derogatory sense, to men of good quality who enter themselves in small races they are almost sure to win, and thus deprive the juniors of small trophies which should be above the attention of champions, though valuable to beginners. Also an unwelcome guest, who manages to be just in time for dinner.

为了赢得“ pepeers”(赢得奖品)而付出时间的人，他会花时间进行划船或打洞或任何形式的比赛。 现在，该术语在水生和运动界得到广泛使用。 并以贬义的方式应用于那些参加小型比赛的高素质男子，他们几乎肯定会获胜，因此剥夺了初中级选手的小奖杯，尽管对初学者来说很有价值，但他们不应受到冠军的重视。 也是不受欢迎的客人，他设法准时吃饭。

绘制长弓 (Draw The Long Bow)

To tell extravagant stories, to exaggerate overmuch; same as “throw the hatchet.” From the extremely wonderful stories which used to be told of the Norman archers, and more subsequently of Indians’ skill with the tomahawk.

讲奢侈的故事，夸大过多； 就像“扔柴刀”一样。 从过去曾经讲过的关于诺曼弓箭手的极其奇妙的故事，以及后来有关印第安人使用战斧的技巧的更多故事中得知。

This allows us to “mix and match” CSS classes to create appearance rules that are visually consistent. But as you can imagine, taking a strongly modular approach to site stylesheet development creates long lists of classes that need to be applied in order to correctly style page elements:

这使我们可以“混合和匹配” CSS类来创建外观上一致的外观规则。 但您可以想象，采用高度模块化的方法来开发网站样式表会创建一长串类，这些类需要应用才能正确设置页面元素的样式：

<article class="blockborder blockhighlight twoeighthcolumn mediumgutter">…

… which are difficult for developers to remember or apply correctly.

……这对于开发人员来说很难记住或正确应用。

使用@extend简化模块化开发 (Simplifying Modular Development with @extend)

Rather than long lists of classes that only become interrelated when they are applied to HTML, we can create strong interdependence of classes in Sass using @extend.

我们可以使用@extend 在Sass中创建强大的类相互依赖性，而不是仅在将它们应用于HTML时才变得相互关联的@extend 类 。

Returning to our earlier example, write .blockborder as normal in CodePen (after setting it up for Sass, as shown in the first article):

回到我们前面的示例，在CodePen中正常编写.blockborder (将其设置为Sass之后，如第一篇文章所示)：

.blockborder {
	border: 1px solid #333;
	border-radius: 2px;
	overflow: hidden;
}

We want the .blockhighlight class to inherit everything in .blockborder and then extend it, so we’ll write the second class as follows:

我们希望.blockhighlight类继承 .blockborder所有.blockborder ，然后对其进行扩展 ，因此我们将编写第二个类，如下所示：

.blockhighlight {
	@extend .blockborder;
	background: hsl(20,80%,80%);
}

The CSS generated by Sass returns to the first example, meaning that we can style a breaking news article with just one class:

Sass生成CSS返回到第一个示例，这意味着我们可以仅用一个类来设置突发新闻文章的样式：

<article class="blockhighlight">…

But because Sass writes the CSS interdependently using @extend, changing the “base” CSS of .blockborder immediately changes the appearance of .blockhighlight, making maintenance of your CSS far easier. Try doing so yourself on the CodePen example.

但由于萨斯相互依赖使用写CSS @extend ，改变的“基地” CSS .blockborder立即改变外观.blockhighlight ，使得维护你CSS的容易得多。 尝试自己在CodePen示例上这样做。

一些技巧和窍门 (A Few Tricks & Gotchas)

@extend is very powerful; it can even create new classes that inherit from nested selectors. However, you cannot extend from a declaration outside a media query to one inside one:

@extend非常强大； 它甚至可以创建从嵌套选择器继承的新类。 但是，您不能从媒体查询外部的声明扩展到媒体查询内部的声明：

.featured {
	…
}
@media all and (max-width: 750px) {
	.smallstuff { 
		@extend .featured;
		// this won’t work
	}
}

Be sure to double-check the CSS created by Sass: “chaining” selectors with @extend is very useful, but if used poorly it can inflate the size of stylesheets dramatically. Employed in excess, extending selectors can cause maintenance problems, due to the fact you can can @extend an @extend, creating long interdependent chains that are difficult to track down or understand.

一定要仔细检查Sass创建CSS：使用@extend “链接”选择器非常有用，但是如果使用不当，则会大大增加样式表的大小。 由于您可以@extend @extend ，因此使用过多的扩展选择器可能会导致维护问题，从而造成难以跟踪或理解的长的相互依赖链。

The styles generated by Sass @extend will always work, but we also want them to perform well.

Sass @extend生成的样式将始终有效 ，但我们也希望它们表现良好。

CSS中的本机@extend？ (Native @extend In CSS?)

CSS continues to take proven features from preprocessors and fold them into itself: variables, and now a proposal for @extend.

CSS继续从预处理器中获取经过验证的功能，并将其折叠到自身中：变量，现在是@extend的建议。

Right now, native @extend in CSS is only an “interesting idea”: even if it is adopted in the official specification, it will be years before it could be used in production. In the meantime, preprocessors like Sass are an excellent way of using this powerful feature in your code.

目前，CSS中的本机@extend只是一个“有趣的主意” ：即使在正式规范中采用了它，也要在生产中使用它还需要很多年。 同时，像Sass这样的预处理器是在代码中使用此强大功能的绝佳方法。

翻译自: https://thenewcode.com/981/Learning-Sass-with-CodePen-Part-Three-extend

sass在css3的扩展