• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 样式规则

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

    SCSScss
    .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 会自动将外部规则的选择器与内部规则的选择器结合起来。

    SCSScss
    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提供服务所需的带宽就越多,浏览器渲染它所需的工作也就越多。保持那些选择器浅!


    选择器列表

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

    SCSScss
    .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;
    }
    


    组合选择器

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

    SCSScss
    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;
    }
    


    高级嵌套

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


    插值

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

    #{$name}
    

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

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


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

    SCSScss
    @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规则和选择器函数结合起来,以便在动态生成选择器时发挥强大的作用。

    下篇:属性声明