小编gme*_*_99的帖子

为什么@use 在 Web Compiler Visual Studio 扩展中不起作用?

我正在使用 Web Compiler 扩展 (1.12.394) 运行 Visual Studio 2019 (16.3.9) 来编译 scss 文件。

这是一个有效的简单案例。我有一个文件 - test.scss:

$color: blue;

.button {
    background-color: $color;
}
Run Code Online (Sandbox Code Playgroud)

这被编译为:

.button {
    background-color: blue;
}
Run Code Online (Sandbox Code Playgroud)

但是,如果我尝试执行此处概述的操作 - https://sass-lang.com/documentation/at-rules/use#configuring-modules - 它似乎不起作用。我创建了另一个文件 - _base.scss:

$color: red !default;

.button {
    background-color: $color;
}
Run Code Online (Sandbox Code Playgroud)

然后我将我的 test.scss 文件更改为:

@use 'base' with (
  $color: blue
);
Run Code Online (Sandbox Code Playgroud)

我预计编译后的输出将与原始示例相同:

.button {
    background-color: blue;
}
Run Code Online (Sandbox Code Playgroud)

但这就是我得到的:

@use 'base' with (
  $color: blue
);
Run Code Online (Sandbox Code Playgroud)

我的猜测是编译器对 @use 规则不满意,但我没有看到任何错误。_base.scss 和 test.scss 位于同一目录中。我只是 Sass 的新手,但这肯定是可能的吗?

sass web-compiler

5
推荐指数
2
解决办法
1728
查看次数

iPad缩放以适合在内容最少的网页上无效

考虑以下基本的html代码块:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>iPad test</title>
    <meta name="viewport" content="width=device-width">
    <style>
        body
        {
            margin:0;
        }
        #content
        {
            margin: 0 auto;
            width: 980px;
            border:1px solid #c4c4c4;
            background-color:#f5f5f5;
        }
    </style>
</head>
<body>
<div id="content">
    A small amount of content
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

在iPad上观看时,980px的主要内容区域将不会自动缩放以适应iPad屏幕.但是,如果您A small amount of content使用大量内容替换,即...足以导致垂直滚动,则页面将在iPad上自动缩放.

有人知道为什么吗?我一直在搜索高低,当页面上的内容很少时,似乎无法找到强制自动缩放的方法.

更改视口内容以width=980修复问题当然,但是我正在创建一个响应式网站,因此视口需要device-width.

我正在使用媒体查询来改变智能手机上内容区域的CSS(达到100%宽度),我希望使用iPad的标准桌面版本的iPad.

任何想法将不胜感激.

注意:我在带有视网膜显示器的iPad上进行测试,我不确定旧型号会发生什么.

html css viewport ipad

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

ipad ×1

sass ×1

viewport ×1

web-compiler ×1