SCSS编译从CSS删除-webkit和-ms属性

问题描述

我正在尝试对现有的scss文件进行一些更改,并使用指南针/ CodeKit对其进行编译。但是在编译之后,所有以'-'开头的样式属性都将从生成的CSS文件删除。任何人都可以帮忙配置中缺少的内容

-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,textarea { touch-action: manipulation; }

我的config.rb文件在下面:

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

解决方法

编译器通常具有一个清单,该清单应删除或不删除特定于浏览器的属性。如果所有主流浏览器都支持某个属性,则不需要特定于供应商的版本。此外,开发人员使用的某些特定于供应商的属性甚至不存在。

在这里,您要添加特定于供应商的Box-Sizing规则,因为所有主流浏览器都已经支持该规则了多年,所以这没有任何意义。