个性化阅读
专注于IT技术分析

Sass主题化:SCSS教程

本文概述

使用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>
空白CSS主题布局的图像

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

<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);
使用Sass生成的theme-1和theme-2的比较

至此, 我们已经节省了很多时间, 但是这种方法存在一些问题:

主题通常除颜色外还具有许多其他属性。例如, 如果我们想修改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:保持样式表干燥中对此进行讨论。

赞(0)
未经允许不得转载:srcmini » Sass主题化:SCSS教程

评论 抢沙发

评论前必须登录!