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