如何将窗口宽度值加载到 SCSS 变量？

任务是将窗口宽度值加载到 SCSS 变量并使用它。让我们简单介绍一下 SCSS。

SCSS 变量可以存储任何类型的值颜色、字体系列、字体大小、剪辑路径值等，主要用于维护跨样式表的代码的可重用性。

方法：

• 步骤 1：在 SCSS 中定义一个函数并生成精确的视口宽度值以获取窗口宽度

  @function get-vw($target) { 
    $vw-context: (1000*.01) * 1px;
    @return ($target/$vw-context) * 1vw;
  }

• 第 2 步：将像素值传递给此函数并将其存储在 SCSS 变量中。

  $window-width: get-vw(72px);

  由于 viewport-width 是 viewport 的 1%，我们可以按比例缩放 px 的大小。

  第 3 步：在需要的地方使用变量。

  main.scss

  $window-width: get-vw(72px); /* Passing in a value in pixels */
    
  /* Defining the function to generate the window width* /
  @function get-vw($target) { 
    $vw-context: (1000*.01) * 1px;
    @return ($target/$vw-context) * 1vw;
  }
    
  /* Setting the default values*/
  *{
    padding : 0;
    margin : 0;
    box-sizing: border-box;
  }
    
  /* Using the property*/
  .misc{
    padding: 3rem 0;
    color: #fff;
    width: $window-width;
    text-align: center;
    font-size: 1.8rem;
    background-color:green;
  }

  
  
  
  

  输出：这将产生以下 CSS。

  main.css

  /* Passing in a value in pixels */
  /* Defining the function to generate the window width*/
  /* Setting the default values*/
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
    
  /* Using the property */
  .misc {
    padding: 3rem 0;
    color: #fff;
    width: get-vw(72px);
    text-align: center;
    font-size: 1.8rem;
    background-color: green;
  }
  

  注意：这里提到box-sizing:border-box在这里非常重要，因为这会渲染 DOM 以删除任何默认边距或空格。

  索引.html

  
      
       
          
  
             GeeksforGeeks
          
       
  
  

  输出：在这里，我们的文本占据了当前屏幕的整个宽度。

  

  注意：虽然有像 window.outerWidth 这样的 javascript 方法，但我们不可能将这些值存储在 SCSS 变量中，因为 SCSS 只是一个预处理器。