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

This article focuses on "what are the ways to reduce SCSS 50% style code", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the ways to reduce SCSS 50% style code.

Preface

Sass is an extension of the CSS3 language, which can help you write better stylesheets more easily, get rid of repetitive work, and make your work more creative. Because you can embrace change faster, you will also dare to innovate in design. The stylesheet you write can easily change colors or HTML tags, and compile standard CSS code for use in a variety of production environments. The syntax of Sass is relatively simple, but the difficulty lies in how to apply Sass to the actual project to solve the pain points of CSS, so as to improve our efficiency.

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: # 3ecacbtransfercolorcolor success: # 4fc48dtransf "Colormuri": # f3d93f "colormuri": # f6588e "colormuri 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 Import 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. 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

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;}}

Example 2: using subselector, sibling selector, and pseudo-class selector in nesting

(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, @ 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, @ mixin Mixer default parameter values

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: # f1f1f1;} & _ paneleft {@ include pane;} & _ _ paneright {@ include pane (right);} 7, # {} 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, 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 shown below:

.ps-input {display: block; & _ inner {- webkit-appearance: none; padding-left: # {$--input-height + 10}; padding-right: # {$--input-height + 10};}} 9. Application of related scss built-in functions

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

The click-on color of the instance 1:button component mixes several colors together according to a certain proportion to produce 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, related scss's own function application

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) gulp, stylelint, gulp-postscss, postcss-reporter and stylelint-config-standard need to be installed. The installation command is as follows:

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 file that needs 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 repair the style

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 code

(2) run commands to monitor scss files and dynamically compile scss code to generate css code files

At this point, I believe you have a deeper understanding of "what are the ways to reduce SCSS 50% style code?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.