Question

我正在使用Sass处理JS / CSS库。我想为我的用户提供将Sass直接导入他们的项目并自行编译的选项，可以选择修改一些改变包含的CSS动画行为的变量。

但是，我对Sass比较陌生，我不知道该怎么做。 Sass用户通常希望如何导入和修改Sass变量（如Bootstrap或Bulma）？我应该使用!default使用的DECLARE @dates nvarchar(max) SELECT @dates = STUFF( ( select distinct ',[' + CAST(cast([date] as date) as varchar(10)) + ']' FROM [dbo].[DateTable]('20160801','20160831') for xml path('') ), 1,1,'') DECLARE @SQL nvarchar(max) SELECT @SQL = N' select * from ( select * from EventsTable ) Data PIVOT ( MAX(Activity) FOR DateScheduled IN ( ' + @dates + ' ) ) PivotTable ' exec sp_executesql @SQL关键字吗？

Answer 1

你应该尝试理解像bootstrap或Foundation这样的样式框架。

示例可在plunker找到。

以下是项目的基本结构。

animation.scss // Your library
variables.scss // User custom variables
main.scss // User main scss file

让我们来看看这些文件。

Animation.scss包含您需要的所有默认变量和所有类。请注意，这些类由mixins包装，以允许用户单独导入它们。此文件中的所有变量都有一个标志!default，以允许用户覆盖它们。有一个简单的类animation，它为元素添加了一个颜色属性。

$color: green !default;

@mixin animation() {
  .animation {
    color: $color;
  }
}

Variables.scss包含用户自定义变量。他们没有任何旗帜。

$color: red; // Note, there is no !default flag

Main.scss导入所有文件并包含一些库组件。例如，它导入名为animation的组件。

// Import library
@import 'animation.scss';

// Override library variables
@import 'variables.scss';

// Import components
@include animation();

<强>摘要

默认情况下，您的库的变量$color的值为green。用户将其覆盖为red并包含组件animation。因此，具有类animation的任何元素都应该具有红色。

如何设计一个允许用户修改变量的Sass动画库？

1 个答案: