使用内联的CSS变量技巧，提高灵巧布局效率！

有些情况下，我需要用一种简单的方法来创建网格布局。例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。在本文中，我们一起探索一些用例，并思考如果实现及使用它们。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站制作、网站设计、荔湾网络推广、小程序开发、荔湾网络营销、荔湾企业策划、荔湾品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供荔湾建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

它是怎么工作的

在深入探讨这些概念之前，首先我们来回顾一下 CSS 变量的基础知识， 我们也可以将它称为“自定义属性”。

所有主流浏览器都支持CSS变量，下面是各个浏览器的支持情况：

如果要定义CSS变量是全局变量，则需要将其添加到:root声明中(:root等效于)。如果该变量特定于组件，则可以在该组内声明中定义它。

在下面的例子中，我定义了一个全局变量--size，它用于square 元素的宽度和高度。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2. 
  
  
  
  
  2.     --size: 50px; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. .square { 
    6. 
  
  
  
  
  6.     width: var(--size); 
    7. 
  
  
  
  
  7.     height: var(--size); 
    8. 
  
  
  
  
  8. } 
    9.

如果--size没有定义，要怎么办呢?在传递的变量无效的情况下，CSS 支持定义默认变量或回退变量。

在下面的例子中的 var(--size, 10px)。如果--size无效，则宽度和高度值将为10px。

 
 
 
 
    
  
  
  
  
  1. .square { 
    2. 
  
  
  
  
  2.     width: var(--size, 10px); 
    3. 
  
  
  
  
  3.     height: var(--size, 10px); 
    4. 
  
  
  
  
  4. } 
    5.

除此之外，还可以在内联CSS样式中使用CSS变量。例如

HTML
 

 

CSS

 
 
 
 
    
  
  
  
  
  1. .elem { 
    2. 
  
  
  
  
  2.     background: var(--background); 
    3. 
  
  
  
  
  3. } 
    4.

接着， 我们以上述这些概念，还演示一些事例。

CSS网格

示例侧边栏和主内容

在此设计中，我将CSS网格用于以下各项：

  1. 边栏和主菜单
  2. 表单项
  3. 三列布局

侧边栏的宽度是固定的，主内容是变化。假设侧边栏的宽度是240px。

1.边栏和主菜单

Html

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.     
     
    4.
 

Html

 
 
 
 
    
  
  
  
  
  1. .o-grid { 
    2. 
  
  
  
  
  2.     display: grid; 
    3. 
  
  
  
  
  3.     grid-template-columns: var(--columns); 
    4. 
  
  
  
  
  4. } 
    5.

2. 表单项

按照设计，每行有两列，html 结构如下：

