百科狗支持 CSS 规则 - scss 语法
支持 CSS 规则
Sass支持所有属于CSS本身的规则。为了保持灵活性并与未来版本的 CSS 向前兼容，Sass 提供了基本支持，默认情况下几乎涵盖了所有 CSS 规则。CSS 规则写为@，@{…}，或@{…}。名称必须是标识符，值（如果存在）可以是几乎任何东西。名称和值都可以包含插值。
@namespace svg url(http://www.w3.org/2000/svg);
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
}
如果 CSS AT 规则嵌套在样式规则中，则两者会自动交换位置，以便 AT 规则位于 CSS 输出的顶层并且样式规则位于其中。这使得添加条件样式变得容易，而无需重写样式规则的选择器。
| scss 语句 | css 语句 |
|---|---|
.print-only {
display: none;
@media print { display: block; }
}
| .print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
}
|
@media
该@media规则执行上述所有操作以及更多操作。除了允许插值外，它还允许在特征查询中直接使用 SassScript 表达式。
| scss 语句 | css 语句 |
|---|---|
$layout-breakpoint-small: 960px;
@media (min-width: $layout-breakpoint-small) {
.hide-extra-small {
display: none;
}
}
| @media (min-width: 960px) {
.hide-extra-small {
display: none;
}
}
|
在可能的情况下，Sass 还将合并相互嵌套的媒体查询，以便更轻松地支持尚未原生支持嵌套@media规则的浏览器。
| scss 语句 | css 语句 |
|---|---|
@media (hover: hover) {
.button:hover {
border: 2px solid black;
@media (color) {
border-color: #036;
}
}
}
| @media (hover: hover) {
.button:hover {
border: 2px solid black;
}
}
@media (hover: hover) and (color) {
.button:hover {
border-color: #036;
}
}
|
@supports
该@supports规则还允许在声明查询中使用 SassScript 表达式。
| scss 语句 | css 语句 |
|---|---|
@mixin sticky-position {
position: fixed;
@supports (position: sticky) {
position: sticky;
}
}
.banner {
@include sticky-position;
}
| .banner {
position: fixed;
}
@supports (position: sticky) {
.banner {
position: sticky;
}
}
|
@keyframes
该@keyframes规则的工作原理与一般的规则类似，只是它的子规则必须是有效的关键帧规则（%、from或to），而不是普通的选择器。
| scss 语句 | css 语句 |
|---|---|
@keyframes slide-in {
from {
margin-left: 100%;
width: 300%;
}
70% {
margin-left: 90%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
| @keyframes slide-in {
from {
margin-left: 100%;
width: 300%;
}
70% {
margin-left: 90%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
|
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
相关文章
