8个技巧，可以帮助您从SASS中获得最佳状态

CSS预处理器 Sass承诺句法上很棒的样式表。 正确使用的是，它可以促进可扩展和干燥（不要重复自己）CSS的CSS。 但是，滥用会导致较大的文件和冗余代码。本指南提供了最大程度地发挥SASS潜力的技巧。

钥匙要点：

• 项目结构：从一开始就有效地组织了您的SASS项目。 使用部分将CSS模块化并通过主SASS文件导入。> >
>变量用法：
• 为SASS变量建立一个一致的命名约定，以提高可读性和可重复性。> 混合蛋白节制：避免过度使用Mixins，它可以复制代码并夸大您的CSS。 保留混合素，以便需要参数生成样式变化的情况。
>
• 占位持有人的能力：利用占位符的重复样式而无需代码重复，促进干燥的CSS。
• 1。构建您的SASS项目：
正确的项目结构至关重要。 部分（以下划线“ _”前缀为前缀）将CSS分解为可管理的块，从而提高了可维护性。 主SASS文件（例如，

）导入这些部分。

> 示例文件夹结构：

global.scss示例：

<code>vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss</code>

2。有效的SASS可变用法：

global.scss

虽然简单，但变量通常被滥用。 范围内的命名约定是理解和重复使用的关键。

<code>/* VENDOR - External files and default fallbacks */
@import 'vendor/_normalize.scss';

/* BASE - Variables, mixins, and placeholders */
@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';

/* FRAMEWORK - Layout and structure */
@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';

/* MODULES - Reusable components */
@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';</code>

>

>避免在变量名称中避免模糊

。

>遵守命名约定

（例如，BEM，OOCSS）。
• >合理的变量使用。
• 好的例子：
• 不良示例：

3。最小化混合蛋白的用法：

<code>$orange: #ffa600;
$grey: #f3f3f3;
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;</code>

> Mixins对于代码重复使用非常有力，但是过度使用导致重复的代码和肿的CSS。 仅在需要参数创建变体时才使用Mixins。

好示例：

<code>$link: #ffa600;
$listStyle: none;
$radius: 5px;</code>

不好的示例：（更好地作为占位符）

4。利用占位符：

与Mixins相比，

<code>@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;
}</code>

占位符（

）提供了出色的可重复使用性，从而产生了无代码重复的干燥CSS。

>示例：

<code>@mixin cta-button {
    padding: 10px;
    // ...other styles...
}</code>

5。计算的功能：

SASS功能执行计算和返回值，可用于范围内的计算。 例如，计算百分比宽度：%name

6。有组织的代码：

<code>%bg-image {
    width: 100%;
    // ...other styles...
}

.image-one { @extend %bg-image; background-image: url(/img/image-one.jpg); }
.image-two { @extend %bg-image; background-image: url(/img/image-two.jpg); }</code>

>组混合素，功能，占位符和变量各自的部分文件。 将站点范围的元素（变量等）保存在

>文件夹中。>

7。限制嵌套：

过多的嵌套会导致复杂的，特异性的CSS。 保持嵌套最多三个级别。

8。简单：

优先考虑简单性。 SASS应该改善而不是复杂，CSS。 避免不必要的变量，功能或混合素。

>

结论：

这些技巧促进了有效且可维护的SASS。 请记住，最佳实践的发展，因此持续学习是关键。

>

常见问题（常见问题解答）：（原始文本中已经覆盖了这些问题，所以我会省略它们以避免冗余。原始常见问题解答很棒。）

以上是8个技巧，可以帮助您从SASS中获得最佳状态的详细内容。更多信息请关注PHP中文网其他相关文章！