Share 14 hands-on experiences that can reduce SCSS 50% of style code

preface

Sass is an extension of CSS3 language that helps you write better style sheets more easily, freeing you from duplication of effort and making your work more creative. B ecause you can embrace change faster, you will also dare to innovate in design. T he style sheets you write are comfortable with modifying colors or HTML tags, and compile standard CSS code for a variety of production environments. Sass syntax is simple, and the difficulty is how to apply Sass to real-world projects to address the pain points in CSS and improve our efficiency. A fter the actual project groping, summarized the following 14 practical experience to share, hoping to help you broaden the thinking, better use Sass into the actual project. In the project, we use the traditional class CSS syntax, Scss so the following project lessons learned are shared in the example Scss

1, variable $ use

We can reuse property values with variables, such as color, border size, picture path, and so on, so that we can make a change in one place, so as to make global changes, so as to achieve the function of skinning.

Example 1: Our component library, using variable configuration, to make uniform changes to component color, font size, etc. (skinning):

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

Example 2: The configuration of the picture and the global introduction

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 picture will not be found

(2) If you write the picture path configuration variable in the style of the vue file, but the writing causes the picture and style to separate

We can write the picture path as a profile and then introduce it globally so that we can change the picture path uniformly (and the method will only load when using the picture without causing additional performance issues):

$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 Scs file

(1) @import rule in Css which allows other css to be imported into one css file. The consequence, however, is that the browser will only download other css when it is executed to @import which causes the page to load particularly slowly.

(2) @import rules in Scss except that @import rules of scss import related css when they are generated. This means that all relevant styles are summarized in the same css file without the need to initiate additional download css

Example 1: The component library uniformly import the component's style file into index.sccs and then if there is a place in the project where the component library is used, only the index.scss is introduced at the entrance to the project, as index.scss

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

3, the use of local file naming

The file name scss local file begins with a dash. T his way, scss will not compile the file output css separately at compile time, but will only use the file as an import. Mixer mixins are the most appropriate use scenario when using scss because the mixer does not need to compile the output css separately.

Example 1: How the name of the mixer is written as a local file name, as shown in the following image

4, Scs nesting features and parent selector identifier

We can use nesting features and parent selector identifiers to reduce duplicate code, especially if your CSS class uses BEM naming specification, and style class naming has lengthy problems. With this feature, you can solve the problem of BEM naming lengthy and style readability.

Example 1: Nesting features and parent selector identifiers to resolve LENGTHY BEM ISSUES:

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

Example 2: Use sub-selectors, sibling selectors, and pseudo-class selectors 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 the use of mixers and @extend instructions

Variables enable you to reuse property values, but what if you want to reuse a large number of rules? The traditional practice is if you are in a style sheet

If repetition is found, common rules are pulled out and placed in the new CSS class.

In Scss you can use mixer @mixin and @extend inheritance instructions to resolve scenarios that reuse a large number of rules mentioned above. But what's the difference between the two usage scenarios?

(1) the main advantage @mixin is its ability to accept parameters. If you want to pass parameters, you naturally choose @mixin rather than @extend, because @extend cannot accept parameters

(2) Because mixer rules are mixed into other classes, duplication cannot be completely avoided in the output style sheet. Selector inheritance means that one selector can reuse all the styles of the other selector without repeatedly outputting these style properti @extend

In summary, if you need to pass parameters, you can only use @mixin mixer, otherwise @extend use @extend inheritance to achieve better.

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: @extend The Use Of Inheritance

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

(Recommended tutorial: CSS tutorial)

6, @mixin the use of the mixer default parameter values

Instead of having to pass in all parameters when @include mixer, we can specify a default value for the parameters, which can be omitted when @include if the parameters that need to be passed are default values, or new parameters when @include

Example 1:@mixin the use of the mixer default parameter values

@mixin pane($dir: left) {
  width: 35px;
  display: block;
  float: $dir;
  background-color: #f1f1f1;
}
&__paneleft {
  @include pane;
}
&__paneright {
  @include pane(right);
}

7, the use of interpolation

You can use variables in a selector or property name with a plug-in statement. When two pages have similar styles, we extract similar styles into a page mixer, but the naming names of two different page styles cannot be the same according to BEM naming specification, so we can use interpolation for dynamic naming.

Example 1: The class name in the page-level mixer is dynamically set with the interpolation of the value

@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 the addition, subtraction, division, and other operations of numbers (-, -, s, /, %)

Example 1: The input component sets the left and right margins based on 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 the relevant scss bring their own functions

scss come with functions such as hsl mix and so on.

Example 1: The click-after color of the button component is to mix several colors together at a certain scale to produce another color. Here's what it looks like:

&: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 come with the application of functions

@for instruction repeats the output style within the limits, changing the output each time by the value of the variable.

Example 1: For example, in a project, you need to style the second to eighth div child nodes under the hwicon class, 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, plug-in

You can generate different selector classes by combining each traversal, map data type, @mixin/@include mixer, and interpolation, and the background picture in each selector class is different, as follows:

$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 strict programming language, but it cannot be underestimated in the front-end system. CSS is a description-based style sheet, and if it's confusing and irregular, it must be a time bomb for other developers, especially people with obsessive compulsive disorder. CSS seems simple, and it's hard to write beautiful CSS T herefore, the action of verifying CSS rules is imminent. stylelint is a powerful modern CSS detector that allows developers to follow consistent conventions and avoid errors in style sheets.

(1) Gulp, stylelint, gulp-postscs, postcs-reporter, stylelint-config-standard need to be installed, the installation command is:

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

(2) After installation, a gulpfile .js file is created at the root of the project, and the file gulpfile .js configured as:

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文件 
  ).pipe(postcss(processors));});
 gulp.task('default', ['scss-lint']);

(3) Stylelint-config-standard test rules

stylelint-config-standard is the official recommended standard check rule for stylelint and reference to the official website is available for details of the check rules.

(4) Run the command for style checking

13, style automatic repair plug-in - stylefmt plug-in

stylefmt is a stylelint code remediation tool that formats the output of remediable places based on the configuration of stylelint code specification convention.

(1) The .js profile of gulp is as follows:

var stylefmt = require('gulp-stylefmt'); // css格式自动调整工具
gulp.task('stylefmt', function() {
  return gulp.src(
  ['src/style/student/index.scss' // 需要工具检查的scss文件
  ]).pipe(stylefmt(stylelintConfig))
    .pipe(gulp.dest('src/style/dest/student'));});
 gulp.task('fix', ['stylefmt']);

(2) Run the command for style repair, as shown in the following image

14, the scss syntax compiled into the css syntax - gulp-sass plug-in

When you first write scss because you are not familiar with the syntax, etc., the page effect of the scss code you write is not what we want. At this point, we can use gulp-sass plug-in to listen to scss code and generate css code in real time, so that we can see if the scss code is written correctly by looking at scss code. css

(1) The .js profile of gulp 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 listen to the scss file, dynamically compile the scss code to generate the css code file, as shown in the following image

(Recommended micro-class: CSS micro-course)

Source: github.com/fengshi123/blog/issues/8

These are W3Cschool编程狮 hands-on experience with 14 style codes that can reduce SCSS by 50%, and I hope it will help you.