谷歌搜索頁面（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的使用變得更加靈活更加高效。