20191226pm

 20191226

 編程題

1. 有幾隻小雞和幾隻小兔子住在一個院子裏面，主任數了數，小雞和小兔一共有13個頭和36只腳，請問小雞有幾隻？小兔子有幾隻？(儘量多)

function count(head,foot){

    if(typeof head !== number || typeof foot !== number) return;

    let i=0;

    for(let j=0;j<head;j++){

        i=head-i;

        if(i\*2+j\*4 === foot){

            return {

                i,j

            }

        }

    }

}

2. 請用html5/css3/js，實現星星在屏幕上出現，隨機飛舞，最後消失的動畫效果

3. 請實現頁面寬度自適應，要1920px寬度屏幕，一行四列卡片元素，在寬度變化爲800px時自動適應調整一行2列，在屏幕寬度小於650px時，一行一個卡片元素

 css

 css3的變量和sass的變量有什麼不一樣？

CSS變量，很像任何其它一種編程語言裏的變量，可讓咱們對一個值進行反覆的引用。始自2017年4月，全部的現代瀏覽器都支持了這個功能，使得咱們能編寫出更緊湊、更清晰的CSS樣式。

  

下面我將要介紹一下CSS變量的基本概念和用法，講講它和SAss變量的不一樣之處，以及如何兼容老CSS、SAss代碼。

  

如何使用CSS變量

  

任何CSS屬性 color, size, position 等均可以存放在CSS變量裏。CSS變量的名稱必須是以--爲前綴，它們的聲明和定義跟普通的CSS樣式定義同樣：

  

body {

  --primary: #7F583F;

  --secondary: #F7EFD2;

}

  

在其它css代碼中引用這個變量須要使用var()方法。

  

a {

  color: var(--primary);

  text-decoration-color: var(--secondary);

}

  

若是你用firebug在瀏覽器裏觀察這些變量的使用，會發現被引用的變量並無顯示成它真實的值，仍然顯示的是變量。

  

這個var()方法實際上能夠有兩個參數，第一個參數是須要引用的變量，而第二個參數是可選的，做用是若是這個變量沒有找到時使用的替代值。

  

color: var(--primary, #7F583F);

  

「沒有找到」的緣由有多是沒有定義，或者是，定義了，但不在有效做用域內。

  

CSS變量的做用域

  

CSS變量的做用域和普通的樣式屬性是同樣的。變量的做用範圍是聯級向下滲透的。好比，下面這個變量將會在整個頁面生效。

  

body {

  --primary: #7F583F;

  --secondary: #F7EFD2;

}

  

而在一個CSS規則內定義的變量只會在這個規則內有效：

  

.content {

  --primary: #7F583F;

  --secondary: #F7EFD2;

}

  

若是你在.content以外的地方引用這個變量，將不會有任何效果。

  

CSS變量和自定義屬性

  

能夠看出，CSS變量和普通的CSS屬性的做用是相似的，聲明變量，定義變量值，引用它們。

  

其實它們就是自定義CSS屬性，惟一--primary 和 position 不一樣之處是，position是靜態值，當即生效的，而 --primary 是須要引用才能生效的。

  

瀏覽器對CSS變量的支持意味着，開發人員能夠定義任意的CSS屬性。 這絕對是一個使人興奮的事情，它的意義就如同CSS媒體查詢(media queries)功能的出現，完全的讓開發人員擺脫了用JavaScript監聽器來監聽瀏覽器窗口大小的變化。CSS變量開啓了一個新的通道，讓咱們再也不依賴JS和CSS預處理器。

  

CSS變量比較Sass變量：切換主題顏色

  

CSS變量和Sass變量不一樣，在某些方面，CSS變量比Sass變量更好用。好比，設計網站的主題色調。使用SASS也很容易實現這個，好比定義不一樣的顏色存放在Sass maps裏，循環它們，生成各類不一樣的classes：

  

.theme-1 {

  a {

    color: #7F583F;

    text-decoration-color: #F7EFD2;

  }

}

  

.theme-2 {

  a {

    color: #D51522;

    text-decoration-color: #F4F6D8;

  }

}

  

/\* etc \*/

  

CSS代碼容易生成，但有多少種顏色咱們就須要生成多少個class。同時只有一個能用到。

  

而使用CSS變量，咱們可使用JavaScript來控制變量的值：

  

document.body.style.setProperty('--primary', '#7F583F');

document.body.style.setProperty('--secondary', '#F7EFD2');

  

只須要改動一個值，整個頁面的引用了這個變量的地方的顏色都會發送變化，代碼變得簡介乾淨。

  

CSS變量比較Sass變量：媒體查詢 media queries

  

在SASS裏，變量在media queries沒法從新定義的。好比，你但願在不一樣的媒體查詢條件裏定義不一樣的顏色變量，以下：

  

$primary: #7F583F;

$secondary: #F7EFD2;

  

a {

  color: $primary;

  text-decoration-color: $secondary;

  

  @media screen and (min-width: 768px) {

    $primary: #F7EFD2;

    $secondary: #7F583F;

  }

}

  

很惋惜，這種寫法在Sass裏是無效的，由於Sass是一個預處理工具，沒法知道這些媒體查詢條件真正執行是的樣子。此時，若是使用CSS變量：

  

body {

  --primary: #7F583F;

  --secondary: #F7EFD2;

}

  

a {

  color: var(--primary);

  text-decoration-color: var(--secondary);

}

  

@media screen and (min-width: 768px) {

  body {

    --primary:  #F7EFD2;

    --secondary: #7F583F;

  }

}

  

這種寫法是能夠正確的執行，由於變量的引用是在瀏覽器裏發生的，瀏覽器知道何時該引用哪一個變量。

  

瀏覽器對CSS變量的支持狀況

  

火狐瀏覽器從2014年就開始支持CSS變量了，而谷歌瀏覽器和Safari是從2016年3月開始支持的，落後的Edge瀏覽器最終也在2017年4月支持了CSS變量！(Source: CanIUse。)因此，能夠說，使用css變量是比較安全的。而若是你的CSS代碼想兼容老的IE瀏覽器，請看下面的兼容補救方法。

  

如何兼容老式瀏覽器

  

其實很簡單：

  

a {

  color: #7F583F;

  color: var(--primary);

}

  

首先聲明備用屬性，而後定義CSS變量，支持CSS變量的瀏覽器會使用後者，而不認識CSS變量的瀏覽器會使用前者。

  

如何在Sass兼容老式瀏覽器

  

若是你使用的是Sass，能夠經過一個Sass mixmin來自動達到兼容的目的。

  

$vars: (

  primary: #7F583F,

);

  

body {

  --primary: map-get($vars, primary);

}

  

@mixin var($property, $varName) {

  #{$property}: map-get($vars, $varName);

  #{$property}: var(--#{$varName}, map-get($vars, $varName));

}

  

這樣使用它：

  

a {

  @include var(color, primary);

}

  

輸出的CSS代碼是這樣的：

  

a {

  color: #7F583F;

  color: var(--primary, #7F583F);

}

  

這樣，若是咱們想修改 --primary 或 備用值，只須要編輯 $vars，CSS的其它地方都會跟着變化。