谷歌搜索页面（sass版本）

下图是页面效果：
在这里插入图片描述
按下F12键打开开发者工具将body的classname改成theme-dark，效果图如下：

大家可以点击右边的网址自行体验：谷歌搜索页面
展示完效果，接下来进入正文讲解。
首先，此效果是基于sass语法来实现的两套color theme的页面效果。什么是sass，简单点描述就是加强版的css，大家可以点击右边链接进入官网学习：sass教程
这里我只讲解sass里面突出的也是此次小demo用到的几个特性。

Variables，即定义变量，一般的编程语言都有的一个common特性
Mixins，中文名为混合器，可以理解为一般编程语言里面的函数

这里我只介绍这两个特性，更多的内容大家可以参看官方文档。
接下来，我讲述如何用sass来实现多套theme，其实像我这种直接通过改变body的classname更换theme的方式来实现多套theme，此方案并不是唯一解但是显然很方便。
实现思路：
首先，我们把每套theme都用Variables定义在自己的文件中，然后再定义一个属于此theme的classname并导入需要改变theme的文件，最后我们在最外层的接口文件导入此多套theme文件，直接编译运行即可生效。
default-theme:


$bodyBackgroundColor: white;
$boxBackgroundColor: white;
$labelTextColor: rgba(0,0,0,0.87);
$labelSvgColor:#5f6368;
$labelApplicationHoverColor:rgba(60,64,67,0.08);
$iconColor:rgb(117, 117, 117);
$textColor:rgb(117, 117, 117);
$microphoneColor:greenyellow;
$boxShadowColor:rgba(32, 33, 36, 0.28);
$searchButtonTextColor: white;
$searchButtonBackgroundColor:rgb(57, 179, 228);
$searchButtonBackgroundHoverColor:rgb(5, 135, 187);
$searchButtonShadowColor:rgba(32, 33, 36, 0.4);
.theme-default {
    @import './variables.scss';
    background-color: $bodyBackgroundColor
}

dark-theme:


$bodyBackgroundColor: rgb(70, 70, 70);
$boxBackgroundColor: rgb(70, 70, 70);
$labelTextColor: rgba(245, 245, 245, 0.87);
$labelSvgColor:#d8dfe7;
$labelApplicationHoverColor:rgba(228, 228, 228, 0.25);
$iconColor:rgb(236, 236, 236);
$textColor:rgb(236, 236, 236);
$microphoneColor:yellowgreen;
$boxShadowColor:rgba(215, 222, 243, 0.28);
$searchButtonTextColor: rgb(70, 70, 70);
$searchButtonBackgroundColor:rgb(0, 116, 161);
$searchButtonBackgroundHoverColor:rgb(57, 190, 243);
$searchButtonShadowColor:rgba(215, 222, 243, 0.4);
.theme-dark {
    @import './variables.scss';
    background-color: $bodyBackgroundColor
}

需要改变theme的文件：

* {
    box-sizing: border-box;
}

@mixin location($height,$width,$left,$top) {
    position: absolute;
    height: $height;
    width: $width;
    left: $left;
    top: $top;
}
@mixin graphics($background-color,$color,$font-family) {
    position: absolute;
    background-color: $background-color;
    color: $color;
    font-family: $font-family;
}
@mixin absoluteCenter($width) {
    position: absolute;
    width: $width;
    left: 50%;
    margin-left: -($width/2);
}
@mixin ellipses {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.frame{
    @include location(400px, 600px, 50%, 64px);
    margin-left: -300px;
}

.label{
    position: absolute;
    height: 48px;
    width: 130px;
    right: 16px;
    top: 8px;
}
.email,.picture{
    @include ellipses;
    line-height: 48px;
    font-size: x-small;
    outline: none;
    color:$labelTextColor;
    text-decoration: none;
    padding-right: 8px;
    padding-left: 4px;
    &:hover{
        opacity: 0.85;
        text-decoration: underline;
    }
}

.application{
    @include location(40px, 40px,70%, 6%);
    &:hover{
        border-radius: 50%;
        background-color: $labelApplicationHoverColor;
    }
}
svg {
    @include location(20px, 20px,50%, 50%);
    margin-top: -11px;
    margin-left: -11px;
    fill:$labelSvgColor;
}
.searchButton{
    @include graphics($searchButtonBackgroundColor,$searchButtonTextColor,Arial);
    padding: 5px;
    width: 85px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    top:80%;
    right: 8px;
   @include ellipses;
    box-shadow: 0 2px 6px 0 $searchButtonShadowColor;
    &:hover{
        background-color: $searchButtonBackgroundHoverColor;
    }
}
.logo {
    @include absoluteCenter(550px);
    height: 196px;
    top: 20%;
    background-image: url("../img/googlepng.png");
    background-repeat: no-repeat;
    margin-top: -70px;
    cursor: pointer;
}

.box {
    @include absoluteCenter(584px);
    height: 44px;
    top: 65%;
    background-color:$boxBackgroundColor; 
    box-shadow: 0 1px 6px 0 $boxShadowColor;
    border-radius: 22px;
    line-height: 21px;
    margin-top: -10px;
}

.box-icon {
    @include graphics($boxBackgroundColor,$iconColor,"icomoon");
    width: 24px;
    height: 24px;
    bottom: 0;
    top: 0;
    margin-left: 16px;
    margin-top: 12px;
}

.box-text {
    $font-family : 'Segoe UI', 'Roboto', arial, sans-serif;
    @include graphics($boxBackgroundColor,$textColor,$font-family);
    width: 500px;
    height: 44px;
    left: 40px;
    line-height: 44px;
    background-color:$boxBackgroundColor; 
    color:$textColor;
    font-size: 16px;
    border: none;
    outline: none;
}

.box-microphone {
    @include graphics($boxBackgroundColor,$microphoneColor,"icomoon");
    font-size: 18px;
    margin-right: 16px;
    border: none;
    cursor: pointer;
    bottom: 0;
    right: 0;
    top: 0;
}

接口文件：

@import 'theme-default.scss';
@import 'theme-dark.scss';
@font-face {
    font-family: "icomoon";
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg') format('svg');
}

主要代码就这些，但是这样并不能直接运行，还需要将sass文件编译成css文件，具体操作大家可以参看我上面给出的sass教程链接。
完整代码可以直接点击右边的github链接进行下载：完整代码
最后，我再说说我个人对sass的理解，其实虽然css代码本只是对html标签样式的控制，原本的css其实就挺好用的，但是为了提高开发效率，sass就体现了其价值，它能够直接类似于一般常见的编程语言的各种特性，所以sass使得css的使用变得更加灵活更加高效。

谷歌搜索页面（sass版本）

猜你喜欢