样式规则 - scss 样式

梵高1年前 (2023-11-21)阅读数 13#技术干货

样式规则

样式规则是 Sass 的基础，就像 CSS 一样。它们的工作方式相同：您可以使用选择器选择要设置样式的元素，并声明影响这些元素外观的属性。

SCSS	css
.button { padding: 3px 10px; font-size: 12px; border-radius: 3px; border: 1px solid #e1e4e8; }	.button { padding: 3px 10px; font-size: 12px; border-radius: 3px; border: 1px solid #e1e4e8; }

嵌套

但 Sass 想让你的生活更轻松。无需一遍又一遍地重复相同的选择器，您可以将一种样式规则写入另一个样式规则中。Sass 会自动将外部规则的选择器与内部规则的选择器结合起来。

SCSS	css
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }	nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

SCSS

css

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

⚠️注意！
嵌套规则非常有用，但它们也会使您难以想象您实际生成了多少CSS 。嵌套越深，为CSS提供服务所需的带宽就越多，浏览器渲染它所需的工作也就越多。保持那些选择器浅！

选择器列表

嵌套规则在处理选择器列表（即逗号分隔的选择器）方面很聪明。每个复杂选择器（逗号之间的选择器）都单独嵌套，然后将它们组合回一个选择器列表。

SCSS	css
.alert, .warning { ul, p { margin-right: 0; margin-left: 0; padding-bottom: 0; } }	.alert ul, .alert p, .warning ul, .warning p { margin-right: 0; margin-left: 0; padding-bottom: 0; }

组合选择器

您也可以嵌套使用组合选择器。您可以将组合器放在外部选择器的末尾，内部选择器的开头，或者甚至都放在两者之间。

SCSS	css
ul > { li { list-style-type: none; } } h2 { + p { border-top: 1px solid gray; } } p { ~ { span { opacity: 0.8; } } }	ul > li { list-style-type: none; } h2 + p { border-top: 1px solid gray; } p ~ span { opacity: 0.8; }

SCSS

css

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

高级嵌套

样式规则 - scss 样式

如果您想对嵌套样式规则做更多的事情，而不仅仅是将它们按顺序组合并用后代组合器（即纯空格）分隔它们，Sass 可以为您提供支持。

插值

scss 提供了使用#{}语法选择器和属性名的 SassScript 变量。可以在大括号中指定变量或属性名称。

#{$name}

$name是变量、属性名称或者表达式。

SCSS	css
p:after { content: "I have #{8 + 2} books on SASS!"; }	p:after { content: "I have 10 books on SASS!"; }

您可以使用插值将变量和函数调用等表达式中的值注入选择器。这在您编写 mixins 时特别有用，因为它允许您根据用户传入的参数创建选择器。

SCSS	css
@mixin define-emoji($name, $glyph) { span.emoji-#{$name} { font-family: IconFont; font-variant: normal; font-weight: normal; content: $glyph; } } @include define-emoji("women-holding-hands", "👭");	@charset "UTF-8"; span.emoji-women-holding-hands { font-family: IconFont; font-variant: normal; font-weight: normal; content: "👭"; }

SCSS

css

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

Sass 仅在解析插值后解析选择器。这意味着您可以安全地使用插值来生成选择器的任何部分，而不必担心它不会解析。

您可以将插值与父选择器&、@at-root规则和选择器函数结合起来，以便在动态生成选择器时发挥强大的作用。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)