Change Indentation in SASS

Change indentation in Sass

sass-3.2.3/lib/sass/tree/visitors/to_css.rb has a number of hard-coded double-space strings (' ') that are used for indentation. If you replace them all with four-space strings it will compile your css as you stated.

Custom Indentation Type for SASS Output

There's no such thing as "4-space hard tabs". A hard tab is just a character.

It is editor settings that decide how wide a tab should be displayed. You can set it to be two, four, eight spaces wide, and it will not alter the source code.

The matter is that SASS does support tabs for indentation, with one tab meaning one level of indentation. So there should be no problem for you.

If you're talking about the indentation of CSS files, i really don't understand why this is of any significance for your team. If you're using SASS, CSS files are not supposed to be edited and are rarely ever opened (most debugging takes place in developer tools like FireBug, are you aware of debug_info and source maps?). In production CSS is minified and all white space is purged.

Consider adopting a task runner tool like Grunt. You can leverage it to parse resulting CSS files at certain stage of the development routine cycle. You can also make use of the brilliant autoprefixer tool if you go this way.

PS Two spaces is the standard indentation for the Ruby community, which SASS is mostly a part of. You team is kinda stemming the tide.

Fixing Sass / SCSS bracket indentation

Regex won't really work, as you've discovered, because the meaning/desired position depends on the parsing of the Document that has come before.

You need a parser or a filter for this job.

Fortunately, a standard JS beautifier, or a CSS indenter should whip that file right back into shape.



PS: Also consider more frequent backups and version control. (^_^)

Indentation with tab character in SASS output

As mentioned by manishie (and his link), there's not built-in way to change how the outputted CSS is indented. The only way is to run it through a separate tool (like Grunt) to "correct" the indentation as you see fit.

scss formatting : indent and NestingDepth

The error NestingDepth: Nesting should be no greater than 1 doesn't refer to brace nesting, it refers to selector nesting.

Remember that brace nesting in SASS is just sugar to help make the source more readable.

For example,

div {
a {
font-size: 15px;
}
}

Is just SASS sugar for

div a {
font-size: 15px;
}

Which means that, to take from your example:

page-profile {
.profileinformations> h1 > ion-icon {
font-size: 15px;
color: color($colors, icon-color);
}
}

Has a NestingDepth of 4: page-profile .profileinformations > h1 > ion-icon.

How to stop VSCode indenting when pushing existing code to a new line?

The indent is caused by the onEnterRules of the full/advanced setting of the Editor: Auto Indent preference:

settings screenshot

To avoid the problem, you could change the setting to keep or none, but be aware it changes your preference globally (for any file type where indenting would apply).

It looks like there might be a way to configure the onEnterRules per language, but I'm not entirely sure how to do that yet. Editing the language specific setting in JSON with the following config did not work for me:

{
"[scss]": {
"editor.autoIndent": "keep"
}
}

Sass compiler says: Inconsistent indentation

UPDATE: Seeing that you've included the curly braces in your question, I suggest that you try changing the file's extension from .sass to .scss. SCSS will probably ignore your indentation because it can tell which part goes where based on the curly braces.


SASS relies on indentation to tell where you're trying to apply your CSS, so it won't be able to validate it if it varies in every line. Try this instead:

.something
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box

Personally, I wouldn't even bother indenting border-box to make them all start at the same column, because it's too much work for too little gain. As an alternative, you could write a mixin to do it for you:

@mixin border-box
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box

After defining it, you can include it directly:

.something
@include border-box

Sass incoherent indentation during assets precompilation

Pesky error - tabs and spaces are actually different characters

The bottom line is that you'll have a tab somewhere, whereas you'll be using a single space in the other stylesheets of your application.

--

Debug

Personally, I'll be looking at removing every "dependency" from your application.css.sass file, and then slowly adding them one-by-one again. This will give you the most informed idea on where the issue will reside (if I were a betting man, I'd say it would be in one of your dependent files!)

As with most software bug fixes, the solution will be to cut it down to the bare essentials, and then build it up piece-by-piece again



Related Topics



Leave a reply



Submit