Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "summing up the practical experience of reducing SCSS 50% style code". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Use the variable $

We can use variables to reuse attribute values, such as color, border size, picture path, etc., so that we can change one place and make global changes, thus realizing the function of "skin change".

Example 1: our component library uses variable configuration to uniformly change the color and font size of the component (skinning):

$color-primary: # 3ecacb; $color-success: # 4fc48d; $color-warning: # f3d93f; $color-danger: # f6588e; $color-info: # 27c6fa

Example 2: picture configuration and global introduction

There may be the following two problems with the use of images in Scss:

(1) if the style file and the vue file using the style file are not in the same directory, the picture will not be found.

(2) if the picture path configuration variable is written in the style of the vue file, but this writing results in the separation of the picture and the style

We can write the image path as a configuration file, and then introduce it globally, so that the image path can be changed uniformly (and this method will only be loaded when the corresponding picture is used, without causing additional performance problems):

$common-path:'. / primary/assets/img/'; $icon-see: $common-path+'icon-see.png'; $icon-play: $common-path+'icon-play.png'; $icon-comment: $common-path+'icon-comment.png'; $icon-checkbox: $common-path+'icon-checkbox.png'

2. @ import imports the Scss file

(1) the @ import rule in Css, which allows you to import other css files in one css file. However, the consequence is that the browser downloads other css files only when @ import is executed, which causes the page to load very slowly.

(2) the @ import rule in Scss, except that the @ import rule of scss imports the relevant files into the css file when it is generated. This means that all related styles are summed up in the same css file without the need for additional download requests.

Example 1: uniformly import the component style file import into index.sccs in the component library, and then if there is any place in the project where the component library is used, you only need to introduce the index.scss file at the entrance of the project, as shown below: introduce the style file of each component in the index.scss file:

@ import ". / base.scss"; @ import ". / webupload.scss"; @ import ". / message-hint.scss"

3. The use of local file naming

The file name of the scss partial file begins with an underscore. In this way, scss will not compile the file output css separately at compile time, but will only use this file as an import. The Mixer mixins is the most appropriate scenario when using scss because the Mixer does not need to compile the output css file separately.

Example 1: write the name of the mixer as a local file name, as shown in the following figure

Img

4. Nesting function of Scss and parent selector identifier

We can use nesting features and parent selector identifiers & to reduce duplicate code, especially if your CSS class uses the BEM naming convention, style class naming is a lengthy problem. Using this feature, the problem of lengthy naming of BEM can be solved, and the style is more readable.

Example 1: nesting function and parent selector identifier & solving the problem of BEM verbosity:

.tea-assignhw {& _ _ top {margin: 0;} & _ _ content {padding-left: 45px;} & _ _ gradeselect {width: 158px;}}

Subselector, sibling selector, and pseudo-class selector are used in the nesting of * * instance 2Rom selector *

(1) Sub-selector

& _ _ hint {margin: 20px; font-size: 14px; > p:first-child {font-weight: bold;}}

(2) Brother selector

& _ _ input {width: 220px; & + span {margin-left: 10px;}}

(3) pseudo-class selector

& _ _ browse {background: url ($btn-search) no-repeat; &: hover {background: url ($btn-search)-80px 0 no-repeat;} &: visited {background: url ($btn-search)-160px 0 no-repeat;}}

5. Use of @ mixin mixer and @ extend instruction

Variables enable you to reuse attribute values, but what if you want to reuse a large set of rules? Traditionally, if you use a stylesheet

If a repetition is found in the, the common rules will be extracted and placed in the new CSS class.

The mixer @ mixin and @ extend inheritance instructions can be used in Scss to solve the above-mentioned scenario of reusing a large piece of rules. But what's the difference between the two usage scenarios?

(1) the main advantage of @ mixin is that it accepts parameters. If you want to pass parameters, you will naturally choose @ mixin instead of @ extend, because @ extend cannot accept parameters

