Sass 在SCSS中迭代主题变量文件_Sass_Compass Sass_Compass

Sass 在SCSS中迭代主题变量文件

sass

Sass 在SCSS中迭代主题变量文件,sass,compass-sass,compass,Sass,Compass Sass,Compass,我想使用主题设置文件为WordPress主题创建不同的css主题。设置（简化）如下所示： /themes/_theme1.scss /themes/_theme2.scss /components/_file1.scss /components/_file2.scss /theme.scss 其思想是通过向文档主体添加一个类，如.theme-theme1或.theme-theme2来实现轻松的主题化。在文件\u theme#.scss中，我想定义文本颜色、字体大小等变量。在\u文件#.scss

我想使用主题设置文件为WordPress主题创建不同的css主题。设置（简化）如下所示：

/themes/_theme1.scss
/themes/_theme2.scss
/components/_file1.scss
/components/_file2.scss
/theme.scss

其思想是通过向文档主体添加一个类，如

.theme-theme1

或

.theme-theme2

来实现轻松的主题化。在文件

\u theme#.scss

中，我想定义文本颜色、字体大小等变量。在

\u文件#.scss

中定义了实际的样式

我现在的问题是，如何在填充files.scs时迭代主题设置文件

示例想法、背景颜色：

body {

###foreach themefile###
&.theme# {
    background-color: $background-color;
}
###/foreach###

}

我知道如何在生成的CSS文件中只有一个主题可用，但我想在生成的CSS中提供所有主题。请随意询问更多细节，因为我不确定我的解释是否正确

有没有办法通过某种foreach循环通过主题文件中的变量来创建此样式表，或者必须使用每个主题文件的额外scss规则来创建此样式表？

这在某种程度上是可能的，可以使用

@import

和

@mixin

的组合来生成样式。此方法应产生最少的重复代码

下面是我们将如何设置文件

- scss
  - themes
    - _theme1.scss
    - _theme2.scss
  - _theme.scss
  - styles.scss

一些文件上的

\uuu

前缀阻止它们被编译成CSS以保持构建的整洁。现在让我们看一下文件的内容：

主题1.scss

$theme-name: 'theme1';

$primary-color: red;
$primary-font-size: 24px;

$theme-name: 'theme2';

$primary-color: blue;
$primary-font-size: 12px;

@mixin themestyle() {
  body.#{$theme-name} {
    p {
      color: $primary-color;
      font-size: $primary-font-size;
    }

    .bordered {
      border: 3px solid $primary-color;
    }
  }
}

@import 'themes/theme';

/* Theme 1 Styles */
@import 'themes/theme1';
@include themestyles();

/* Theme 2 Styles */
@import 'themes/theme2';
@include themestyles();

主题2.scss

$theme-name: 'theme1';

$primary-color: red;
$primary-font-size: 24px;

$theme-name: 'theme2';

$primary-color: blue;
$primary-font-size: 12px;

@mixin themestyle() {
  body.#{$theme-name} {
    p {
      color: $primary-color;
      font-size: $primary-font-size;
    }

    .bordered {
      border: 3px solid $primary-color;
    }
  }
}

@import 'themes/theme';

/* Theme 1 Styles */
@import 'themes/theme1';
@include themestyles();

/* Theme 2 Styles */
@import 'themes/theme2';
@include themestyles();

这是一个过于简单的例子，但应该给出基本的想法。每个主题文件将只包含变量

\u theme.scss

$theme-name: 'theme1';

$primary-color: red;
$primary-font-size: 24px;

$theme-name: 'theme2';

$primary-color: blue;
$primary-font-size: 12px;

@mixin themestyle() {
  body.#{$theme-name} {
    p {
      color: $primary-color;
      font-size: $primary-font-size;
    }

    .bordered {
      border: 3px solid $primary-color;
    }
  }
}

@import 'themes/theme';

/* Theme 1 Styles */
@import 'themes/theme1';
@include themestyles();

/* Theme 2 Styles */
@import 'themes/theme2';
@include themestyles();

themestyle

mixin将使用

/themes/\u theme*.scss

文件中的变量，包含每个主题的所有样式。

body.{$theme name}

将创建一个类似于

body.theme1

或

body.theme2

的选择器，具体取决于

$theme name

变量的当前值

在这个演示中，我在一个

标签上设计样式，但这可以很容易地扩展到站点的所有元素/选择器。需要记住的重要一点是，所有样式都必须位于

主体内。#{$theme name}

选择器

现在是最后一部分，也是最不重要的一部分。

styles.scss

文件将导入每个主题文件，然后调用

themestyle

mixin为每个主题生成样式

样式。scss

$theme-name: 'theme1';

$primary-color: red;
$primary-font-size: 24px;

$theme-name: 'theme2';

$primary-color: blue;
$primary-font-size: 12px;

@mixin themestyle() {
  body.#{$theme-name} {
    p {
      color: $primary-color;
      font-size: $primary-font-size;
    }

    .bordered {
      border: 3px solid $primary-color;
    }
  }
}

@import 'themes/theme';

/* Theme 1 Styles */
@import 'themes/theme1';
@include themestyles();

/* Theme 2 Styles */
@import 'themes/theme2';
@include themestyles();

重复的

@import/@include

是必需的，因为在循环或mixin中不可能

@import

，或者这可以再优化一点

编译

styles.scs

后，输出将为：

/* Theme 1 Styles */
body.theme1 p {
  color: red;
  font-size: 24px; }
body.theme1 .bordered {
  border: 3px solid red; }

/* Theme 2 Styles */
body.theme2 p {
  color: blue;
  font-size: 12px; }
body.theme2 .bordered {
  border: 3px solid blue; }

这些主题现在可以通过向

主体

标记添加类来实现，如

或

下面是一个显示设置的示例。

这在某种程度上可以使用

@import

与

@mixin