sass导入sass

sass导入sass

Sass creates Syntactically Awesome Style sheets, or at least thats what it is supposed to do.

Sass会创建语法很棒的样式表，或者至少就是它应该做的。

When used effectively, Sass helps to build scalable and DRY CSS. When used incorrectly however, Sass can actually increase file size and add unnecessary or duplicate code.

有效使用Sass可以帮助构建可扩展的DRY CSS。 但是，如果使用不正确，Sass实际上可以增加文件大小并添加不必要或重复的代码。

Below is a series of hints and tips to help you get the best out of Sass…

以下是一系列提示和技巧，可帮助您充分利用Sass。

1.构造你的无礼 (1. Structure Your Sass)

Getting your site structure correct from the beginning is vital for any new Sass project. Using partials allows you to break the CSS up into smaller more manageable blocks of code that are easier to maintain and develop.

从一开始就确保网站结构正确对于任何新的Sass项目都至关重要。 通过使用partials ，您可以将CSS分解为更易于管理和开发的更小巧的代码块。

Partial files are created using an underscore and are not output as separate CSS files. Each partial should be imported using a master Sass file (global.scss) in the root of the Sass folder.

部分文件使用下划线创建，不会作为单独CSS文件输出。 应该使用Sass文件夹根目录中的主Sass文件(global.scss)导入每个部分。

For example, here’s a sample folder structure to demonstrate this:

例如，这是一个示例文件夹结构来演示这一点：

vendor/ base/ | |-- _variables.scss |-- _mixins.scss |-- _placeholders.scss framework/ modules/ global.scss

This folder structure ensures the site is easy to work with, and add to. For example, new modules can easily be added to the module folder and then added to global.scss using @import.

这种文件夹结构可确保该站点易于使用和添加。 例如，可以轻松地将新模块添加到模块文件夹中，然后使用@import添加到global.scss中。

To demonstrate, here’s a sample global.scss file:

为了演示，这是一个示例global.scss文件：

/* VENDOR - Default fall-backs and external files. ========================================================================== */ @import 'vendor/_normalize.scss'; /* BASE - Base Variable file along with starting point Mixins and Placeholders. ========================================================================== */ @import 'base/_variables.scss'; @import 'base/_mixins.scss'; @import 'base/_placeholders.scss'; /* FRAMEWORK - Structure and layout files. ========================================================================== */ @import 'framework/_grid.scss'; @import 'framework/_breakpoints.scss'; @import 'framework/_layout.scss'; /* MODULES - Re-usable site elements. ========================================================================== */ @import 'modules/_buttons.scss'; @import 'modules/_lists.scss'; @import 'modules/_tabs.scss';

And as a side point, you might want to check out Hugo’s extensive post on Sass architecture for more tips in this area.

另外，您可能想查看Hugo关于Sass架构的大量文章，以获取该领域的更多技巧。

2.更有效地使用Sass变量 (2. Use Sass Variables More Effectively)

Variables are one of the more straightforward features of Sass but are still on occasion used incorrectly. Creating a site-wide naming convention is essential when working with Variables. Without one, they become harder to understand and re-use.

变量是Sass的更直接的功能之一，但有时仍然使用不正确。 使用变量时，创建站点范围的命名约定至关重要。 没有它们，它们将变得更难以理解和重复使用。

Here are some tips for creating useful variables:

以下是创建有用变量的一些技巧：

Don’t be to vague when naming your Variables.

命名变量时不要含糊。 Have and stick to a naming convention (Modular, BEM, etc.)

遵守命名约定(模块化，BEM等) Ensure the variable use is justified.

确保合理使用变量。

Here are some good examples:

这里有一些很好的例子：

$orange: #ffa600; $grey: #f3f3f3; $blue: #82d2e5; $link-primary: $orange; $link-secondary: $blue; $link-tertiary: $grey; $radius-button: 5px; $radius-tab: 5px;

And some bad examples:

还有一些不好的例子：

$link: #ffa600; $listStyle: none; $radius: 5px;

3.减少混合使用 (3. Reduce Mixin Usage)

A mixin is a great way to include sections of code multiple times within a site. However, including a mixin is the same as copying and pasting the styles throughout the CSS file. It creates a mass of duplicate code and can bloat your CSS file.

混合是在站点中多次包含代码段的好方法。 但是，包含mixin与在整个CSS文件中复制和粘贴样式相同。 它会创建大量重复的代码，并且会使您CSS文件膨胀。

A mixin therefore should only be used if an argument is present, to quickly create modified styles.

因此，只有在有参数存在时，才应使用mixin来快速创建修改后的样式。

Here’s an example:

这是一个例子：

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

This rounded-corner mixin can be used in any situation simply by changing the value of $arc, making it a worthwhile mixin:

只需更改$arc的值，就可以在任何情况下使用此rounded-corner混合功能：

.tab-button { @include rounded-corner(5px); } .cta-button { @include rounded-corner(8px); }

A bad example might look like this:

一个不好的例子可能看起来像这样：

