Sass主题化（SCSS教程） _SCSS

本文概述

基本的Mixin方法
使用Sass贴图设计样式方案
进一步优化

使用Sass进行样式表开发, 即使使用其最基本的功能(例如嵌套属性或变量), 也可以节省宝贵的时间, 并使前端开发人员的工作更轻松。毫不奇怪, CSS预处理器已被广泛用作为网站和应用程序创建样式的实际方法。没有他们, 我们简直无法生存。
当涉及主题时；也就是说, 在保持网站布局的同时改变网站的外观和感觉, Sass的功能(如混合功能或功能)就像乘飞机而不是走路！在本SCSS教程中, 我们将创建一个最小的主题, 并使用SCSS赋予CSS编程一些超能力。
基本的Mixin方法 【Sass主题化（SCSS教程）】假设我们有以下布局：

< body class="theme-1"> < div class="container"> < div class="left"> Left < /div> < div class="right"> Right < button class="button"> Button< /button> < /div> < /div> < /body> < /html>

文章图片
我们被要求为其创建多个主题。主题必须更改所有容器(包括主容器)和按钮的颜色, 并且该主题将由主体中的类确定, 或者也可以是” 外部” 容器：

< body class="theme-1">

让我们构建一个名为” themable” 的混音, 它将包含我们的配色方案作为参数。

@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; }.left { background-color: $left-bg; height: 100%; width: 69%; }.right { background-color: $right-bg; height: 100%; position: relative; width: 29%; }.button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }

然后使用它来生成我们的主题：

@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);

文章图片
至此, 我们已经节省了很多时间, 但是这种方法存在一些问题：
主题通常除颜色外还具有许多其他属性。例如, 如果我们想修改Bootstrap主题, 那么在先前的” 食谱” 之后编写一个mixin将很难维护, 并且代码也很难阅读。另外, 我们并没有真正遵循Sass的最佳做法-例如, 直接在mixin中输入十六进制颜色代码。
使用Sass贴图设计样式方案借助主要类似于键索引数组的地图, 我们可以为主题构建更语义, 有意义的样式集, 这将使我们的同事开发人员更易于维护和理解。我们也可以使用列表, 但就我个人而言, 我发现更适合此目的的地图。列表没有键, 而键是可自解释的。
我们的新方法的地图将是嵌套地图：

$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) );

如果要访问方案theme-1的每个部分及其子映射, 请使用@each指令遍历每个部分：

@each $section, $map in $theme-1

$ section将返回当前部分的键, 而$ map将返回与该键对应的嵌套映射。
然后, 我们可以使用map-get函数访问每张地图的属性, 例如background(bg)属性：

map-get($map, bg)

最后, 结合新的mixin(基于地图结构), 我们可以创建任意多个主题：

@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } }.container .right { position: relative }.button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; }// Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } }@include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … …

请注意, 我们还使用@if指令来区分非按钮部分的属性。

@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }

这样, 我们可以为某些部分添加不同的属性以创建特定的属性甚至规则, 或者可以区分具有单个值的键和具有嵌套映射的键的值。
我们的主题还可能包含由多个mixin使用的许多地图, 这些地图应用于样式表的不同部分。这完全取决于我们基本布局的复杂性, 当然也取决于我们的个人方法。
进一步优化 Sass提供有用的内置功能, 以节省我们更多的工作；例如, hsl函数像变亮或变暗以将鼠标悬停在其上时计算例如按钮的颜色。
无论原始背景颜色如何, 我们都可以修改按钮代码以使其在悬停时变亮。这样, 我们不必为此状态添加其他颜色。

@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { & :hover { background-color: lighten(map-get($map, bg), 20%); } }

而且, 通过使用Sass模块, 我们的代码可以更加清晰易读。每个主题图可以包含在一个模块中, 然后导入到我们的主样式表中。

@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …

这将需要将模块放置在项目中, 如下所示：
/├──_theme-1.scss├──_theme-2.scss└──_theme-2.scss
如果你想了解更多有关使用Sass来干燥CSS的信息, srcminier Justin Brazeau和Sass爱好者会在他的精彩文章Sass Mixins：保持样式表干燥中对此进行讨论。