SASS component development, sass component

SASS component development, sass component
SASS component development

The SASS pre-processor increases the programming capability not available for css, improves the efficiency of front-end development, and extends the css writing skills.

Component development

Design a form prompt layer (including successful success, warning, error, and other status errors) component, css needs to define the basic style font-), padding (padding, margin), display, border, and other related content, and then define the required style for individual States.

Css component development

Define basic styles first, and then define a set of styles for each State.

. Tips {/* basic color settings */padding: 15px; margin-bottom: 20px; border-radius: 4px;} // success status. tips-success {background-color: #47a447; color: # fff;} // warning status. tips-warning {background-color: # ed9c28; color: # fff;} // error status. tips-error {background-color: # ed9c28; color: # fff ;}

The text and border color of each status must be set separately, which is a little complicated. Later expansion of other states, such as info and dangerous dange, is an increase in work costs. Fortunately, SASS provides programming capabilities to solve such concerns and improve work efficiency.

Sass component development

Components are simple encapsulation of data and methods.

Default variable value! Default

Let's take a look at a piece of js variable declaration code.

var a = 1;console.log(a);//1

Let's look at the sass code.

$ Color: blue; $ color: red ;! Default; // variable declaration! Default: the current value is the default value p {color: $ color; // output blue}

Statement!defaultIt is interesting to output blue here. To put it simply, assume that the variable Declaration has! Default indicates that this variable is the default value and can be overwritten by general global declarations. This does not reflect its great role.

@ Mixin Application

• Declare @ mixin first

• Use @ include to declare and call mixins as needed.

  /* mixin */@mixin tips($background,$text-color,$tipsStylePadding) {    background-color: $background;    color: $text-color;    padding: $tipsStylePadding;    margin-bottom: 20px;    border-radius: 4px;}

Call the function module. The current component can expand multiple component styles.

// Success status. tips-success {@ include tips ($ background, $ text-color, $ tipsStylePadding);} // warning status. tips-warning {@ include tips ($ background, $ text-color, $ tipsStylePadding);} // error status. tips-error {@ include tips ($ background, $ text-color, $ tipsStylePadding);} // Information Status (extended ). tips-info {@ include tips ($ background, $ text-color);, $ tipsStylePadding}

@ Include can be called at will wherever necessary, which is not standardized and difficult to maintain in the future.

Component instance

• Now we create a new scss file, which is now called _ tips. scss.

  /* Variable --------------------------------- */$ background: #47a447! Default; $ text-color: # fff! Default; $ tipsStylePadding: 15px! Default;/* mixin ------------------------------- */@ mixin tips ($ background, $ text-color, $ tipsStylePadding) {background-color: $ background; color: $ text-color; padding: $ tipsStylePadding; margin-bottom: 20px; border-radius: 4px;}/* style --------------------------------- * // success status. tips-success {@ include tips ($ background, $ text-color, $ tipsStylePadding);} // warning status. tips-warning {@ include tips ($ background, $ text-color, $ tipsStylePadding);} // error status. tips-error {@ include tips ($ background, $ text-color, $ tipsStylePadding);} // Information Status (extended ). tips-info {@ include tips ($ background, $ text-color, $ tipsStylePadding );}

Next we will call this file in the required file, and this component will be developed.

// Import _ tpis. scss @ import '_ tips ';

Question?

• The component is repeat and callable, and is also a simple encapsulation of data and methods.
• If we are not satisfied with the default padding of 15px, we need to change it to 5px.

Rewrite

Re-overwriting will produce the same code, which is not the component we want

// Import _ tips. scss @ import '_ tips ';. tips-success {padding: 5px;}/* compiled style ---------------------------------*/. tips-success {background-color: #47a447; color: # fff; padding: 15px; margin-bottom: 20px; border-radius: 4px ;}. tips-success {padding: 5px ;}

Modify parameters

Changing the @ include parameter also produces the same Code and is not the component we want.

// Import _ tips. scss @ import '_ tips ';. tips-success {@ include tips ($ tipsStyleBorder, 5px);}/* compiled style ---------------------------------*/. tips-success {background-color: #47a447; color: # fff; padding: 15px; margin-bottom: 20px; border-radius: 4px ;}. tips-success {background-color: #47a447; color: # fff; padding: 5px; margin-bottom: 20px; border-radius: 4px ;}

Correct Solution

Use it here! Default; feature

// Declare $ tpisStylePadding as 5px $ tpisStylePadding: 5px; // import _ tips. scss @ import '_ tips';/* compiled style ---------------------------------*/. tips-success {background-color: #47a447; color: # fff; padding: 5px; margin-bottom: 20px; border-radius: 4px ;}

Variable Design Principles

• All variables are the default values, followed! Default to facilitate overwrite;
• Some variables are switch variables, and the values can only be true or false. They can be used to indicate whether to output the style and apply it to compatible and control code;
• Some variables are compound variables. A variable has several values to reduce the number of variables.

References

• SassCore http://www.w3cplus.com/sasscore/index.html
• Variable http://www.w3cplus.com/preprocessor/sass-basic-variable.html of sass secrets