小米降噪藍(lán)牙耳機(jī)Necklace分享：聽一首歌 讀懂一個(gè)故事
在今天下午的小米Civi 2新品發(fā)布會(huì)上，小米還帶來了一款新的降噪藍(lán)牙耳機(jī)Necklace，我們也在發(fā)布結(jié)束的第一時(shí)間給大家?guī)磉@款耳機(jī)的簡單分享。現(xiàn)在大家能見到最多的藍(lán)牙耳機(jī)
Hello，大家好，我是 Sunday。
隨著前端工程化的不斷提升，CSS預(yù)處理器已經(jīng)成為了項(xiàng)目中不可或缺的一部分，很多人在項(xiàng)目技術(shù)選型時(shí)都會(huì)選擇一款CSS預(yù)處理器，大部分前端腳手架也包含了一系列CSS預(yù)處理的模板，大家已經(jīng)習(xí)慣了CSS預(yù)處理器帶來的靈活、流暢的代碼編寫體驗(yàn)，而原生的CSS則被忽視了。
很多前端開發(fā)者可能還認(rèn)為 CSS 預(yù)處理器是一個(gè)比較新的技術(shù)，但事實(shí)上并非如此。最早的 CSS 預(yù)處理器 Sass 誕生于 2007 年，也就是說它已經(jīng)存在了 17 年。而相對(duì)較新的 Stylus 也已經(jīng)發(fā)布了 14 年。
前端技術(shù)棧的發(fā)展日新月異，W3C 的 CSS 工作組也不斷從社區(qū)中汲取靈感，加速 CSS 的迭代。那么，CSS 是否能夠取代 CSS 預(yù)處理器的地位？CSS 預(yù)處理器是否會(huì)成為 CSS 過渡期的產(chǎn)物？
CSS 是開放網(wǎng)絡(luò)的核心語言之一，由W3C制定，用于跨瀏覽器實(shí)現(xiàn)。因此，在深入了解 CSS 規(guī)范更新的進(jìn)展之前，有必要先了解 W3C 及其標(biāo)準(zhǔn)化進(jìn)程。
W3C，又稱萬維網(wǎng)聯(lián)盟或 W3C 理事會(huì)，是萬維網(wǎng)的主要國際標(biāo)準(zhǔn)組織。它是一個(gè)半自治的非政府組織，由蒂姆·伯納斯-李于 1994 年 10 月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)和人工智能實(shí)驗(yàn)室 (MIT/LCS) 創(chuàng)立。
W3C 制定了一系列標(biāo)準(zhǔn)，并鼓勵(lì)網(wǎng)絡(luò)應(yīng)用程序開發(fā)者和內(nèi)容提供商遵守這些標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)涵蓋了所用語言的規(guī)范、開發(fā)指南和解釋引擎的行為。W3C 制定了許多有影響力的標(biāo)準(zhǔn)規(guī)范，包括HTML、DOM、SVG、XML和CSS
由于我們需要在不同的階段討論CSS規(guī)范，因此有必要簡單介紹一下W3C的規(guī)范發(fā)展過程。
根據(jù)W3C 的流程文檔，推薦標(biāo)準(zhǔn)的制定要經(jīng)歷多個(gè)階段。
當(dāng)一種語言的能力不足，而用戶的運(yùn)行環(huán)境又不支持其他選擇時(shí)，這種語言就會(huì)成為一種“編譯目標(biāo)”語言，開發(fā)者會(huì)選擇另一種更高級(jí)的語言進(jìn)行開發(fā)，然后再編譯成低級(jí)語言進(jìn)行實(shí)際執(zhí)行，因此在前端領(lǐng)域，CSS預(yù)處理器應(yīng)運(yùn)而生，擔(dān)負(fù)起重任。
CSS 預(yù)處理器是一個(gè)允許您使用其自己獨(dú)特的語法生成 CSS 的程序。
市面上有很多 CSS 預(yù)處理器，絕大多數(shù)都加入了原生 CSS 所不具備或者不夠完善的高級(jí)特性，使得 CSS 的結(jié)構(gòu)更加易讀，也更加易于維護(hù)。
目前社區(qū)中主要的 CSS 預(yù)處理器有以下幾種：
各種預(yù)處理器功能雖然強(qiáng)大，但最常用的依然是：變量，混合，嵌套規(guī)則和代碼模塊化。
這些功能在 css 中也有
各類 CSS 預(yù)處理器在更新迭代的過程中變得越來越復(fù)雜和花哨，但大多數(shù)人還是使用同樣的核心功能：變量、混合、嵌套、模塊，最多一些實(shí)用功能。
這些功能在 css 中依然存在
CSS 自定義屬性（也稱為 CSS 變量）允許我們?cè)跇邮奖碇新暶髯兞坎⑼ㄟ^ var() 函數(shù)使用它們。
CSS 自定義屬性中的級(jí)聯(lián)變量規(guī)范于 2012 年 10 月首次作為工作草案（WD）提出，并于 2015 年 10 月進(jìn)入候選推薦（CR）階段。現(xiàn)在瀏覽器支持率接近 93%。
圖片
CSS變量的定義及使用如下，可定義的類型非常廣泛。
/* 聲明 */--VAR_NAME: <聲明值>;/* 使用 */var(--VAR_NAME)/* 根元素選擇器（全局作用域），例如 <html> */:root { /* CSS 變量聲明 */ --main-color: #ff00ff; --main-bg: rgb(200, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px);}body { /* 使用變量 */ color: var(--main-color);}與 SASS 預(yù)處理器變量的編譯時(shí)處理不同，CSS 變量由瀏覽器在運(yùn)行時(shí)處理，這使得它們更加強(qiáng)大和靈活
在 CSS 變量出現(xiàn)之前，將值從 CSS 傳遞到 JS 非常困難，甚至需要一些 hack 技巧。現(xiàn)在有了 CSS 變量，可以直接通過 JS 訪問變量值并進(jìn)行修改。
// 定義 CSS 變量.breakpoints-data { --phone: 480px; --tablet: 800px;}const breakpointsData = document.querySelector('.breakpoints-data');// 獲取 CSS 變量的值const phone = getComputedStyle(breakpointsData) .getPropertyValue('--phone');// 設(shè)置 CSS 變量的新值breakpointsData.style .setProperty('--phone', 'custom');除此之外還有很多 css 原生能力，比如：Mixins、運(yùn)算符，咱們就不再文章中一一列舉了。
經(jīng)過一番梳理我們發(fā)現(xiàn)，CSS雖然在社區(qū)的刺激下加快了其更新迭代速度，但依然達(dá)不到CSS預(yù)處理器的水平，只能說在使用CSS預(yù)處理器的同時(shí)，也可以在項(xiàng)目中嘗試一些非常優(yōu)秀的CSS新特性，即：CSS preprocessor + CSS。
不過我們還是相信隨著 W3C 的推廣和 CSS 本身的不斷完善，CSS 預(yù)處理器終究會(huì)像CoffeScript和Jade當(dāng)年一樣成為過渡性的產(chǎn)品，到那時(shí)大家就不用再為不同 CSS 預(yù)處理器的各種環(huán)境配置和技術(shù)選擇而煩惱啦。
本文鏈接：http://www.tebozhan.com/showinfo-26-112770-0.html2024年了，為什么 CSS 預(yù)處理器依然火爆？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)