如何在scss中写入宽度和高度的变量。这样我就可以将它们导入 html div

Question

constant.scss

$widthsize:(500);
$heightsize:(300);
----------------------------------------------------------

<!DOCTYPE html>

<html  >
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,  maximum-scale=1">
        <title>Spider Leads</title>
        <link rel="stylesheet" href="css/style.css"></link><!-- comment -->
    </head>
    <body class="bodybg">
        <div>
            <img src="images/logo.bmp" alt="Spider leads" height="$heightsize" width=$widthsize>
        </div>
        </body>
         

</html>

$heightsize: 如何在这里写一个100px的值？ $widthsize: 如何在这里写一个 100px 的值？

Answer 1

你不能这样做。一个SCSS文件需要先编译成CSS文件，但是SCSS文件中的这些变量也得在SCSS文件的某处使用。如果你只是在 SCSS 文件中设置了一些变量但不使用它们，它将不起作用（即编译后的 CSS 文件将为空）。这样做：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <img src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Spider leads">
</body>
</html>

styles.scss

$widthsize: 100px;
$heightsize: 100px;

img {
    width: $widthsize;
    height: $heightsize;
}

styles.css

编译SCSS文件时自动生成CSS文件。

img {
  width: 100px;
  height: 100px;
}

/*# sourceMappingURL=styles.css.map */

如何在scss中写入宽度和高度的变量。这样我就可以将它们导入 html div

how to write the variable of width and height in scss. so i can importe them into the html div

sass