遍历SCSS中的主题变量文件 [英] Iterate over theme-variable files in SCSS

问题描述

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

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

该想法是通过向文档正文中添加一个类（如 .theme-theme1 或）来实现轻松主题化。 theme-theme2 。在文件 _theme＃.scss 中，我想定义诸如文本颜色，字体大小等变量。在 _file＃.scss 中定义了实际样式。

我现在的问题是，如何遍历主题设置文件，同时填充files.scss。

示例提示，背景色：

  body {
 
 ### foreach主题文件### 
& .theme＃{
 background-color：$ background-color; 
} 
 ### / foreach ### 
 
} 
  

我知道如何在结果CSS文件中只有一个主题可用的情况下执行此操作，但是我想在结果CSS中使所有主题可用。随意询问更多详细信息，因为我不确定我是否解释正确。

有没有一种方法可以通过主题变量通过某种foreach循环来创建此样式表

解决方案

这是有点可以使用 @import 与 @mixin 的组合来生成样式。此方法应产生最少的重复代码。

这是我们设置文件的方式。

 -scss 
-主题
-_theme1.scss 
-_theme2.scss 
-_theme.scss 
-styles.scss 
  

某些文件上的 _ 前缀会阻止将它们编译为CSS，以保持我们的构建良好干净。现在让我们浏览文件的内容：

_theme1.scss

  $ theme-name：'theme1'; 
 
 $原色：红色； 
 $ primary-font-size：24px; 
  

_theme2.scss

  $ theme-name：'theme2'; 
 
 $原色：蓝色； 
 $ primary-font-size：12px; 
  

这是一个过于简化的示例，但应给出基本思路。每个主题文件将仅包含变量。

_theme.scss

  @mixin themestyle（）{
 body。＃{$ theme-name} {
p {
 color：$ primary-color; 
 font-size：$ primary-font-size; 
} 
 
 .bordered {
 border：3px solid $ primary-color; 
} 
} 
} 
  

themestyle mixin将使用 /themes/_theme*.scss 文件中的变量包含每个主题的所有样式。 body。＃{$ theme-name} 将创建一个选择器，如 body.theme1 或 body.theme2 ，具体取决于 $ theme-name 变量的当前值。

在此演示中，我在 p 标签上进行样式设置，但这可以轻松扩展到所有元素/选择器为您的网站。要记住的重要一点是，所有样式都必须位于 body。＃{$ theme-name} 选择器内。

现在进入决赛，并且至少 DRY 部分。 styles.scss 文件将导入每个主题文件，然后调用 themestyle mixin生成每个主题的样式。 / p>

styles.scss

  @import 主题/主题； 
 
 / *主题1样式* / 
 @import’themes / theme1'; 
 @include themestyles（）; 
 
 / *主题2样式* / 
 @import themes / theme2; 
 @include themestyles（）; 
  

重复的 @ import / @ include 是必需，因为不可能在循环或混合中 @import ，或者可以对其进行更多优化。

一旦 styles.scss 被编译，输出将为：

  / *主题1样式* / 
 body.theme1 p {
颜色：红色； 
 font-size：24px; } 
 body.theme1 .bordered {
 border：3px solid red; } 
 
 / *主题2样式* / 
 body.theme2 p {
 color：blue; 
 font-size：12px; } 
 body.theme2 .bordered {
 border：3px solid blue; } 
  

现在可以通过将类添加到 body 标记，例如< body class = theme1> 或< body class = theme1> 。

这里是显示设置的Cloud9项目。

I want to create different css-themes for a WordPress theme by using theme setup files. The setup (simplified) would be as following:

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

The idea is to enable easy theming by adding a class to the body of the document like .theme-theme1 or .theme-theme2. In the files _theme#.scss I want to define variables like text colour, font sizes and so on. In _file#.scss the actual styles are defined.

My question now is, how to iterate over the theme setup files while filling up the files.scss.

Sample idea, Background colour:

body {

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

}

I know how to do this with only one theme available in the resulting CSS file, but I want to make ALL themes available in the resulting CSS. Feel free to ask more details as I am not sure if I explain me right.

Is there a way to create this stylesheet via some kind of foreach loops through variables in theme files or does it have to be done with extra scss-rules per theme file?

解决方案

This is somewhat possible using a combo of @import with a @mixin to generate the styles. This method should produce minimal repeated code.

Here's how we'll setup the files.

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

The _ prefix on some of the files prevent them from being compiled into CSS to keep our build nice and clean. Now let's go through the contents of the files:

_theme1.scss

$theme-name: 'theme1';

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

_theme2.scss

$theme-name: 'theme2';

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

This is an oversimplified example but should give the basic idea. Each theme file will contain only variables.

_theme.scss

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

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

The themestyle mixin will contain all the styles for each theme, using the variables from the /themes/_theme*.scss files. The body.#{$theme-name} will create a selector like body.theme1 or body.theme2, depending on the current value of the $theme-name variable.

In this demo I'm styling on a p tag but this could easily be extended to all elements/selectors for your site. The important thing to remember is all styles need to be inside the body.#{$theme-name} selector.

Now the final, and least DRY part. The styles.scss file will import each theme file then call the themestyle mixin to generate the styles for each theme.

styles.scss

@import 'themes/theme';

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

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

The repeated @import/@include is required because it's not possible to @import within a loop or mixin, or this could be optimized a bit more.

Once styles.scss is compiled the output will be:

/* 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; }

These themes can now be implemented by adding a class to the body tag, like <body class="theme1"> or <body class="theme1">.

Here's a Cloud9 project showing the setup.

这篇关于遍历SCSS中的主题变量文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！