Working on a project to revamp the front end of the Boda site group and using SCSS, I really realized how much fun pre-compiled CSS is to use

variable

$imgBaseUrl: '.. / ';
$theme-color: #5576BD; // Theme color
$font-color: # 272727; // The main font color
$font-sub-color: #c1c1c1; // Secondary font color
$full-width: 750px; . // And so on, styles used in multiple places, written directly as variables. .box{width:$full-width;
    font-size: 24px;
    color: $font-color;
    border: 1px solid $theme-color;
}
Copy the code

Comments in SCSS are written just like JS. After compilation, comments do not exist. Grey is often convenient

Nested CSS

In simple terms, CSS selectors at 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 compiling */#content article h1 { color: #333 }
#content article p {margin-bottom: 1.4em}
#content aside { background-color: #EEE }
Copy the code

The foundation does not say too much, next key came

knock

mixin

Mixins, which can package a piece of CSS into a block of code to be called. Such as:

// clearFloat @mixin clearFloat{zoom:1; &:after{display:block; clear:both; content:' '; visibility:hidden; }} // single line text overflow @mixin overEllipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }Copy the code

Mixins parameter

// Multiple lines of text overflow, pass parameter 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; } /* The usage of the argument with default values */ / the image is centered full @mixin imgCoverParm($top: 50%, $ty: -50%){object-fit: cover; position: relative; top: $top; left: 50%; transform: translate(-50%,$ty); }Copy the code

Mixins only need to use the @include directive when called

p.plain {
  color: # 444;@include multiOverEllipsis(2); // more than 2 lines omitted} /* Compiled */ p.lain {color:# 444;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
Copy the code

For example, when I design a mobile page layout, I usually use flex layouts, and the most common Flex layouts are written as mixins

If you want to invite

@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; }Copy the code

Function instruction @function

// Convert the percentage @function transPer ($num) {@return ($num// fontSize 12px to em @function transEm ($num) {@return ceil(($num / 12) * 100) / 100 * 1em }
Copy the code

This common usage scenario is a single CSS property that you write and may subsequently modify, for example

I designed the layout on the original project of Boda website group. In order to adapt to the screen with more resolution, I adopted the percentage layout for some styles. However, in the real environment, there may be conflicts due to media queries, so I used it when writing the code

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

conclusion

SCSS is super flexible, just these instructions help me a lot, n more line style. Suggest all try, there are other @extend (inherited instruction), #{} interpolation syntax, and so on very powerful functions, I have not used, slowly use up.