使用SASS做个可自定义主题的网页

使用SASS做个可自定义主题的网页

Posted November 28, 2018

本篇的代码已托管在 jackeyGao / sass-theme


Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。

具体的 Sass 语法教学这里并不准备讲, 请参考官方教程, 本篇只举一个自定义主题的例子, 让你对 sass 的功能更加深刻, 理解 sass 在这个场景的优越性.

CSS 比较新的标准中增加 var() 变量功能, 这个可以非常方便的让我们切换 css 属性值, 从而达到切换主题的功能。 但只有只写现代化webkit内核浏览器才支持, IE 不支持。关于var()请参考var() | MDN.

我们开始本篇的东西

准备

首先安装 Sass , 这是一个 ruby 的工具, 使用 gem 可以快速安装.

Bash

$ gem install sass

安装完毕后, 通过查看 sass 版本来检查是否安装成功.

Bash

$ sass --version
Sass 3.4.23 (Selective Steve)

今天是2018年11月28日, 3.4.23应该是最新的稳定版。

介绍

切换主题我们仅举例最简单的例子, 通过点击相应的主题, 来改变一个区域(div)的背景颜色和文字颜色.

需要更改的 div:

HTML

<body class="sk-theme"> <!-- 主题 css 切换 -->
    <div class="main">
         <p>时间就像海绵里的水,只要愿挤,总还是有的。</p>
         <p class="meta">鲁迅</p>
    </div>
</body>

这是一个很简单的 div 展示,下面我们通过 sass 生成一些 css. 在上面的 html 例子中,假设我们有六个主题分别是sk-default, sk-mo, sk-green, sk-orange, sk-yellow, sk-pink. 那么我们至少要定义六个样式. 分别是:

  • .sk-default .main
  • .sk-mo .main
  • .sk-green .main
  • .sk-orange .main
  • .sk-yellow .main
  • .sk-pink .main

看着不太多, 手写还能接受? 但现实情况比这个复杂的多, 一个大的项目所需要切换的主题元素远比这一个区域多, 而且如果体验比较好的主题切换还要更加复杂。 往往分散在多个文件中, 当增加主题的时候需要更改的就很多。而 sass 就能很好的解决这个需求.

这里我们用到了 sass 的这些功能:

  • sass 命令行 (把 scss build 为 css 功能)
  • each (类似于 for 循环, 对 map 进行循环)
  • map声明

map 类似于 js 中的 object 和 python 中的 dict . 是一组 key: value 的集合. 这里我们主要存储我们的主题的配置.

Sass

$themes: (
    sk-default: (
        bg: #2c3e50,
        color: #fff
    ),
    sk-green: (
        bg: #80ac7b,
        color: #fff
    ),
    sk-mo: (
        bg: #585756,
        color: #fff
    ),
    sk-orange: (
        bg : #ff8364,
        color: #FFF
    ),
    sk-pink: (
        bg : #e7759a,
        color : #f6ec66
    ),
    sk-yellow: (
        bg : #f7de1c,
        color : #333
    )
);

可以看到我们定义了六个主题, 每个主题我们都选择了一个背景颜色(bg)和适配于背景颜色的文字颜色(color). 然后我们通过each生成六个样式.

Sass

@each $theme, $config in $themes {
    .#{$theme} .main
    {
        background: map-get($config, 'bg');
        color: map-get($config, 'color');
    }
}

通过 build sass可以自动生成六个样式表.

Bash

sass global.scss global.css

然后在页面引用这个 global.css 就可以了.

完成图

项目地址

jackeyGao / sass-theme

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云服务试衣间

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用能力:COS文件上传/删除的触发器。

6.3K29

在Ubuntu 18.04上安装WordPress

WordPress是一个非常流行的专注于博客的动态内容管理系统(CMS)。WordPress可以部署在LAMP或LEMP堆栈上。它具有的可扩展插件框架和主题系统...

7491
来自专栏主机笔记

windows7英文版一键修改系统语言为中文

上一篇文章中我用solusvm加载镜像安装了英文版windows7系统,但是商家提供的系统镜像都是英文的,一些软件和网页会出现乱码的问题,必须安装中文语言包才能...

5737
来自专栏编程坑太多

eclipse 集成阿里的p3c插件

2633
来自专栏云计算

在Ubuntu 16.04上安装WordPress

在本指南中,您将学习如何在运行Ubuntu 16.04的Linode上安装WordPress。WordPress是一个流行的动态内容管理系统,专注于博客。Wor...

4812
来自专栏每日一篇技术文章

带你入坑02-weex-路由的使用

创建一个父组件和两个子组件 父组件foo.vue 的文件和子组件home.vue和me.vue

3461
来自专栏草根专栏

使用VS Code开发asp.net core (上)

本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://cod...

3425
来自专栏北京马哥教育

Vim 新手节省时间的 10 多个小技巧

Vim 是很多开发者的首选编辑器,通过设置正确的命令和快捷方式,它可以帮你更快的完成工作。这篇文章我们为 Vim 新手提供一些快捷键等方面的小技巧,帮你提升工作...

3827
来自专栏前端杂谈

广告等第三方应用嵌入到web页面方案 之 使用js片段

45411
来自专栏小狼的世界

Mac下安装Android模拟器

像iPhone的iOS或者其他的手机操作系统一样,Android的开发者非常需要一个模拟器,以在设备上实地测试前对自己开发的应用进行测试。这需要借住SDK来实现...

3232

扫码关注云+社区

领取腾讯云代金券