欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Sass 基础(三)_html/css_WEB-ITnose

程序员文章站 2022-05-24 09:48:05
...
扩展/继承
    继承对于了解css 的同学来说一点都不陌生,先来看一张图
    在Sass 中也具有继承一说,也就是继承类中的样式代码块,在Sass中时通过关键词“@extend”来
    继承已经存在的类样式块,从而实现代码的继承。
  //SCSS
      .btn{
          border:1px solid #ccc;
          padding:6px 10px;
          font-size:14px;
      }
    .btn-primarg{
        background-color:#f36;
        color:#fff;
        @extend .btn;
      }
    .btn-second{
        background-color:organge;
        color:#fff;
        @extend .btn;
      }
  编译出来之后:
    //css
      .btn, .btn-primary, .btn-second {
                  border:1px solid #ccc;
                  padding:6px 10px;
                  font-size:14px;
              }
      .btn-primary{
            background-color:#f36;
            color:#fff;
          }
      .btn-second{
          background-color:orange;
          color:#fff;
        }
 在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:
        .btn, .btn-primary, .btn-second {
                      border: 1px solid #ccc;
                      padding: 6px 10px;
                      font-size: 14px;
        }
占位符%placeholder
     Sass中的占位符%placeholder 功能是一个很强大,很实用的一个功能,可以取代以前的css中的基类造成的
     代码冗余的情形,因为%placeholder 声明的代码,如果不被@extend 调用的话,不会产生任何代码。
        %mt5{
            margin-top:5px;
          }
        %pt5{
            padding-top:5px;
          }
        .btn{
            @extend %mt5;
            @extend %pt5;
        }
        .block{
            @extend %mt5;
          span{
            @extend %pt5;
              }
        }
      编译出来的css
         //css
        .btn, .block{
              margin-top:5px;
          }
        .btn, .block span{
              padding-top:5px;
        }
    通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。
混合

    混合宏vs继承vs占位符
     a Sass中的混合宏使用
      //SCSS中混合宏使用
      @mixin mt($var){
              margin-top:$var;
            }
      .block{
          @include mt(5px);
          span{
            display:block;
            @include mt(5px);
          }
        }
      .header{
          color:orange;
          @include mt(5px);
          span{
            dispay:block;
            @include mt(5px);
            }
        }
      编译结果:
        .block span {
            display: block;

            }
        .header {
            color: orange;

            }
        .header span {
            display: block;

          }
        .block, .block span, .header, .header span {
              margin-top: 5px;

          }
    建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
  b)Sass中继承
    同样的,将上面代码中的混合宏,使用类名来表示,然后通过继承来调用。
          .mt{
              margin-top:5px;
            }
          .block {
              @extend .mt;
            span{
                display:block;
                @extend .mt;
              }
            }
          .header{
              color:orange;
              @extend .mt;
          }
     编译结果:
        .block span {
            display: block;

          }
      .header {
          color: orange;

          }
      .header span {
          display: block;

          }
      .block, .block span, .header, .header span {
        margin-top: 5px;

          }

    建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用Sass的继承。
  c)占位符
      最后来看占位符,将上面的代码中的基类.mt 换成Sass的占位符格式
    //SCSS中占位符的使用
      %mt{
        margin-top:5px;
      }
      .block{
        @extend %mt;
        span{
          display:block;
          @extend %mt;
          }
        }
      .header{
        color:orange;
        @extend %mt;
        span{
          display:block;
          @extend %mt;
        }
        }
    编译结果:
      .block span {
        display: block;

        }
      .header {
        color: orange;

         }
      .header span {
        display: block;

        }
    编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,
    不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”

 差值#{}
    使用css 预处理器语言的一个主要原因是想使用Sass 获得一个更好的结构体系,比如说你想写更干净的,搞笑的和面向对象的
    css. Sass 中的差值(Interpolation)就是重要的一部分,让我们看一下下面的例子。
      $properties:(margin ,padding);
      @mixin set-value($side,$value){
      @each $prop in $properties{
        #{$prop}-#{$side}:$value;
          }
        }
      .login-box{
        @include set-value(top,14px);
        }
      代码编译成css
      .login-box{
          margin-top:14px;
          padding-top:14px;
      }
    当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器。
    @mixin generate-sizes($class,$small,$medium,$big)

相关标签: Sass 基础(三)