多媒体查询 @media 报错
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 作者: 栗子壳
多媒体查询 @media 报错的更多相关文章
- 当子查询内存在ORDER BY 字句时查询会报错
问题:当子查询内存在ORDER BY 字句时查询会报错 SQL: SELECT * FROM ( SELECT * FROM USER ORDER BY USER_CORD ) S. 解决办法:在子查 ...
- 数据库查询语句报错-ORA-00911: invalid character
数据库查询语句报错-ORA-00911: invalid character 根据自己经验总结下: 1.都是分号惹的祸,有时候sql语句后面有分好导致这种错误 2.还有一种是从别处copy过来的sql ...
- mybatis mapper.xml 写关联查询 运用 resultmap 结果集中 用 association 关联其他表 并且 用 association 的 select 查询值 报错 java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for mybatis.map
用mybaits 写一个关联查询 查询商品表关联商品规格表,并查询规格表中的数量.价格等,为了sql重用性,利用 association 节点 查询 结果并赋值报错 商品表的mapper文件为Gooo ...
- sql查询语句报错处理——ERROR: failed to find conversion function from unknown to text
今天遇到写存储过程遇到的一个小问题,在查询语句中使用到了自定义的数当做列的值,然后想给这一列起一个别名 ,就直接在后面用了 as 别名.执行存储过程,存储过程报错,ERROR: failed to f ...
- MySQL查询语句报错 sql_mode=only_full_group_by 问题
升级MySQL到5.7后,查询语句总是报sql_mode=only_full_group_by问题,总结归纳了两种解决方案,推存第二种解决方案. 报错信息: [Err] 1055 - Expressi ...
- spring Mongodb查询索引报错 java.lang.NumberFormatException: empty String
最近事情比较多,本篇文章算是把遇到的问题杂糅到一起了. 背景:笔者最近在写一个mongo查询小程序,由于建立索引时字段名用大写,而查询的时候用小写. 代码如下: db.getCollection(&q ...
- MyBatis模糊查询不报错但查不出数据的一种解决方案
今天在用MyBatis写一个模糊查询的时候,程序没有报错,但查不出来数据,随即做了一个测试,部分代码如下: @Test public void findByNameTest() throws IOEx ...
- yii2.0 联表查询数据库报错:undefined index order_id
1.在查询时加了->select();如下,要加上order_id,即关联的字段(比如:order_id)比如要在select中,否则会报错:undefined index order_id / ...
- 监听lsnrctl status查询状态报错linux error 111:connection refused
报错现象 今天给客户一个单实例环境配置监听,创建正常,查询状态异常报错 tns tns tns linux error :connection refused 匹配MOS Starting TNS L ...
随机推荐
- postgresql中rank() over, dense_rank(), row_number() 的用法和区别
- Java中JDBC连接池&JDBCTemplate
数据库连接池 概念:其实就是一个容器(集合),存放数据库连接的容器. 当系统初始化好后,容器被创建,容器中会申请一些连接对象,当用户来访问数据库时,从容器中获取连接对象,用户访问完之后,会将连接对象归 ...
- SQL Server 管理套件(SSMS)
SQL Server 管理套件(SSMS) 当您按照之前章节的步骤顺利安装完 SQL Server 2014 后,要做的第一件事就是需要打开 SQL Server 管理套件,并且要知道怎样去使用它. ...
- hdu 6134 Battlestation Operational (莫比乌斯反演+埃式筛)
Problem Description > The Death Star, known officially as the DS-1 Orbital Battle Station, also ...
- WebRequest发送请求并接收返回值
public string getXmlStr(string hphmcode) { string Url = "http://localhost:80 ...
- <自动化测试>之<selenium API 查找元素操作底层方法>
搜罗了一些查找元素的除标准语句外,另外的语句使用方法,摘自 开源中国 郝云鹏driver = webdriver.Chrome(); 打开测试页面 driver.get( "http://b ...
- [CSP-S模拟测试]:夜鹰与玫瑰(数学)
题目描述 红晕爬上了白玫瑰的花瓣,花刺还没有到达夜莺的心脏,玫瑰的心依旧苍白如终年不化的积雪.由生命铸就的玫瑰不允许存在一丝一毫的瑕疵,假设玫瑰的一片花瓣可以抽象成一个点,一朵玫瑰我们用一个$N\ti ...
- mysql全家桶(四)存储过程
一.存储过程1.介绍简单的说,就是一组SQL语句集,功能强大,可以实现一些比较复杂的逻辑功能,类似于JAVA语言中的方法: 存储过程(Stored Procedure)是一种在数据库中存储复杂程序,以 ...
- javscript 实现iframe加载内容页出现LOADING效果
<div id="load" align="center"> <img src="http://sc.cnwebshow.com/u ...
- java == 和equals()
== == 是运算符 :可以使用在基本数据类型变量和引用数据类型变量当中 : 如果比较的是基本数据类型变量,比较两个变量保存的数据是否相等(不一定类型相同) 如果比较的是引用数据类型变量, 比较两个对 ...