Your location:Tech News>News>Script>Sass CSS framework depth analysis of macro mixed use

Latest News

Sass CSS framework depth analysis of macro mixed use

Author:fsadmin

Views:

  I focus on the map to explore this type of data, particularly the use of @ content, maps wonderful method implemented by @ at-root and unique-id () command merging, etc..One of them is mixed macro design pattern, the design patterns to solve some practical problems by using @extend Sass instruction and placeholder selectors:

  Since the beginning of the code is often incorporated placeholder expansion, so it should be placed on top of the code affected regardless of other factors;

  Priority use @include or @extend?The answer given here is @include.

  Since the core of consciousness is mixed macros by creating or expanding a placeholder selectors to dynamically generate relevant style.When it was first transferred call to participate, there will be a parameter related to a map variable record.Subsequently, when the same parameter called again, it will perform the same operation extension placeholder, instead of generating duplicate code.

  In the following code, there are some mixed macro parameters are the same, there are some parameters unique to or specific.Then finally generated in the CSS, you will find that the part may have the same parameters using the extended mode, i.e., combined mode selector; portion having a unique or specific parameter, still generates a separate selector styles.

  SCSS source code and test data:

  CSS Code copied to the clipboard

  // self-consciousness mixed macro example

  // define a global map, save the macro mixed-related information

  $ My-mixin-info: ();

  // parameters are defined using any form of macro mixing

  @mixin my-mixin ($ pos1, $ pos2, $ map: (), $ rest .) {

  // if necessary, to capture part or all of the parameters

  $ My-args: ($ pos1, $ pos2, $ map);

  // find these parameters by key ($ my-args) in the global map

  $ Id: map-get ($ my-mixin-info, $ my-args);

  // If found id

  @if $ id {

  // extend the id

  @extend% # {$ id};

  // generate any particular style

  specific: inspect ($ rest);

  }

  // otherwise

  @else {

  // Create a new id

  $ Id: unique-id ();

  // The id integrated into the mix macro map

  $ My-mixin-info: map-merge ($ my-mixin-info, ($ my-args: $ id)) !global;

  // generates a placeholder style top

  @ At-root {

  % # {$ Id} {

  // generate a total style

  common: inspect ($ my-args);

  }

  }

  // the extension placeholder

  @extend% # {$ id};

  // generate any particular style

  specific: inspect ($ rest);

  }

  }

  .test {

  @include my-mixin (1, 2, (), 4, 5);

  }

  .test2 {

  @include my-mixin (1, 2);

  }

  .test3 {

  @include my-mixin (1, 2, (), 6, 7);

  }

  Generate CSS code:

  CSS Code copied to the clipboard

  .test {

  specific: 4, 5;

  }

  .test, .test2, .test3 {

  common: 1, 2, ();

  }

  .test2 {

  specific: ();

  }

  .test3 {

  specific: 6, 7;

  }

  Mixed macro flexible parameter passing Cheats --Null

  Sass mixed in a macro, the transfer list to which we can facilitate quickly configure attributes.To this example, the following macro mix, which contains the four parameters, used to define the display elements, padding and margin.

  CSS Code copied to the clipboard

  @mixin display ($ disp, $ padding, $ l-margin, $ r-margin) {

  display: $ disp;

  padding: $ padding;

  margin-left: $ l-margin;

  margin-right: $ r-margin;

  }

  When we call this mixed macro, you must pass a reasonable value for each parameter, otherwise there will be error.

  This often forcing developers to non-essential variables by value, and even reset the initial value of the non-essential.So, how to avoid having to pass a value for each variable it?

  Optional parameter mixing macro

  If we provide a default value for the parameter, then this parameter became optional parameters:

  @mixin display ($ disp, $ padding: 0, $ l-margin: 0, $ r-margin: 0) {

  .

  }

  In this way, when you call the macro mixed again, $ padding, $ l-margin and r-margin parameter became optional parameters.However, at this time would cause another problem: the default parameters using a mixed macro and sometimes there will be some redundancy compared to the ideas generated pattern is not streamlined, and developers, and even a lot of repetitive codes.

  Null

  The good news is, Sass support null, which helps to significantly improve the experience of mixed macro optional parameters.

  By using null, you can exclude certain style, it does not generate the final CSS styles, assign a value unless we call mixed macro.Let''s use null as the default value to rewrite the above macro mix:

  CSS Code copied to the clipboard

  @mixin display (

  $ Disp,

  $ Padding: null,

  $ R-margin: null,

  $ L-margin: null) {

  display: $ disp;

  padding: $ padding;

  margin-left: $ l-margin;

  margin-right: $ r-margin;

  }

  This use was perfect!We still can define any optional parameters, but does not generate redundant CSS code.If you pass two mixed macro parameters, then it will generate the appropriate CSS style.

  CSS Code copied to the clipboard

  .nav__item {

  @include display (inline-block, $ l-margin: 20px);

  }

  The null operation

  Be sure to keep in mind that the use of null in operations, will throw an error.For example as follows:

  CSS Code copied to the clipboard

  @mixin display (

  $ Disp,

  $ Padding: null,

  $ L-margin: null) {

  display: $ disp;

  padding: $ padding;

  margin-left: $ l-margin;

  margin-bottom: $ l-margin * 2;

  }

  .nav__link {

  @include display (inline-block, 10px);

  }

  This will return an error message: Invalid null operation: "null times 2".The reason is because the $ l-margin is not defined, then can not be all numerical operations.

  Thus, Sass''s null has a powerful effect on mixed macro redundant output.

Recommend article

Relate article