资讯专栏INFORMATION COLUMN

sass(@at-root与&配合使用、without和with)

FleyX / 3015人阅读

摘要:与配合使用找父级应用于和默认只会跳出选择器嵌套,而不能跳出或。这个语法的关键词有四个表示所有,表示常规,表示,表示,因为目前还无法广泛使用,所以在此不表。

@at-root与&配合使用(找父级)

scss.style

css.style

应用于@keyframe

scss.style

css.style

 


@at-root (without: ...)和@at-root (with: ...)

默认@at-root只会跳出选择器嵌套,而不能跳出@media或@support。

如果要跳出这两种,则需使用@at-root (without: media),@at-root (without: support)

这个语法的关键词有四个:all(表示所有),rule(表示常规css),media(表示media),support(表示support,因为@support目前还无法广泛使用,所以在此不表)。

默认的@at-root其实就是@at-root (without:rule)。

scss.style

css.style


普通跳出嵌套

scss.style

css.style

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1794.html

相关文章

  • [Sass]-Sass入门

    摘要:未编译样式多继承链式继承占位选择器编译后样式中使用声明混合,可以传递参数,参数名以符号开始,多个参数以逗号分开,也可以给参数设置默认值。 初识Sass SASS简介 sass是一种css预处理器,用专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。Sass是CSS3的扩展,它增加了嵌套规则,变量,mixins,选择器继承等等。Sass生成格式良好的CSS,使样式表更易于组...

    godiscoder 评论0 收藏0
  • CSS外挂:Sass 之规则(Rules)指令(Directives)

    摘要:根据文件名引入。这和指令非常相似,只要后面的条件为就会执行。被编译为循环指令的形式,是个变量名,是一个表达式,他将返回一个列表值。被编译为学完了回过头来整理也真是麻烦,算是总结吧。 前戏:下面这些玩意还是比较实用的,好像是进阶Sass必备的,以后写起 CSS 要溜得飞起啊! 规则(Rules) 1. @import Sass 扩展了 CSS 的 @import 规则,让它能够引入 SC...

    honhon 评论0 收藏0
  • Sass 学习笔记

    摘要:有利于版权等关键信息的保留。变量后加上则变为全局变量。字符串运算符根据左边的字符判断最终结构是否有引号。若使用,则两个类必须同时使用,增加维护负担。一组重用的使用引入,可携带参数。 1. 什么是Sass css预处理器,帮助你书写更简单、可维持的css。 2. Sass的特征 变量(variable)帮助你存储需要重复使用的值; 嵌套(nesting)让你书写更少的选择器; par...

    lingdududu 评论0 收藏0
  • css预编译--sass进阶篇

    摘要:字符串函数函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串。颜色函数颜色函数在的官方文档中,列出了的颜色函数清单,从大的方面主要分为和三大函数,当然其还包括一些其他的颜色函数,比如说和等。 基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则。 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@i...

    周国辉 评论0 收藏0
  • 开发一个自己的 CSS 框架(一)

    摘要:当你改变一些基本配色之后,你会发现框架完全不同了。的变量以开头,赋值与相同,后面的代表它是可覆盖的。通过遍历字典,拿到和,设置相应的值即可。 这是一个系列,带着大家封装一个纯 CSS 框架,从零学习 SASS 语法。 代码仓库点我传送 showImg(https://segmentfault.com/img/remote/1460000015635558?w=221&h=202); 因...

    funnyZhang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<