Personal blog https://kwokronny.top

stylus-shortcut

Stylus-shortcut can speed up the writing of CSS. Through the mixin function in Stylus, common style combinations are combined into one simple sentence, reducing the amount of code to write. The stylus loop generates common style rules from common theme variables for quick use.

  • documentation
  • Project warehouse

Development intention

The original purpose of writing this project is to develop a SAAS platform, I have adopted iviewUI based on development, and through the custom theme to cover part of the style and color variables. It is often necessary to name elements on some elements and then simply add a spacing attribute or text color to them. Switching back and forth between style files and DOM files and naming unimportant elements is annoying. Maybe that’s why Bootstrap has become such a popular library.

Therefore, I simply generate multiple spacing styles and color styles according to the commonly used spacing in the design specification through the cycle of stylus, which is really very convenient and fast falling. It turns out that switching between files so often makes it easy to forget what you need to do. And then later on, when you’re writing styles for complicated designs, you’ll often write width and basically the next sentence will be height, and then da da da da, and you’ll write a lot of lines, but often this will follow a pattern, you’ll say left, you’ll say top, you’ll write width and height and then you’ll have rounded corners and so on, After writing front-end for a few years, I got tired of long style rules. Therefore, I use the mixin function of stylus to combine the rules I often use in writing CSS into one sentence. A small function can greatly improve efficiency. When writing documentation, I often ask myself whether the project is so small that it needs to become a library. I found the answer, small and simple is the initial heart of this project, he is to solve the development of small troubles often ignored, sorting out the rules to increase the efficiency of the writing is also the most important core of this small project if you have the same as I have these boring, might as well try this library ~

features

  • A set of accelerated style writing solutions developed through Stylus’s feature finishing
  • You can quickly transform commonly used specifications in design into variables to generate commonly used styles
  • Naming rules apply to BEM
  • Small and beautiful, solving only common but small problems

use

@import "your-custom-variable-file.styl" // Introduce custom variables
// also introduce shortcut.styl mixin.styl
@import "stylus-shortcut"
// or introduce shortcut.styl alone
@import "Stylus - the shortcut/SRC/shortcut. Styl / / or separate into mixins. Styl @ import"stylus-shortcut/src/mixin.styl
Copy the code

Variables with mixins that need to be automatically referenced in multiple files are available through stylus-loader

Configure global import in stylus-Loader, as shown in the vue-cli@3 configuration example

//vue.config.js
modules.export={
  ...
  css: {
    // Configure the CSS module
    loaderOptions: {
      // Pass configuration options to the preprocessor Loader
      stylus: {
        import: [
          "your-custom-variable-file.styl"."stylus-shortcut/src/mixin.styl"]}}}... }Copy the code

The sample

yoz_color = { primary: #1890ff, link: #1890ff, success: #52c41a, warning: #faad14, error: #f5222d }; yoz_spacing ? = { '5': 5px, '10': 10px, '20': 20px, '30': 30px }; .Copy the code
<div class="flex-h">
  <div class="text-c_primary">Text color primary</div>
  <! -- Text color for variable value primary-->
  <div class="box bg-c_primary spac-ml_20"></div>
  <! -- The background color is primary-->
  <div class="box bg-c_primary spac-mh_20"></div>
  <! -- Horizontal spacing -->
  <div class="box bg-c_primary spac-p_20">The distance between</div>
  <! -- Spacing inside four sides -->
</div>
Copy the code

Personal blog https://kwokronny.top