操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

使用SASS做個可自定義主題的網頁

28, 2018

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

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 、導入等眾多功能， 并且完全兼容 CSS 語法。 Sass 有助于保持大型樣式表結構良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 樣式庫一同使用時。

具體的 Sass 語法教學這里并不準備講， 請參考官方教程， 本篇只舉一個自定義主題的例子，讓你對 sass 的功能更加深刻網頁設計名詞解釋標記的意思， 理解 sass 在這個場景的優越性.

CSS 比較新的標準中增加 var() 變量功能， 這個可以非常方便的讓我們切換 css 屬性值， 從而達到切換主題的功能。 但只有只寫現代化內核瀏覽器才支持， IE 不支持。關于var()請參考var() | MDN.

我們開始本篇的東西

準備

首先安裝 Sass ，這是一個 ruby 的工具網頁設計名詞解釋標記的意思， 使用 gem 可以快速安裝.

$ gem install sass

復制

安裝完畢后， 通過查看 sass 版本來檢查是否安裝成功.

$ sass --version
Sass 3.4.23 (Selective Steve)

復制

今天是2018年11月28日， 3.4.23應該是最新的穩定版。

介紹

切換主題我們僅舉例最簡單的例子， 通過點擊相應的主題， 來改變一個區域(div)的背景顏色和文字顏色.

需要更改的 div:

 
    

         
時間就像海綿里的水，只要愿擠，總還是有的。
         
魯迅
    

復制

這是一個很簡單的 div 展示，下面我們通過 sass 生成一些 css. 在上面的 html 例子中，假設我們有六個主題分別是sk-, sk-mo, sk-green, sk-, sk-, sk-pink. 那么我們至少要定義六個樣式. 分別是:

看著不太多, 手寫還能接受? 但現實情況比這個復雜的多， 一個大的項目所需要切換的主題元素遠比這一個區域多， 而且如果體驗比較好的主題切換還要更加復雜。 往往分散在多個文件中， 當增加主題的時候需要更改的就很多。而 sass 就能很好的解決這個需求.

這里我們用到了 sass 的這些功能:

map 類似于 js 中的 和 中的 dict . 是一組 key: value 的集合. 這里我們主要存儲我們的主題的配置.

$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生成六個樣式.

@each $theme, $config in $themes {
    .#{$theme} .main

    {
        background: map-get($config, 'bg');
        color: map-get($config, 'color');
    }
}

復制

通過 build sass可以自動生成六個樣式表.

sass global.scss global.css

復制

然后在頁面引用這個 .css 就可以了.

完成圖項目地址

/ sass-theme