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:
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
Peer-To-Peer File Sharing with Web Sockets
Ubuntu Rails Install Fails on Zlib
How to Get Haml to Work with Rails
Difference Between Truncation, Transaction and Deletion Database Strategies
What Are the Differences Between "Private", "Public", and "Protected Methods"
Fail to Bundle Install Puma 4.3.5 or Gem Puma with Ruby-2.6.6 on MACos-10.15.6
Rails: Postgres Permission Denied to Create Database on Rake Db:Create:All
Getting Rid of Ruby Gems That Won't Die
Add Method to an Instanced Object
Set Attribute Dynamically of Ruby Object
Is There Goto Statement in Ruby
How to Get Sinatra to Auto-Reload the File After Each Change
Rvm Ruby 1.9.1 Install Can't Locate Zlib But Its Runtime and Dev Library Are There
How to Cancel Scheduled Job with Delayed_Job in Rails
Adding an Action to an Existing Controller (Ruby on Rails)