Cut the weapon! Recommended usage of scss

Posted Jun 16, 20203 min read

After undergoing a project to transform the front-end page of the Boda station group, using scss, I really realized how cool pre-compiled css is to use

Variable

$imgBaseUrl:'../';
$theme-color:#5576BD; //theme color
$font-color:#272727; //main font color
$font-sub-color:#c1c1c1; //secondary font color
$full-width:750px;
....
//And so on, the styles used in many places are directly written as variables. when using it

.box{
    width:$full-width;
    font-size:24px;
    color:$font-color;
    border:1px solid $theme-color;
}

The comments in scss are written like js. After the compilation is complete, the comments do not exist. Often convenient

Nested css

To put it simply, css selectors of the same level in scss can be written only once:

#content {
  article {
    h1 {color:#333}
    p {margin-bottom:1.4em}
  }
  aside {background-color:#EEE}
}

 /* After compilation */
#content article h1 {color:#333}
#content article p {margin-bottom:1.4em}
#content aside {background-color:#EEE}

Not much to say about the basics, then The key point is coming

Knock

mixin

Mixin(mixer), you can package a piece of css into a code block, call. such as:

//float
@mixin clearFloat{zoom:1; &:after{display:block; clear:both; content:''; visibility:hidden; height:0}}
//Single line text overflow
@mixin overEllipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

mixin pass parameter

//Multi-line text overflow, passing parameters can control n lines beyond hidden
@mixin multiOverEllipsis($column) {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:$column; -webkit-box-orient:vertical;}

/*Usage of parameters with default values*/
//The picture is centered on the shop
@mixin imgCoverParm($top:50%, $ty:-50%)(object-fit:cover; position:relative; top:$top; left:50%; transform:translate(-50%,$ty); }

When the mixin is called, only the @include instruction is needed

p.plain {
  color:#444;
  @include multiOverEllipsis(2); //Omit more than 2 lines
}

/*After compilation*/
p.plain {
  color:#444;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

For example, when I design mobile page layouts, I generally use flex layouts, and commonly used flex layouts are written as mixins.

If you need to pick it up

@mixin text-elli {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@mixin text-elli-two{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

@mixin flex-lc {display:flex; justify-content:flex-start; align-items:center;}
@mixin flex-cc {display:flex; justify-content:center; align-items:center;}
@mixin flex-rc {display:flex; justify-content:flex-end; align-items:center;}
@mixin flex-bc {display:flex; justify-content:space-between; align-items:center;}
@mixin flex-ac {display:flex; justify-content:space-around; align-items:center;}
@mixin flex-lc-column {display:flex; flex-direction:column; justify-content:flex-start; align-items:center;}
@mixin flex-cc-column {display:flex; flex-direction:column; justify-content:center; align-items:center;}
@mixin flex-cl-column {display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
@mixin flex-lc-wrap {display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;}
@mixin flex-cc-wrap {display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}

Function instruction @function

//Turn percentage
@function transPer($num) {@return($num/750) * 100 * 1%}
//fontSize 12px to em
@function transEm($num) {@return ceil(($num/12) * 100)/100 * 1em}

This general usage scenario is to write, **single css attributes that may be modified later, such as

I designed the layout on the original projects of the Boda website group. In order to adapt to more resolution screens, I used some layouts with percentage layouts. However, in the real environment, there are media queries and there may be conflicts. So when writing code, I use

#sidebar {width:transPer(24);} //24 represents the design size of the rendering 24px
/*After compilation*/
#sidebar {width:3.2%;}

to sum up

Scss is really super flexible, just these instructions, helped me a lot, less n multi-line style. It is recommended to try everything, there are other @extend(inheritance instructions), #{} interpolation syntax, etc. Very powerful functions, I have not used them yet, and slowly use them.