Use Collapsible And Expandable Code Regions Feature In Visual Studio For Editing CSS/SCSS/LESS Files

The Best CSS editing feature

Collapsible/ Expandable Code Regions in Visual Studio Community 

Currently, the Visual Studio IDE is the world's best IDE available. Many people think that Visual Studio IDE is not free. Even though there are paid versions for enterprise developers, there is a free community edition for personnel and small teams. The community edition is more than enough to build a site like Facebook or even Amazon.com.  The IDE can be used in many programming languages to build a cross-platform desktop app, mobile app, or full-featured web application.

Today I am going to discuss a very handy feature available for editing CSS/SCSS or LESS files. When coding thousands of lines, it is very hard to track if we do not put comments to describe the code for later references. 

When we add lots of comments, the code will get a bit messy. In normal C# editing, it provides the developer with the region feature to collapse and expand it when necessary. 

Similarly, for CSS, there is a way to shrink a large block of code into a single line, using regions, 

In Visual Studio, we can add a collapsible region so that we can quickly collapse code sections to find and navigate to a different section of the file.

To add a region

In a CSS/LESS or SCSS file type region and then press(Esc if you see the context list, then) the tab button from the keyboard. It will add a code block for you like this:


    /*#region name */


    /*#endregion */

Then type a meaningful title over yellow highlighted "name".

Note: In addition to that just type the same title next to "#endregion so that it is easy to recognise if you expand a long code region and scroll to the bottom part of the region.

for example, if I want to place all my code related to the "Service" section, I will create a region as:


    /*#region Services */
    
    .section-divider {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    /*#endregion  Services*/
You can easily collapse a region by clicking on the minus (-) sign located in front of the Region and then expand by clicking on the plus (+) sign. 

Here are some examples  how what it looks like in the editor:

 Collapsed region


Expanded region


with multiple regions


Nested regions

Also, you can have nested regions.


Hope this will help to write well-organised and maintainable CSS coding.



Comments

Post a Comment

Popular posts from this blog

Examining the Project structure - ASP.NET Core 7 Part 4

Image
ASP.NET Core 7: Examining the Project Structure This is part 4 of the " Web App Development Beginners Guide " tutorial series. In this tutorial series, we will learn how to build a functional Web Application with individual account user login. Part 4. ASP.NET Core 7: Examining the Project Structure We are going to use the project we created in the first tutorial  ASP.NET Core 7: Creating A Razor Pages Web Application: Step-by-Step Guide .    In that, we used the  ASP.NET Core Razor Web Page Application  template to create the project. Figure  1 shows the project structure  inside the Solution Explorer, where it displays the top-level folder structure.   It has 2 main files, 5 folders and two project items ( Connected Service  and  Dependencies ). Figure 1: Solution Explorer -Top-level view When using the wizard, there are a few options to choose from. The final generated project code and structure depend on these selections. For example, if a project is created using the AS
Read more

Getting Familiar with Visual Studio 2022 IDE - ASP.NET Core 7 Part 3

Image
ASP.NET Core 7: Getting Familiar with Visual Studio 2022 IDE This is part 3 of the " Web App Development Beginners Guide " tutorial series. In this tutorial series, we will learn how to build a functional Web Application with individual account user login. If haven't followed the last tutorial of the series, here is the link:   ASP.NET Core 7: Executing (running) The Razor Pages Web Application ,  Part 3. ASP.NET Core 7: Getting Familiar with Visual Studio 2022 IDE Now we will look at the project we created using Visual Studio 2022 Integrated development environment, acronym IDE. Throughout these tutorials, we use IDE for ease of use.  Figure 1:  Parts of the Visual Studio 2022 IDE The top section is marked in a red rectangle numbered  1 in  Figure 1 , and holds the commands menu and toolbar. Figure 2: Visual Studio 2022 IDE menu bar Most menu items are self-explanatory.  We already learned how to run the application using command buttons from the menu bar. Section  2  
Read more

Displaying A Start Page In ASP.NET Core 3.1 Web API Project.

Displaying A Start Page in ASP.NET Core 3.1 Web API project. When we create a Web API project using Visual Studio 2019 Template there is no file to display when the web application start. That is because Web API doesn't need to display any information to the user or the public. But some times we may need to add a little bit of information to the site, or even during the development stage we may need to show some information. Add app.UseDefaultFiles(); app.UseStaticFiles(); to the Configure method in the Startup.cs file. Then Add a Folder and name it as wwwroot . This is is very important. Then add the Index.html file inside wwwroot folder. Now we can edit the index.html file to add any information. That's it.
Read more