@mixin cta-button { padding: 10px; color: #fff; background-color: red; font-size: 14px; width: 150px; margin: 5px 0; text-align: center; display: block; }

This mixin has no argument and would therefore be better written as a placeholder, which brings us to point 4.

这个mixin没有参数，因此最好写成占位符 ，这使我们指向第4点。

4.拥抱占位符 (4. Embrace Placeholders)

Unlike mixins, placeholders can be used multiple times without adding any duplicate code. This makes them a much friendlier option for outputting DRY CSS:

与混入不同， 占位符可以多次使用，而无需添加任何重复的代码。 这使它们成为输出DRY CSS的更友好的选择：

%bg-image { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .image-one { @extend %bg-image; background-image:url(/img/image-one.jpg"); } .image-two { @extend %bg-image; background-image:url(/img/image-two.jpg"); }

And the compiled CSS:

和编译后CSS：

.image-one, .image-two { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; } .image-one { background-image:url(/img/image-one.jpg") ; } .image-two { background-image:url(/img/image-two.jpg") ; }

The repeated code in the placeholder is output only once with only the unique styles being applied to the individual selectors. If unused, the placeholder styles are not output at all.

占位符中重复的代码仅输出一次，并且仅将唯一样式应用于各个选择器。 如果未使用，则不会输出占位符样式。

Tying in with point 3, placeholders can be used alongside mixins to reduce duplicate code and still keep the flexibility of a mixin…

与第3点配合，可以将占位符与mixin一起使用，以减少重复的代码，并仍然保持mixin的灵活性……

/* PLACEHOLDER ============================================= */ %btn { padding: 10px; color:#fff; curser: pointer; border: none; shadow: none; font-size: 14px; width: 150px; margin: 5px 0; text-align: center; display: block; } /* BUTTON MIXIN ============================================= */ @mixin btn-background($btn-background) { @extend %btn; background-color: $btn-background; &:hover { background-color: lighten($btn-background,10%); } } /* BUTTONS ============================================= */ .cta-btn { @include btn-background(green); } .main-btn { @include btn-background(orange); } .info-btn { @include btn-background(blue); }

5.使用函数进行计算 (5. Use Functions for Calculations)

Functions are used to perform calculations. A Sass function does not output any CSS. Instead, it returns a value that can be used in the CSS. This is useful for calculations that will be made throughout the site.

函数用于执行计算。 Sass函数不会输出任何CSS。 而是返回一个可以在CSS中使用的值。 这对于将在整个站点进行的计算非常有用。

For example, functions are useful for calculating the percentage width of a given element:

例如，函数对于计算给定元素的百分比宽度非常有用：

@function calculate-width ($col-span) { @return 100% / $col-span } .span-two { width: calculate-width(2); // spans 2 columns, width = 50% } .span-three { width: calculate-width(3); // spans 3 columns, width = 33.3% }

6.订购工作 (6. Order Your Work)

Place all mixins, functions, placeholders and variables in their relevant partial file. Keeping blocks of code together will ensure they are easy to edit and reuse in the future.

将所有混入，函数，占位符和变量放在其相关的部分文件中。 将代码块保持在一起将确保将来易于编辑和重用它们。

Site-wide elements should be kept together in a base folder. The base folder should contain global variables such as fonts and colour schemes:

站点范围内的元素应放在一个基本文件夹中。 基本文件夹应包含全局变量，例如字体和配色方案：

$font-primary: 'Roboto', sans-serif; $font-secondary: Arial, Helvetica, sans-serif; $color-primary: $orange; $color-secondary: $blue; $color-tertiary: $grey;

Module-specific mixins, functions, and variables should be kept within the correct module’s partial file:

特定于模块的混合，函数和变量应保存在正确的模块的部分文件中：

$tab-radius: 5px; $tab-color: $grey;

7.限制嵌套 (7. Limit Nesting)

Overusing nested rules in Sass can cause a lot of issues, from complex code to over-specificity and too much reliance on the HTML structure of a page. These things can cause issues further down the line and potentially increase the need for the inclusion of !important, which should generally be avoided.

过度使用Sass中的嵌套规则可能会导致很多问题，从复杂的代码到过度规范，以及对页面HTML结构的过度依赖。 这些事情可能会导致问题进一步发展，并可能增加对!important的包含的需求，通常应避免这种情况。

Here are some golden rules for nesting:

以下是嵌套的一些黄金法则：

Never go more then 3 levels deep.

永远不要超过3个级别。 Ensure the CSS output is clean and reusable.

确保CSS输出干净且可重复使用。 Use nesting when it makes sense to, not as a default option.

在有意义的情况下使用嵌套，而不是将其作为默认选项。

8.保持简单 (8. Keep Things Simple)

The concluding point I’ll make in this post is to keep things as simple as possible. The purpose of Sass is to write cleaner more manageable CSS. Before creating any new mixins, variables, or functions, ensure that their presence will enhance development and not overcomplicate things. All Sass features are useful when used in the correct situations and in moderation.

我将在本文中得出的结论是使事情尽可能简单。 Sass的目的是编写更易管理CSS。 在创建任何新的mixin，变量或函数之前，请确保它们的存在将促进开发并且不会使事情复杂化。 在正确的情况下和节制地使用Sass的所有功能都是有用的。

Creating an endless list of variables without clear usage, or a complex function that is difficult to understand for anyone other than the author is not the intention and will not aid development or produce DRY CSS.

创建一个无穷无尽的变量列表(没有明确的用法)，或者创建一个复杂的函数(除了作者以外的任何人都难以理解)不是要这样做的目的，也不会帮助开发或生产DRY CSS。

结论 (Conclusion)

That’s it for this list of Sass tips. You might not agree with all of these. Sass is still a fairly new technology so we’re continuing to learn new best practices with it. If you have your own suggestions, feel free to offer a comment.

这就是Sass技巧列表。 您可能不同意所有这些。 Sass仍然是一种相当新的技术，因此我们将继续学习它的新最佳实践。 如果您有自己的建议，请随时发表评论。

翻译自: https://www.sitepoint.com/8-tips-help-get-best-sass/

sass导入sass