14 practical experiences on reducing SCSS style code by 50%

Preface

Sass is an extension of the CSS3 language. It can help you write better style sheets more easily, free you from repetitive work and make your work more creative. Because you can embrace change more quickly, you will also dare to innovate in design. The style sheet you write can easily cope with changing colors or modifying HTML tags, and compile into standard CSS code for various production environments. The Sass syntax is relatively simple. The difficulty lies in how to apply Sass to actual projects, solve the pain points of CSS, and thus improve our efficiency. After exploring actual projects, I have summarized the following 14 practical experiences for sharing, hoping to help everyone broaden their thinking and better apply Sass to actual projects. In the project, we use Scss, which supports the traditional CSS-like syntax, so the following project experience summary takes Scss as an example.

1. Use of variable $

We can reuse attribute values ​​through variables, such as color, border size, image path, etc., so that we can make global changes by changing one place, thus realizing the function of "skinning".

Example 1: Our component library uses variable configuration to uniformly change the color, font size, etc. of components (skin change):

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

Example 2: Image configuration and global import

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

(1) If the style file and the vue file that uses the style file are not in the same directory, the image will not be found.

(2) If the image path configuration variable is written in the style of the vue file, but this writing method causes the image and style to be separated

We can write the image path into a configuration file and then import it globally, so that the image path can be changed uniformly (and this method will only load the corresponding image when it is used, and will not cause 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 Scss files

(1) The @import rule in Css allows other CSS files to be imported into one CSS file. However, the consequence is that the browser will only download other CSS files when @import is executed, which makes the page load very slowly.

(2) The @import rule in Scss is different in that the @import rule of scss imports related files when generating css files. This means that all related styles are grouped into the same CSS file without having to make additional download requests.

Example 1: In the component library, import the component style files into index.scss. If the component library is used in the project, you only need to introduce the index.scss file at the entrance of the project. The style files of each component are introduced in the index.scss file as shown below:

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

3. Use of local file naming

The filename of a scss partial file starts with an underscore. In this way, scss will not compile this file separately to output CSS during compilation, but only use this file as an import. When using scss, mixins are the most suitable use case because mixins do not need to be compiled separately to output CSS files.

Example 1: Write the name of the mixer in the local file naming method, as shown below

4. Scss's nested functionality and parent selector identifiers

We can use nested functions and parent selector identifiers & to reduce repeated code, especially if your CSS classes use the BEM naming convention and the style class naming is lengthy. Using this function can solve the problem of lengthy BEM naming and make the style more readable.

Example 1: Nesting functions and parent selector identifiers & solving BEM verbosity problem:

.tea-assignhw {   
 &__top {    
  margin: 0;    
}   
 &__content {   
   padding-left: 45px;   
 }    
&__gradeselect {  
   width: 158px;    
 } 
}

**Example 2:** Using child selectors, sibling selectors, and pseudo-class selectors in nested

(1) Child selector

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

(2) Sibling 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 directive

Variables allow you to reuse property values, but what if you want to reuse a large section of rules? The traditional approach is to

If duplication is found, the common rules will be extracted and put into new CSS classes.

In Scss, you can use the @mixin and @extend inheritance instructions to solve the above-mentioned scenario of reusing a large section of rules. But what is the difference between the two usage scenarios?

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

(2) Because mixin rules are mixed into other classes, duplication cannot be completely avoided in the output stylesheet. Selector inheritance means that one selector can reuse all the styles of another selector without repeating these style attributes; that is, use @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 it is better to use @extend inheritance.

Example 1: Use of @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);  
}

Example 2: Use of @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. Use of default parameter values ​​of @mixin mixer

When @include a mixer, you do not have to pass in all the parameters. You can specify a default value for the parameter. If the parameter you need to pass is the default value, you can omit the parameter when @include is called. If the parameter you need to pass is not the default value, you can pass in a new parameter when @include is called.

Example 1: Using default parameter values ​​of @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

The #{} interpolation statement allows you to use variables in selectors or attribute names. When there are two pages with similar styles, we will extract the similar styles into a page mixer, but the naming names of two different page styles cannot be the same according to the BEM naming specification. At this time, we can use interpolation for dynamic naming.

Example 1: Dynamically set class names in page-level mixers 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, and integer operations (+, -, *, /, %)

Example 1: The input component sets the left and right padding 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 functions, etc.

**Example 1: The click color of the button component is to mix several colors together in a certain proportion to generate another color. **As shown below:

&: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. Application of related scss built-in functions

The @for directive can repeatedly output a style within a limited range, and each time the output result is changed according to the value of the variable.

Example 1: For example, in the project, the styles of the 2nd to 8th div child nodes under the hwicon class need to be set as follows:

@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 combined use

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 checking and verification - stylelint plug-in

CSS cannot be considered a programming language in the strict sense, but it cannot be underestimated in the front-end system. CSS is a description-based style sheet. If the description is confusing and has no rules, it will definitely be a time bomb for other developers, especially those with obsessive-compulsive disorder. CSS seems simple, but it is still quite difficult to write beautiful CSS. So the action of verifying CSS rules is imminent. Stylelint is a powerful modern CSS checker that allows developers to follow consistent conventions and avoid errors in their stylesheets.

**(1) You need to install gulp, stylelint, gulp-postscss, postcss-reporter, stylelint-config-standard. The installation command is:

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

(2) After the installation is complete, a gulpfile.js file will be created in the project root directory. The configuration of the gulpfile.js file is:

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 verification rules

stylelint-config-standard is the 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. Style automatic repair plug-in - stylefmt plug-in

stylefmt is a code correction tool based on stylelint. It can be configured based on stylelint's code standard conventions and format the output of correctable areas.

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

var stylefmt = require('gulp-stylefmt'); // CSS format automatic adjustment tool gulp.task('stylefmt', function() {  
  return gulp.src(     
  ['src/style/student/index.scss' // scss file that needs tool checking]).pipe(stylefmt(stylelintConfig))  
    .pipe(gulp.dest('src/style/dest/student'));});  
 gulp.task('fix', ['stylefmt']);

(2) Run the command to repair the style, as shown in the figure below

14. Compile scss syntax into css syntax - gulp-sass plugin

When we first wrote the scss code, due to unfamiliarity with the syntax, the page effect obtained by the written scss code was not what we wanted. At this time, 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 written scss code is correct by viewing 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']);  
});

(2) Run the command to monitor the scss file and dynamically compile the scss code to generate the css code file, as shown in the following figure

This concludes this article about 14 practical experiences in reducing SCSS style code by 50%. For more relevant content on reducing SCSS style, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!