专栏首页JackeyGao的博客使用SASS做个可自定义主题的网页

使用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 条评论
登录 后参与评论

相关文章

  • Leetcode 算法 - 2. Add Two Numbers

    需要注意的是: 这里使用的ListNode不是Python内置的list对象, 而是传统(计算机科学)意义上的列表, 通常叫做Linked list(链表), ...

    用户1416054
  • 数据可视化系统NGraph相关功能截图

    去年重写了报表系统并为之取名为NGraph, 目的是做一套可以通过API提交数据来生成可视化数据的系统。

    用户1416054
  • JPG2ASCII开发上线记录

    刚开始做运维的时候喜欢在登录服务器的时候自动打印一些ASCII图像, 于是大量搜寻这种图片以做到自己的欢迎页独一无二。 想想有点不误正业, 现在虽说找到合适的A...

    用户1416054
  • iOS Label加载HTML

    剑行者
  • Python中的yield是什么意思

    生成器是一个迭代子,但是只能迭代一次。因为它们不把数值存储在内存中,而是即时生成它们。

    Stanley Sun
  • module.exports、exports、export、export default之间的关系和区别

    stys35
  • 小结ES6基本知识点(二)

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • 嵌入式开发中机械按键去抖问题

    我们在嵌入式开发过程中,按键是必不可少的东西。但是如何使用好按键,这也是一个非常难的事情。对于一个嵌入式工程师来说,想要做好用户体验,按键的响应是非常的考验人的...

    bigmagic
  • 那些奇葩的面试!为什么我会拒绝这些公司的邀请?

    ? 昨天,跳槽大师的顾问跑来问我,之前给我推荐了十来家公司,都去面试了吗?我说,太多奇葩,只面了4家,已经拿到2个Offer。看在顾问们一周帮我拿到...

    分享达人秀
  • 统一配置中心选型对比

    引入配置中心,需要考虑和现有项目的兼容性,以及是否引入额外的第三方组件。我们的java项目以SpringBoot为主,需要重点关注springboot支持性。

    用户1177380

扫码关注云+社区

领取腾讯云代金券