node.js - scss 错误“预期媒体查询” - 使用多个媒体查询 - 标准化设备的大小
问题描述
我正在尝试基于此标准化我的 scss 上设备的大小:
/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'
在此之后,少说我想创建一个目标是小型设备和中型设备的媒体查询:
@media $small-devices,
@media $medium-devices{
....
}
但是我 @media $small-devices,
在线上遇到以下错误:
[scss] 媒体查询预期
环境:Visual Studio 代码、nodejs、angular 6、gulp、
任何人都知道如何解决这个问题?
解决方案
你应该告诉 SASS 你的字符串应该不加引号并像普通 CSS 一样对待:
@media #{unquote($small-devices)}{
// Your output here
}
您仍然可以像这样使用多个:
@media #{unquote($small-devices)},
#{unquote($extra-small-devices)}{
// Your output here
}
但也许,为了风格和优雅,您可能需要考虑构建一个只接受所有字符串的 mixin,然后像这样构建媒体查询:
@mixin media( $selectors... ){
$selector: '';
@each $s in $selectors {
@if $selector == '' { $selector: $s; }
@else { $selector: $selector + ', ' + $s; }
}
@media #{unquote($selector)}{
@content;
}
}
然后像这样使用它:
@include media( $extra-small-devices, $extra-large-devices ){
...
}
输出将是:
@media screen and (max-width: 600px), screen and (min-width: 1201px) {
...
}
推荐阅读
- javascript - 按下提交按钮时没有显示
- vue.js - 我可以在 vue.js 中仅重新渲染表格的一部分吗
- node.js - 下载和提取项目文件时出错响应正文无效〜blah〜expo-template-bare-minimum:EACCES:权限被拒绝
- sql - 如何创建列超过 1024 列的表类型
- docker - dotnet 核心应用程序在 Docker 中失败(System.IO.FileLoadException:无法加载文件或程序集'System.Configuration.ConfigurationManager)
- c# - 如何从利用其他外部 dll 的 c++ 项目制作 dll?
- c# - asp.net Core 身份验证登录(重定向到管理员)
- javascript - 如果我们无法访问表单 html 文件,是否有预填表单?
- python - 这里的 len() 有什么意义?
- python - freeze_support()--脚本一次又一次地运行并给出这个错误