国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS-自定義變量

番茄西紅柿 / 1039人閱讀

摘要：變量的值可以是顏色字符串多個值的組合等為什么選擇兩根連詞線表示變量為什么選擇兩根連詞線表示變量被用掉了，被用掉了。

使用背景：

一些常見的例子：

為風格統一而使用顏色變量
一致的組件屬性（布局，定位等）
避免代碼冗余

*更方便的從CSS向JS傳遞數據（例如媒體斷點）

為什么使用：

以下幾點是未來CSS屬性的簡短說明：

動態性，可以在運行時更改
可以方便的從JS中讀/寫
可繼承，可組合，同時具有作用域

定義：

定義
用這樣的方式來聲明一個變量：--variable-name: variable-value;（變量名是大小寫敏感的）。變量的值可以是顏色、字符串、多個值的組合等:
:root{
    --base_color:#398bd0;
    --bg_color:#4a4a4a;
}

為什么選擇兩根連詞線（--）表示變量？

為什么選擇兩根連詞線（--）表示變量？
$foo被 Sass 用掉了，
@foo被 Less 用掉了。
為了不產生沖突，官方的 CSS 變量就改用兩根連詞線了

用法：

.res_nav ul li:hover a{color:var(--base_color);}

.res_contact_btn a:hover{background:var(--base_color);}

作用域：

使用:root 作用域來定義全局變量：

:root{ --global-var: global; }

如果想讓某個變量只在部分元素/組件下可見，只需要在特定的元素下定義該變量：

 
My block is 
    
awesome
 



/*css文件*/
.block { --block-font-size: 1rem; font-size: var(--block-font-size); } 
.block__highlight { --block-highlight-font-size: 1.5rem; font-size: var(--block-highlight-font-size); }

媒體查詢也可以提供作用域：

@media screen and (min-width: 1025px) { 
    :root { 
        --screen-category: desktop;
     } 
}

下面一個例子來展示偽類下的作用域（例如，:hover）：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2218.html

相關文章

  • CSS變量（自定義屬性）使用指南 — SitePoint

    摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。 CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工...

    light 評論0 收藏0

  • CSS變量（自定義屬性）使用指南 — SitePoint

    摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。 CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工...

    yankeys 評論0 收藏0

  • CSS變量（自定義屬性）實踐指南

    摘要：和這樣的預處理器，讓我們的代碼保持良好的結構和可維護性。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。而你是無法對預處理器中的變量做上面這些操作的。 本文翻譯自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉載請注明出處：葡萄城官網，葡萄城...

    番茄西紅柿 評論0 收藏0

  • CSS變量（自定義屬性）實踐指南

    摘要：變量，或者用它的官方稱謂，叫作自定義屬性，已經可用，并且有非常棒的瀏覽器支持，而也正在取得進展。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。 轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 Sass和Less這樣的預處理器，讓我們的CSS代碼保持良好的結構和可維護性。像變量、混合(mixin...

    source 評論0 收藏0

  • CSS 自定義屬性 - 入門

    摘要：變量的函數引用的自定義屬性被稱為變量。為此，可讀性和可維護性是自定義屬性最大的優勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。 引言 ??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因為這個原因，社區中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一...

    seanlook 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<