Reading Notes on "Beginning CSS Preprocessors"
I recently quickly read a book called “Beginning CSS Preprocessors.” The book’s explanations of Less, Sass, and Compass usage are slightly outdated, but overall, I still gained several insights and ideas from reading it. I’ll mark them down here.
The Mission and Destiny of Preprocessors
- CSS doesn’t follow the DRY principle, so in practice, our written styles contain a lot of repetition. The mission of preprocessors is to improve maintainability, flexibility, and be as DRY as possible.
- Preprocessors merely transform one form of style writing into the target CSS format, which means that preprocessors don’t add new functionality to styles; they only improve the development experience. We often use TypeScript instead of JavaScript for development now, but it still compiles to JavaScript in the end. From this perspective, the two are similar.
Should We Use Preprocessors?
If a website is overly simple, whether to use preprocessors or not doesn’t matter much. But as site styles become more complex, preprocessors are indeed worth using for maintainability. With variables, nesting, functions, and mixins, we can significantly reduce the amount of CSS code.
Similarities and Differences Between Less and Sass
- Less was released after Sass. To lower the learning curve, Less is compatible with CSS syntax.
- Less’s bracket structure influenced Sass, which later absorbed some of Less’s advantages and released SCSS. So technologies influence each other.
- Sass supports logical conditionals, while Less doesn’t. From this perspective, Sass is more powerful. But as mentioned above, being powerful only improves the development experience; Less can achieve the same output styles.
Compass Is No Longer Maintained
Compass has not been maintained since August 2016, but strictly speaking, it’s not dead; it just exists in another form, even if just as an idea.
To digress a bit, the MacBook series has now been discontinued by Apple, but the unibody design and USB-C ports of the MacBook have been applied and upgraded in later MBPs. So, technologies are all the same in this regard.
Mac Comes with a Ruby Environment
- Ruby is a programming language
- Mac systems come with Ruby pre-installed. For example, my current system is macOS 10.15.4, and the Ruby version is
3.0.3. Additionally, Mac also comes with a Python environment. Why does Mac preinstall Ruby and Python? I think it’s because some built-in applicationsperhaps Xcodeactually use them. - Gem is Ruby’s package manager, providing a standard format for distributing Ruby programs and libraries, as well as a tool for managing package installation.
CSS Sprites
- The purpose of CSS sprites is to reduce network requests, lower webpage request overhead, and display target images through positioning.
- Currently, when we use sprites, we can actually achieve this directly through webpack plugins.
Conclusion
- These are the insights I gained after reading this book.
- I’ve been too busy lately and haven’t read enough. I have to say, reading is indeed a good way to systematically supplement knowledge and broaden horizons.