(2) because the mixer rules are mixed into other classes, repetition cannot be completely avoided in the output stylesheet. Selector inheritance means that one selector can reuse all styles of another selector without repeatedly outputting those style attributes; that is, using @ extend to generate DRY CSS-style code (Don't repeat yourself)

To sum up, if you need to pass parameters, you can only use the @ mixin mixer, otherwise use @ extend inheritance to achieve better.

Use of instance 1:@mixin Mixer

@ mixin paneactive ($image, $level, $vertical) {background: url ($image) no-repeat $level $vertical; height: 100px; width: 30px; position: relative; top: 50%;} &-- left-active {@ include paneactive ($btn-flip, 0,0);} &-- right-active {@ include paneactive ($btn-flip, 0,-105px);}

Use of instance 2:@extend inheritance

.common-mod {height: 250px; width: 50%; background-color: # fff; text-align: center;} &-mod {@ extend. Common-mod; float: right;} &-mod2 {@ extend. Common-mod;}

6. The use of default parameter values of @ mixin mixer

You don't have to pass all the parameters in the @ include mixer. We can specify a default value for the parameter. If the parameter you need to pass is the default value, you can omit it when you want to pass it. If the parameter you want to pass is not the default value, you can pass in a new parameter when @ include.

Use of default parameter values for instance 1:@mixin mixer

@ mixin pane ($dir: left) {width: 35px; display: block; float: $dir; background-color: # f1f1f1f1;} & _ paneleft {@ include pane;} & _ _ paneright {@ include pane (right);}

7. The use of # {} interpolation

Variables can be used in selector or property names through the # {} interpolation statement. When there are two pages with similar styles, we extract the similar styles into a page mixer, but the names of the two different page styles cannot be the same according to the BEM naming convention, so we can use interpolation to name dynamically.

Example 1: class names in page-level mixers are dynamically set using # {} interpolation

@ mixin home-content ($class) {. # {$class} {position: relative; background-color: # fff; overflow-x: hidden; overflow-y: hidden; &-- left {margin-left: 160px;} &-- noleft {margin-left: 0;}

8. The use of operations

SassScript supports addition, subtraction, multiplication, division, rounding and other operations of numbers (+, -, *, /,%)

The instance 1:input component sets the left and right inner margins according to the height of the input box, as follows:.

Ps-input {display: block; & _ inner {- webkit-appearance: none; padding-left: # {$--input-height + 10}; padding-right: # {$--input-height + 10};}}

9. The application of related scss's own function.

Scss comes with some functions, such as hsl, mix, and so on.

* * the click color of the instance 1:button component is to mix several colors together according to a certain proportion to generate another color. * * as follows:

&: focus {color: mix ($--color-white, $--color-primary, $--button-hover-tint-percent); border-color: transparent; background-color: transparent;} &: active {color: mix ($--color-black, $--color-primary, $--button-active-shade-percent); border-color: transparent; background-color: transparent;}

10. The application of related scss's own function.

The @ for instruction repeats the output style within a limited range, changing the output each time according to the value of the variable.

Example 1: for example, the 2nd to 8th div child nodes under the hwicon class need to be styled in the project, as shown below:

For $I from 2 through 8 {.com-hwicon {> div:nth-child (# {$I}) {position: relative; float: right;}

11. Each traversal, map data type, @ mixin/@include mixer, # {} interpolation

Different selector classes can be generated by combining each traversal, map data type, @ mixin/@include mixer, and # {} interpolation, and the background image in each selector class is different, as shown below:

$img-list: (accessimg, $papers-access), (folderimg, $papers-folder), (bmpimg, $papers-bmp), (xlsimg, $papers-excel), (xlsximg, $papers-excel), (gifimg, $papers-gif), (jpgimg, $papers-jpg), (unknownimg, $papers-unknown)); @ each $label, $value in $img-list {. Com-hwicon__# {$label} {@ include commonImg ($value) }}

12. Style code check check-- stylelint plug-in

CSS is not a programming language in the strict sense, but it should not be underestimated in the front-end architecture. CSS is a description-based stylesheet. If the description is confusing and irregular, it must be a ticking time bomb for other developers, especially those with obsessive-compulsive disorder. CSS seems simple, but it's still quite difficult to write a beautiful CSS. Therefore, it is urgent to verify the CSS rules. Stylelint is a powerful modern CSS detector that allows developers to follow consistent conventions and avoid errors in stylesheets.

* * (1) the installation commands for gulp, stylelint, gulp-postscss, postcss-reporter and stylelint-config-standard,** are:

Npm install gulp stylelint gulp-postscss postcss-reporter stylelint-config-standard--save-dev

(2) after the installation is completed, the gulpfile.js file is created in the project root directory. The file gulpfile.js is configured as follows:

Var reporter = require ('postcss-reporter'); var stylelint = require (' stylelint') Var stylelintConfig = {'extends':' stylelint-config-standard', 'rules': {' at-rule-no-unknown': [true, {'ignoreAtRules': [' extend', 'include',' mixin', 'for']}]}} Gulp.task ('scss-lint', function () {var processors = [stylelint (stylelintConfig), reporter ({clearMessages: true, throwError: true})]; return gulp.src ([' src/style/*.scss'] / / scss files that need to be checked by tools) .pipe (postcss (processors));}) Gulp.task ('default', [' scss-lint'])

(3) stylelint-config-standard inspection rules

Stylelint-config-standard is a standard verification rule officially recommended by stylelint. For specific verification rules, please refer to the official website.

(4) run the command to check the style

13. Plug-in for automatic style repair-- stylefmt plug-in

Stylefmt is a stylelint-based code correction tool, it can be based on the stylelint code specification convention configuration, where can be corrected for formatting output.

(1) the gulp.js configuration file is as follows:

Var stylefmt = require ('gulp-stylefmt'); / / automatic css format adjustment tool gulp.task (' stylefmt', function () {return gulp.src (['src/style/student/index.scss' / / scss file to be checked by the tool]) .pipe (stylefmt (stylelintConfig)) .pipe (gulp.dest (' src/style/dest/student')); gulp.task ('fix', [' stylefmt'])

(2) run the command to fix the style, as shown in the following figure

Img

14. Compile scss syntax into css syntax-- gulp-sass plug-in

When we first wrote the scss code, because we were not familiar with the syntax, the page effect of the scss code we wrote was not what we wanted. At this point, we can use the gulp-sass plug-in to monitor the scss code and generate the css code in real time, so that we can judge whether the scss code written is correct by looking at the css code.

(1) the gulp.js configuration file is as follows:

Var gulpsass = require ('gulp-sass'); gulp.task (' gulpsass', function () {return gulp.src ('src/style/components/hwIcon.scss') .pipe (gulpsass (). On (' error', gulpsass.logError)) .pipe (gulp.dest ('src/style/dest'));}); gulp.task (' watch', function () {gulp.watch ('src/style/components/hwIcon.scss', [' gulpsass'])) }); copy the code

(2) run commands to listen to scss files, and dynamically compile scss code to generate css code files, as shown in the following figure

This is the content of "practical experience Summary of reducing SCSS 50% style Code". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.