Html

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
 
  •    
  •    
  •    
  •  

    •        

    CSS

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.     display: grid; 
      3. 
  
  
  
  
    3.     grid-template-columns: var(--columns); 
      4. 
  
  
  
  
    4. } 
      5.

    3. 三列布局

    在下面的示例中，我添加了--repeat-number：3和--gap：8px作为内联CSS。这些变量将添加到o-grid类，网格的设置将基于这些变量。

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
       
      3. 
  
  
  
  
    3.   
       
      4. 
  
  
  
  
    4.   
       
      5. 
  
  
  
  
    5.  
      6.

         

    CSS

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(var(--repeat-number), 1fr); 
      4. 
  
  
  
  
    4.   grid-gap: var(--gap, 0); 
      5. 
  
  
  
  
    5. } 
      6.

    我喜欢在CSS变量中添加默认值，以防变量没有被设置。在上面的代码中，我使用了var(--gap, 0)，如果使用者没有提供--gap变量，则其默认值将为0。

    动态网格项：minmax

    对我来说，这是一个广泛使用的用例，并且非常重要。我经常使用Grid minmax，但是当我在多个页面上使用它时，我遇到了一个问题。

    让我们举一个不使用 CSS 变量的基本示例。

    在 CSS 中，我使用minmax为每个网格项目定义最小宽度250px。

    CSS

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); 
      4. 
  
  
  
  
    4.   grid-gap: 16px; 
      5. 
  
  
  
  
    5. } 
      6.

    现在，如果设计要求网格项目的宽度至少为300px，应该怎么做?我需要创建类似以下版本吗?

     
 
 
 
      
  
  
  
  
    1. .o-grid--2 { 
      2. 
  
  
  
  
    2.     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
      3. 
  
  
  
  
    3. } 
      4.

    想象一下，有五个不同的网格，每个网格具有不同的项目宽度，所以以上不是正确的解决方案。

    使用CSS变量，我可以执行以下操作

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.     display: grid; 
      3. 
  
  
  
  
    3.     grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); 
      4. 
  
  
  
  
    4.     grid-gap: var(--gap); 
      5. 
  
  
  
  
    5. } 
      6.

    在HTML中，就可以在标签上设置 CSS 变量：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.      
       
      4. 
  
  
  
  
    4.      
       
      5. 
  
  
  
  
    5.      
       
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.      
       
      11. 
  
  
  
  
    11.      
       
      12. 
  
  
  
  
    12.      
       
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.      
       
      18. 
  
  
  
  
    18.      
       
      19. 
  
  
  
  
    19.      
       
      20. 
  
  
  
  
    20.  
      21.

                     

    事例源码：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

    Flexbox示例

    在示例中，有一个文章标题，其中包含作者姓名和标签。这些在页面中的排布方式是动态变化，所以需要一种快速切换这些布局方式的方法 。

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      Article title
       
      3. 
  
  
  
  
    3.      
      4. 
  
  
  
  
    4.         
      By Ahmad Shadeed
       
      5. 
  
  
  
  
    5.         
      Published under: CSS, Design
       
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.  
      8.

    CSS

     
 
 
 
      
  
  
  
  
    1. .article-header__meta { 
      2. 
  
  
  
  
    2.     display: flex; 
      3. 
  
  
  
  
    3.     justify-content: var(--justify); 
      4. 
  
  
  
  
    4. } 
      5.

    有了它，我可以调整内联样式以将值更改为另一个关键字。我发现这在进行快速原型制作甚至是制作网站时很有用。

    按钮

    按钮宽度

    CSS 变量也适用于按钮元素。假设有一个带有两个input字段和一个按钮的表单。

    我的目的是通过使用内联CSS变量来控制按钮的宽度。有时，按钮应占据其父控件的100%宽度。

    html

     
 
 
 
      
  
  
  
  
    1. Submit 
      2.

    css

     
 
 
 
      
  
  
  
  
    1. .c-button { 
      2. 
  
  
  
  
    2.     /* Other styles */ 
      3. 
  
  
  
  
    3.     width: var(--width, initial); 
      4. 
  
  
  
  
    4. } 
      5.

    按钮颜色

    另一个有用的用途是当有重影按钮(轮廓按钮)时。按钮的颜色可以是任何颜色，通过使用CSS变量，可以轻松更改颜色。

    HTML

     
 
 
 
      
  
  
  
  
    1. Save Edits 
      2. 
  
  
  
  
    2. Delete 
      3.

    CSS

     
 
 
 
      
  
  
  
  
    1. .c-button--ghost { 
      2. 
  
  
  
  
    2.   /* Other styles */ 
      3. 
  
  
  
  
    3.   background: transparent; 
      4. 
  
  
  
  
    4.   color: var(--color, #000); 
      5. 
  
  
  
  
    5.   border-color: currentColor; 
      6. 
  
  
  
  
    6. } 
      7.

    CSS 变量同样适合悬停效果。悬停时，按钮背景将变为纯色，并且字体颜色为白色。

    事例源码：https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995

    用户头像

    每个角色的大小都不同，这非常适合用 CSS 变量来解决。假设有四个不同大小的用户头像。

    在CSS中，定义了以下样式：

     
 
 
 
      
  
  
  
  
    1. .c-avatar { 
      2. 
  
  
  
  
    2.   display: inline-block; 
      3. 
  
  
  
  
    3.   margin-right: 2rem; 
      4. 
  
  
  
  
    4.   width: calc(var(--size, 1) * 30px); 
      5. 
  
  
  
  
    5.   height: calc(var(--size, 1) * 30px); 
      6. 
  
  
  
  
    6.   object-fit: cover; 
      7. 
  
  
  
  
    7.   border-radius: 50%; 
      8. 
  
  
  
  
    8.   box-shadow: 0 3px 10px 0 rgba(#000, 0.2); 
      9. 
  
  
  
  
    9. } 
      10.

    通过使用Calc()函数，我可以传递一个--size 变量，它将乘以一个基本宽度值，在HTML中定义 --size变量：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5.

    事例源码：https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d

    作者：Ahmad shaded 译者：前端小智 来源：sitepoint

    原文：https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

    本文转载自微信公众号「 大迁世界」，可以通过以下二维码关注。转载本文请联系 大迁世界公众号。

    文章标题：使用内联的CSS变量技巧，提高灵巧布局效率！
    转载来于：http://www.shufengxianlan.com/qtweb/news25/541675.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    关键词优化知识

    各行业网站

    资阳网站建设　　 　网站制作　　 　川银永信　　 　网站解决方案　　 　服务器托管　　 　服务器租用　　 　seo优化排名　　 　全网营销　　 　网站营销推广　　 　成都网络营销　　 　温江做网站　　 　画册设计制作　　 　java虚拟主机　　 　成都网站建设　　 　成都网站设计　　 　四川乐山服务器托管　　 　成都橡塑保温板　　 　成都花箱　　 　中国电信西部信息中心机房　　 　微信公众号二次开发