At this point, we’ve already saved a lot of time, but there are some problems with this approach:

Themes normally have lots of different properties beside colors. 例如, if we wanted to modify the Bootstrap theme, writing a mixin following the previous “recipe” would be hard to maintain and the code hard to read. +, we’re not really following 萨斯 best practices—for example, entering hex color codes directly into the mixin.

设计 a Styles Scheme with 萨斯 Maps

借助地图, which are mainly like 关键 indexed arrays, 我们可以建立一个更语义化的, meaningful set of styles for our theme, which will be easier to maintain and understand by our colleague developers. 我们可以用 列表 as well, but, personally, I find maps more suitable for this purpose. Lists do not have 关键s while 关键s are self-explainable.

The map for our new approach will be a 嵌套的 地图:

美元theme-1:(
   容器:(
       bg: # e4ada7,
       颜色:# 000,
       边框颜色:# 000
   ),
   左:(
       bg: # d88880,
       颜色:# fff,
       高度:100%,
       宽度:69%
   ),
   正确的:
       bg: # cc6359,
       颜色:# fff,
       高度:100%,
       宽度:29%
   ),
   按钮:
       bg: # 481 b16转椅,
       颜色:# fff
   )
);

If we wanted to access each section of our scheme theme-1 它的子映射，我们使用 @each 指令 循环遍历每一个:

@每个美元的部分， 美元的地图在$theme-1

美元的部分 将返回 关键 当前部分的，和 美元的地图 将返回 嵌套的 map that corresponds to that 关键.

Then, we can access the properties of each map, let’s say the background (bg) property, using the map-get 函数:

bg map-get(地图)

最后, 结合我们的新mixin, 基于我们的地图结构, we can create as many themes as we like:

@mixin themable($theme-name, $theme-map) {
   .#{$主题名称}{
       .容器{
           .离开了, .正确的{
               字体大小:2快速眼动;
           }
       }

       .容器 .正确的{
           位置:相对
       }

       .按钮{
           边界:0;
           border - radius: 10 px;
           底部:10 px;
           光标:指针;
           字体大小:1快速眼动;
           粗细:大胆的;
           填充物:1em 2em;
           位置:绝对的;
           右:10 px;
       }

       // Loop through each of the 关键s (sections)
       $theme-map {
           @ if($节 == 容器) {
               .容器{
                   Background-color: bg map-get(地图);
                   border: 1px solid map-get(美元的地图, border-color);
                   显示:flex;
                   身高:500 px;
                   justify-content:之间的空间;
                   Margin: 0 auto;
                   填充:1 em;
                   宽度:50%;
               }
           } @else {
               .#{$节}{
                   Background-color: bg map-get(地图);
                   颜色:map-get(美元的地图, Color);

                   @ if($节 != button) {
                       高度:map-get(美元的地图, Height);
                       宽度:map-get(美元的地图, Width);
                   }
               }
           }
       }
   }
}

@include themable(theme-1， $theme-1);
@include themable(theme-2， $theme-2);
…
… 

注意，我们也使用 @if 指令 to differentiate properties for sections that are not buttons.

                   @ if($节 != button) {
                       高度:map-get(美元的地图, Height);
                       宽度:map-get(美元的地图, Width);
                   }

这种方式, we can add different properties for some sections to create specific properties or even rules, or we can distinguish between a 关键 with a single value from another with a 嵌套的 map.

Our theme could also consist of many maps used by several mixins, applied in different parts of our stylesheet. It all depends on the complexity of our base layout and, of course, our personal approach.

进一步优化

萨斯 offers useful built-in 函数s to save us even more work; for example, the hsl 函数s like 减轻 or 变黑 to calculate, for example, the color of a button when hovering over it.

We can modify the button code to 减轻 its background when hovering, regardless of the original background color. 这种方式, we don’t have to add another color for this state.

@ if($节 != button) {
   高度:map-get(美元的地图, Height);
   宽度:map-get(美元的地图, Width);
} @else {
   &:{徘徊
       background-color: 减轻(bg map-get(地图), 20%);
   }
}

也, 使用萨斯模块, our code can be even more legible and scalable; each theme map can be contained in a module and then imported into our main stylesheet.

@ import“theme-1”;
@ import“theme-2”;
@ import“theme-3”;
… 
… 
@mixin themable($theme-name, $theme-map) {
   .#{$主题名称}{
       .容器{
… 
… 

This would require the modules to be placed in the project as:

/ ├──_theme-1.scss ├──_theme-2.scss └──_theme-2.scss

If you’re interested in learning more about using 萨斯 to DRY your CSS, 同为Toptaler的Justin Brazeau和 萨斯爱好者 discusses just this in his brilliant article 萨斯 Mixins: Keep Your Stylesheets DRY.

了解基本知识

• 什么是萨斯 ??

  Syntactically Awesome Style Sheets (萨斯) is a CSS superset that gives you programming type features and pre-compiles into CSS.

  < / div >< / div >

• What is the difference between 萨斯 and SCSS?

  Since 萨斯 3, the new 萨斯 syntax and file extension are called SCSS.

  < / div >< / div >

< / div >< / div >

标签

• 前端
• CSS
• 主题
• SCSS

< / div >< / div >< / div >< / div >

Consult the author or an expert on this topic.< / div >预约电话< / div >< / div >

< / div >

< / div >

< / div >

费尔南多·里瓦斯

验证专家 in 工程< / div >< / div >< / div >< / div >

位于 Sitges、西班牙

成员自 2017年8月8日

< / div >< / div >

作者简介

Fernando has 10+ years of experience in front-end development, 首先为自己的公司工作, 然后是自由职业者和雇员.

< / div >< / div >< / div >

---

authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.< / div >

专业知识

萨斯CSS前端< / div >< / div >

工作经验

25

< / div >< / div >

雇佣费尔南多< / div >< / div >< / div >

< / div >< / div >

< / div >