vue 看sass版本_看看不同的Sass架构

vue 看sass版本

As the size and complexity of a project grows, you require some sort of logic to structure your Sass files. It helps to follow some agreed upon guidelines for creating files and folders when working in large teams and projects. Below is a review of some of the techniques in use today.

随着项目的规模和复杂性的增长，您需要某种逻辑来构造Sass文件。 在大型团队和项目中工作时，它有助于遵循一些公认的准则来创建文件和文件夹。 下面是当今使用的一些技术的回顾。

s子 (Bootstrap-sass)

Bootstrap’s intention is to be a UI library for web developers to quickly get off the ground. It is logical for them to group all variables in a single file and keep all the mixin logic hidden. Their Sass architecture mimics this idea. Each component gets its own Sass file and there’s a ./_variables.scss file, which allows you to control all the variables involved with your project.

Bootstrap的目的是成为Web开发人员可以快速起步的UI库。 对于他们来说，将所有变量分组到一个文件中并保留所有混合逻辑是合乎逻辑的。 他们的Sass体系结构模仿了这个想法。 每个组件都有自己的Sass文件，并且有一个./_variables.scss文件，该文件可让您控制项目所涉及的所有变量。

Bootstrap’s Sass architecture is unique in how it lays out its mixins. There’s a ./_mixins.scss file. This file imports all files from a mixins folder, which contains a separate file for every mixin used. Although button styles are defined in ./_buttons.scss, the mixins used for it are imported from ./_mixins.scss. This, in turn, imports the button mixins frommixins/_buttons.scss. Yo Dawg!

Bootstrap的Sass体系结构在布局其混合模块方面是独特的。 有一个./_mixins.scss文件。 该文件从mixins文件夹导入所有文件，该文件夹为每个使用的mixin包含一个单独的文件。 尽管按钮样式是在./_buttons.scss中定义的，但用于它的mixins是从./_mixins.scss中导入的。 反过来，这又从mixins/_buttons.scss导入按钮mixins。 哟道 ！

In addition to component-level mixins, the mixin folder also contains global mixins such as mixins/_border-radius.scss and mixins/_responsive-visibility.scss. Although bootstrap’s mixins are not overly complex, this architecture is better suited for a project where the mixins are really complex and require that they be broken down into smaller bits. Or in cases where you want to keep that logic hidden from visual styles of components. In conclusion, this architecture works best for Bootstrap but might not work for your sass project.

除了组件级的mixin外，mixin文件夹还包含全局mixin，例如mixins/_border-radius.scss和mixins/_responsive-visibility.scss 。 尽管bootstrap的mixin不太复杂，但是此体系结构更适