scss 长文件组织的有趣解决方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 长文件组织的有趣解决方案相关的知识,希望对你有一定的参考价值。

# tl;dr

Basically, you just conert main headings for parts of your Sass file into giant ASCII art headings using this: https://github.com/viisual/ASCII-Decorator SB3 package, so that they are readable from the minimap. Makes navigating really fast.

# The Long Version

I've been using Sass for probably the last 5-6 projects I've done and have done many tests locally as well as on CodePen with it and I love it and use many of the features, but one feature that I've used, but never felt settled with was the import feature. You can import, much like a css import, except if you import other Sass files, they'll be concatanated when compiled.

At first this seemed great and I thought I should break my huge css file up into lots of little files, but then I found managing and hunting down styles in multiple files became a nuissance, and auto-complete became a problem.

So, I was toying around with going back to one big single Sass file that would compile into one big single CSS file, but how to navigate the file? Then I found this: https://github.com/viisual/ASCII-Decorator

It's a Subilme Text module that let's you convert normal text into ASCII art! By using this module you can make headings for your sections that are readable from the minimap (check out the example).

If you use Sass comments, they will be stripped out on compile, so no need to worry about bloating up your script.

I've only been trying this for a couple days, while working on my new site, but so far I'm really liking it! Navigating around is so fast and intuitive and requires no thought. You just look at the minimap and click where you want to go.
//                                                                             ,,                 
//   mm                                                                      `7MM                 
//   MM                                                                        MM                 
// mmMMmm `7M'   `MF'`7MMpdMAo.  ,pW"Wq.   .P"Ybmmm `7Mb,od8 ,6"Yb. `7MMpdMAo. MMpMMMb.`7M'   `MF'
//   MM     VA   ,V    MM   `Wb 6W'   `Wb :MI  I8     MM' "'8)   MM   MM   `Wb MM    MM  VA   ,V  
//   MM      VA ,V     MM    M8 8M     M8  WmmmP"     MM     ,pm9MM   MM    M8 MM    MM   VA ,V   
//   MM       VVV      MM   ,AP YA.   ,A9 8M          MM    8M   MM   MM   ,AP MM    MM    VVV    
//   `Mbmo    ,V       MMbmmd'   `Ybmd9'   YMMMMMb  .JMML.  `Moo9^Yo. MMbmmd'.JMML  JMML.  ,V     
//           ,V        MM                 6'     dP                   MM                  ,V      
//        OOb"       .JMML.               Ybmmmd'                   .JMML.             OOb"      

以上是关于scss 长文件组织的有趣解决方案的主要内容,如果未能解决你的问题,请参考以下文章

markdown 长文件组织的有趣解决方案

scss 有趣的SCSS和bootstrap。

如何组织他的项目 React(没有 Redux)的文件?

scss 修复div中的长文本

scss 长阴影发生器Sass mixin

记一次 webpack.config.js 的 scss 加载问题的解决方案以及事情分析