SCSS compilation removing -webkit and -ms attributes from the css

1k Views Asked by At

I am trying to make some changes on existing scss file and compiling it using compass/CodeKit. But after compiling all the style attributes that starts with '-' are getting removed from the resulting CSS file. Can anyone help what is missing in the configuration.

-hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; }
+hr { box-sizing: content-box; height: 0; overflow: visible; }

-abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; }
+abbr[title], abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; }

-a, area, button, [role="button"], input, label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; }
+a, area, button, [role="button"], input, label, select, summary, textarea { touch-action: manipulation; }

My config.rb file is below:

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

line_comments = false
color_output = false

preferred_syntax = :scss
1

There are 1 best solutions below

0
Magnesium On

Compilers usually have a checklist of which browser-specific attributes should be removed or not. If all major browser support a property, there is no need for vendor specific versions. Also, some vendor-specific properties that developer use don't even exist.

Here you are adding vendor-specific box-sizing rules, which makes no sense since all major browser have been supporting it for years.