sass注释类型_使用CodePen学习Sass，第五部分：注释和缩小

sass注释类型

Standard CSS employs just one form of comment. Borrowing a syntax from JavaScript, Sass introduces one more, creating a very powerful and useful variant.

标准CSS仅采用一种注释形式 。 Sass从JavaScript借用了一种语法，另外引入了Sass，创建了一个非常强大且有用的变体。

As you know, standard CSS uses the multiline /* … */ format. CSS declarations inside a comment syntax will be ignored by the browser:

如您所知，标准CSS使用多行/* … */格式。 浏览器将忽略注释语法中CSS声明：

body {
  /* border: 2px solid; -- this CSS will be ignored */
  background: red; 
}

More commonly, this form of CSS comment is used to leave notes during development:

更常见的是，这种形式CSS注释用于在开发过程中留下注释：

html { 
	box-sizing: border-box;
} 
*, *:before, *:after {
	box-sizing: inherit;
}
.box-reset {   
	/* resets an element to use standard box-sizing */   
	box-sizing: content-box; 
}

You’ll usually want the second kind of informational comment to remain in your stylesheet, but not the first kind. Sass allows for this distinction by using a // single line comment syntax:

您通常会希望第二种信息性注释保留在样式表中，而不是第一类。 Sass通过使用//单行注释语法来实现这种区分：

html {
	box-sizing: border-box;
} 
html *, html *:before, html *:after { 
	box-sizing: inherit;
}
.box-reset {   
	/* this comment will be retained in the Sass-generated stylesheet */   
	box-sizing: content-box; 
}
body {
	//  border: 2px solid; -- this line will be removed from the stylesheet
background: red; 
}

This makes it easy distinguish between testing CSS, which may be added, removed and re-added at any time, and development commentary. Multiline comments will remain in your final stylesheet, but // single-line comments will be left out; of course, all of the original content and formatting will remain in your .scss file. You’ll see this same behaviour in work exported from CodePen.

这样可以轻松地区分可以随时添加，删除和重新添加的测试 CSS与开发注释之间的区别。 多行注释将保留在最终样式表中，但//单行注释将被忽略； 当然，所有原始内容和格式都将保留在您的.scss文件中。 在从CodePen导出的工作中，您将看到相同的行为。

整理步骤 (Finishing Steps)

The final stylesheet for your site should be as small as possible, in order to load as quickly as possible; this means removing all comments, together with carriage returns, unnecessary spaces and semicolons. Doing so will reduce CSS that looks like this:

您网站的最终样式表应尽可能小，以便尽快加载； 这意味着删除所有注释，以及回车，不必要的空格和分号。 这样做将减少如下所示CSS：

// general resets
html {
	box-sizing: border-box;
}
html * {
	box-sizing: inherit;
}
figure {
	margin: 0;
	text-align:center;
}

To this:

对此：

html{box-sizing:border-box}html *{box-sizing:inherit}figure{margin:0;text-align:center}

Unfortunately, CodePen doesn’t yet have this feature built into its export function. But if you’re running it from the command line, Sass has an option to do so: sass --watch a.scss:a.css --style compressed

不幸的是，CodePen尚未在其导出功能中内置此功能。 但是，如果从命令行运行它，Sass可以选择这样做： sass --watch a.scss：a.css --style compression

Alternatively, in Codekit, my build manager of choice:

或者，在Codekit中 ，我选择的构建管理器：

上课 (Leave A Lesson)

While plugins like PrettyPrint will cleanup compressed code from a live site, it can be very useful developer learning opportunity to see the original, untouched CSS for a site. Recently Chris Coyier compiled together a list of companies that expose and document their CSS; there’s also Harry Robert’s shame.css initiative.

尽管类似PrettyPrint的插件会从实时站点中清除压缩的代码，但是这对于开发人员来说是非常有用的学习机会，可以看到站点的原始CSS。 最近Chris Coyier汇总了暴露和记录CSS的公司清单 ; 还有Harry Harry的shame.css倡议 。

I’d encourage every developer to leave a folder of the site’s original uncompressed .scss files available to curious developers. These files should be documented as extensively as possible, using the comment syntax I’ve described above. Obviously this work will not actually be used to render any page on the site, or even prominently linked to, but should exist as part of a colophon.

我鼓励每个开发人员为好奇的开发人员保留一个网站原始未压缩的.scss文件的文件夹。 这些文件应使用上文所述的注释语法尽可能详尽地记录下来。 显然，这项工作实际上将不会用于呈现网站上的任何页面，甚至不会显眼地链接到该页面，而应作为colophon的一部分存在。

Before finishing up this introductory series on Sass there’s one more feature that should not go unnoticed: the power of CSS preprocessor @import functions, which I’ll turn to next.

在完成有关Sass的介绍性系列文章之前，还有一个不容忽视的功能：CSS预处理器@import函数的功能，我将转向下一个功能。

翻译自: https://thenewcode.com/983/Learning-Sass-With-CodePen-Part-Five-Comments-and-Minification

sass注释类型