多媒体查询 @media 报错
2024-08-26 00:47:27
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
在使用多媒体查询时
@media screen and (max-width: 700px){
.user-name {
margin: rem(10px) rem(8px) 0;
font-size: rem(12px);
line-height: 1.2;
text-align: center;
color: $chat-nav-status-off-line;
@extend %ellipse-two-line;
} }
报错:You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
原因是:多媒体查询里不能用外部扩展选择器 @extend
在@media之类的指令中使用@extend有一些限制。Sass无法通过将@media块之外的CSS规则应用于其中的选择器。这意味着,如果在@media(或其他CSS指令)中使用@extend,则只能扩展出现在同一指令块中的选择器。
@extend指令用于共享规则和选择器之间的关系。
它可以扩展所有其他类的样式在一个类中,也可应用于自己特定的样式。
如下scss@extend示例:
.style{
font-size: 30px;
font-style: italic;
} h2{
color: #787878;
@extend .style }
.container{
@extend h2
}
编译后的css代码如下:
.style, h2, .container {
font-size: 30px;
font-style: italic;
} h2, .container {
color: #787878;
}
参考文章:https://www.cnblogs.com/ibabyli/p/9874775.html 作者: 栗子壳
最新文章
- isEmpty和isBlank的区别
- Intent的七大组件——Android开发之路5
- java 跨域
- 检测WCF服务是否在线第二版
- 【Beta】第一次任务发布
- a个人经验总结2
- NumPy 学习(1): ndarrays
- bookshelf
- 转:PCL+VS2010环境配置
- Eclipse 中使用 ctrl 无法追踪函数的问题
- QString 与 QByteArray笔记
- android设置eclipse中的自动提示功能
- yii2.0 面包屑的使用
- digitalocean注册验证账户、激活账号教程
- JVM 自动内存管理:对象判定和回收算法
- 五、Vi和Vim编辑器
- C# 多线程示例
- weex中使用sass(失败)
- csharp:SMO run sql script
- 《Entity Framework 6 Recipes》中文翻译 ---- 系列教程