zoukankan      html  css  js  c++  java
  • [Sass] Level 3: Mixin -- Ex

    When to use MIXIN?

    Better way to use MIXIN is when you deal with browser prefiex, for example:

    @mixin transition($val...){
        -webkit-transition: $val;
        -moz-transition: $val;
        transition: $val;
    }

    Because when you use mixin, actually you just copy the mixin to the another css class, it is not efficent way to wirte css.

    But if use it with browser prefix, it can save your typing and you can pass in variable, make it more dynamic.

    Notice: $val..., the reason to use ... is because somtime you will passin the value like:

    color 0.3s ease-in, background-color 0.5s ease-out

    You have , inside, it will casuse problem if you don't give ... after $val.

    There is another way to use ...

    @mixin button($radius, $color){
       border-radius: $radius;
       color: $color;
    }
    
    $props = "4px, #ccc";
    
    .btn-a {
        @include button($props...)
    }

    Sass is smart enought to set $radius to 4px and color to #ccc. But you need to make sure the order is correct.

    Default value:

    .mtn-select{
      @include field-border($top: 'top', $right: 'right', $bottom: '', $left:'left');
      @include filed-validation;
      @include filed-common;
      margin-top: 0px;
      & .md-select-icon{
        margin-right: 18px;
      }
    
    }
    @mixin field-border($top:top, $right:right, $bottom:bottom, $left:left){
      border-#{$top}: 1px solid rgba(0,0,0,0.12) !important;
      border-#{$left}: 1px solid rgba(0,0,0,0.12) !important;
      border-#{$right}: 1px solid rgba(0,0,0,0.12) !important;
      border-#{$bottom}: 1px solid rgba(0,0,0,0.12) !important;
    }

     

    INCLUDE

    We've identified a set of properties that commonly appear in our stylesheet (sometimes with minor tweaks). Let's streamline the process of using these values by adding the commented lines to a mixin called assemble, then calling that mixin in .factory and.highrise.

    // background: #fff;
    // border: 1px solid #ccc;
    // padding: 10px;
    
    @mixin assemble{
      background: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      }
    
    .factory {
    @include assemble
    }
    .highrise {
    @include assemble
    }

    ARGUMENT

    That's a good start, but we need the ability to change the background color. Alter the mixin to take an argument called $bg, which should then be set as the value of the background property. Pass#fff in for .factory and #797979 in for .highrise.

    @mixin assemble {
      background: #fff;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble;
    }

    Answer:

    @mixin assemble($bg) {
      background: $bg;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .factory {
      @include assemble(#fff);
    }
    .highrise {
      @include assemble(#797979);
    }

    DEFAULT ARGUMENT

    The background color for declarations using assemble will most often be #fff. Add a default value to the $bg argument to reflect this discovery. Note: once the default value is set, remember to update your .factory @include.

    @mixin assemble($bg) {
      background: $bg;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .factory {
      @include assemble(#fff);
    }
    .highrise {
      @include assemble(#797979);
    }

    Answer:

    @mixin assemble($bg:#fff) {
      background: $bg;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble(#797979);
    }

    MULTIPLE ARGUMENTS

    Some elements also need a nonstandard amount of padding. Create a second argument, $pad, with a default value of 10px.factory uses the default value, but .highrise should have 20pxof padding on all sides.

    @mixin assemble($bg: #fff) {
      background: $bg;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble(#797979);
    }

    Answer:

    @mixin assemble($bg: #fff , $pad:10px) {
      background: $bg;
      border: 1px solid #ccc;
      padding: $pad;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble(#797979, 20px);
    }

    KEYWORD ARGUMENTS

    Given the number of people collaborating on this stylesheet, we should make the mixin call as clear as possible. Add $bg: and $pad: to the .highrise @include arguments, creating keyword arguments.

    @mixin assemble($bg: #fff, $pad: 10px) {
      background: $bg;
      border: 1px solid #ccc;
      padding: $pad;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble(#797979, 20px);
    }

    Answer:

    @mixin assemble($bg: #fff, $pad: 10px) {
      background: $bg;
      border: 1px solid #ccc;
      padding: $pad;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble($bg: #797979, $pad: 20px);
    }

    INTERPOLATING ARGUMENTS

    A change request just came in: the border should only apply to one side of these elements. Add a required argument $side to the mixin and interpolate that value to the border property (passingleft as $side should create border-left: 1px solid #ccc, for instance). .factory borders should be on the left side, .highrise borders on the right. As a reminder, arguments without default values need to come before arguments with default values.

    @mixin assemble($bg: #fff, $pad: 10px) {
      background: $bg;
      border: 1px solid #ccc;
      padding: $pad;
    }
    
    .factory {
      @include assemble;
    }
    .highrise {
      @include assemble($bg: #797979, $pad: 20px);
    }

    Answer:

    @mixin assemble($side, $bg: #fff, $pad: 10px) {
      background: $bg;
      border-#{$side}: 1px solid #ccc;
      padding: $pad;
    }
    
    .factory {
      @include assemble(left);
    }
    .highrise {
      @include assemble(right, $bg: #797979, $pad: 20px);
    }

    VARIABLE ARGUMENTS

    We're attempting to pass a comma-separated box-shadow value into our mixin as an argument, but we keep getting an error about the number of arguments. Alter $shadow to be a variable argument and accept the value below.

    @mixin modal($shadow) {
      box-shadow: $shadow;
      border: 1px solid #ccc;
    }
    
    .modal {
      @include modal(inset 0 0 5px #000, 0 2px 5px #000);
    }

    Answer:

    @mixin modal($shadow...) {
      box-shadow: $shadow;
      border: 1px solid #ccc;
    }
    
    .modal {
      @include modal(inset 0 0 5px #000, 0 2px 5px #000);
    }
  • 相关阅读:
    Python中正则表达式的巧妙使用
    Django的ORM常用查询操作总结(Django编程-3)
    Django的datetime.timedelta类(Django编程-2)
    Python面向对象静态方法,类方法,属性方法
    Python常用的内置函数
    InnoDB和MyISAM的区别
    python中字典和json的区别
    分布式代码管理系统GIT
    安装php扩展 ffmpeg-php
    把文件每隔三行合并成一行(awk之RS、ORS与FS、OFS)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3976211.html
Copyright © 2011-2022 走看看