如何写美丽的萨斯

>干净，美丽的代码应该是每个项目的目标。如果其他开发人员需要进行更改，他们应该能够阅读那里的内容并理解它。可读代码是可维护性的核心，而迈向可读代码的第一步是一个很好的衬里。就像一个良好的拼写检查器一样，Linter应该捕获您的所有小错别字和格式化错误，因此不会让其他人这样做。这是与其他开发人员进行良好代码审查之前的第一道防线。

> Sass有几个出色的衬里：SCSS-lint是Ruby Gem，而较新的Sasslint和Stylelint是NPM节点的NPM软件包。两者都允许您为项目配置伸长规则，例如最大嵌套级别，小数零以领先零以及块中的属性组织。您甚至可以根据需要创建自己的规则。

观看Atoz：Sass 通过信函学习萨斯 观看此课程 观看此课程 SASS指南非常方便组织您的项目，设置衬里，建立命名惯​​例等等。由雨果（Hugo）撰写，这是您代码的自以为是的式指导；它可能并非全部适合您，但这是一个开始的好地方。

>

如果您使用的是SASS变量，功能和Mixins，建议您记录它们的工作方式。工具包的作者会发现这一点尤其重要，但是任何在项目中内置广泛工具的人也应该考虑为团队的文档。 Hugo的另一个很棒的工具是Sassdoc，它是一个NPM软件包，它可以解析您的SASS评论，并在您的文档中生成一个漂亮的静态网站。

>这是我们在Accoutrement-Colors中的TINT（..）功能的SASSDOC评论。它以一般描述开始，然后明确记录每个参数和预期的返回：>

使用默认主题（从中可以选择几个主题，或者您可以设计自己的），sassdoc将其评论转换为静态网站，如下所示。

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</args></function-name></span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

如果您使用功能或混合素进行任何复杂的事情，

测试也很重要。这是确保您的代码不会在您进行调整时不会破坏您的代码的好方法，但这也可能有助于开发新功能。如果首先编写测试，您将确切知道该功能在测试通过时是否正常工作！>

true是真正从您的单位测试工具包，用纯Sass编写，以便在任何地方都可以编译SASS。核心测试发生在断言函数中：断言 - 等于（..），断言（..），assert-true（..）和assert-false（..）。这些被组织为测试，可以分组为测试模块。这是真实测试的一个例子 色调（..）函数：

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</args></function-name></span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

编译后，True将输出带有详细结果的CSS注释，并在任何测试失败时在控制台中警告您：

<span>@include test-module('Tint [function]') {
</span>  <span>@include test('Adjusts the tint of a color') {
</span>    <span>@include assert-equal(
</span>      <span>tint('primary', 25%),
</span>      <span>mix(#fff, color('primary'), 25%),
</span>      <span>'Returns a color mixed with white at a given weight.');
</span>  <span>}
</span><span>}
</span>

在此示例中，两个测试“输出到CSS”是什么意思？这些测试未显示，但它们正在测试混合蛋白输出。使用纯CSS，True只能确认功能测试的结果，因此Mixin测试仅输出到可以手动比较的CSS（总）或使用CSS Parser（更好！）。为了使这一简单，真正的融合与摩卡（Mocha）等JavaScript测试跑步者，并具有由Scott Davis编写的Ruby命令行界面。要么将完全解析CSS输出，包括来自Mixins的输出，并为您提供功能和Mixin测试的完整结果：

>

/* # Module: Tint [function] */
/* ------------------------- */
/* Test: Adjusts the tint of a color */
/*   ✔ Returns a color mixed with white at a given weight. */

/* … */

/* # SUMMARY ---------- */
/* 16 Tests: */
/*  - 14 Passed */
/*  - 0 Failed */
/*  - 2 Output to CSS */
/* -------------------- */

经常询问有关编写美丽的Sass

的问题

>我如何使用SASS创建嵌套规则？

SASS提供了独特的功能，可让您以遵循HTML相同的视觉层次结构的方式嵌套CSS选择器。要创建嵌套规则，您只需将一个选择器放在另一个选择中即可。然后将内部选择器应用于外部选择器中嵌套的位置。这可以使您的代码清洁器更容易理解。例如：

nav { ul { padding：0;
list-style：none;
}


{display：inline-block; }

a {
display：block;
填充：6px 12px;
> text-decoration：none;
}
}
} }

使用SASS变量的好处？

SASS变量使您可以存储想要在样式表中重复使用的信息。您可以存储诸如颜色，字体堆栈或任何CSS值之类的东西，您认为自己想重复使用。 Sass使用$符号将某些变量变量。这是一个示例：

$ font-stack：helvetica，sans-serif;
$ priendar-color：＃333;


hody {
font：100％$ font-- stack;
颜色：$ priendar-color;
}

>我如何将sass用于更好的代码组织？

对于代码组织可能非常有用。您可以创建持有CSS代码段的部分SASS文件。这些文件以下划线开头，可以导入到其他SASS文件中。这使您可以对CSS进行模块化并帮助保持更易于维护。

>如何使用SASS创建复杂的功能？

SASS通过提供一组内置功能（例如调整颜色或进行复杂的数学操作）来支持功能的使用。您还可以使用@Function指令定义自己的功能。这是一个简单函数的示例：

@function double（$ number）{
@return $ number * 2;
}

.box {width {width：double（5px） ）； }

>我如何使用SASS创建Mixins？ 。它们是使用@mixin指令定义的。这是一个示例：

@mixin transform（$ property）{
-webkit -transform：$ property;
-MS -ms -transform：$ property;
transform：$ property：$ property;
}

.box {@include transform（rotate（30deg））; }

>如何使用SASS创建扩展/继承？

> SASS中的@Extend Directive允许一个选择器继承另一个选择器的样式。这是一个示例：

.message {

border：1px solid #ccc;
padding：10px;
颜色：＃333;
}
}



.success {
@extend .message;
border-color：green;
}

我如何使用sass创建运营商？

-， *， /， 和 ％。当使用尺寸和颜色时，这可能特别有用。以下是一个示例：

.container {width：100％; 。 w>宽度：300px / 960px * 100％;
}

>
>我如何使用SASS来创建控制指令？

SASS支持库的控制指令，包括@If， @ @ @ @ @ @ @ @ @for ， @each和@while。这些可用于创建使用较少代码的复杂样式。这是一个示例：

@for $ i从1到3 {
.item-＃{$ i} {width：2em * $ i; }
}

>如何使用SASS创建注释？ / * * /样式注释保留在CSS输出中，其中AS // AS样式注释不包含在CSS输出中。以下是一个示例：

/ *此注释是
*长的几行。
*，因为它使用CSS注释语法，
*它将出现在CSS输出中。 */
身体{颜色：黑色; }

//这些注释不会出现在CSS输出中。 //它们对于代码文档非常有用。 a {color：green; }

>我如何使用SASS创建插值？

在SASS中的插值使您可以将变量的值插入字符串中。它是使用＃{}语法完成的。这是一个示例：

$ name：foo;
$ attr：border; p。＃{$ name} {
＃{$ attr} -color：blue;
> }

以上是如何写美丽的萨斯的详细内容。更多信息请关注PHP中文网其他相关文章！