@import與Sass不結合文件

我是新來的sass，我試圖在Magento應用程序中導入父主題的css。@import與Sass不結合文件

我有它的工作程度，但沒有與我期待的結果。

在我styles.scss文件夾，我有：

@import "../../../rwd/default/css/styles.css";

我已經運行在終端的sass --watch styles.scss:styles.css所得的styles.css文件：

@import url(../../../rwd/default/css/styles.css);

在sass guide它說：

CSS有一個導入選項，可讓您將CSS分割爲更小，更易維護的部分。唯一的缺點是，每當你在CSS中使用@import時，它會創建另一個HTTP請求。 Sass建立在當前CSS @import的頂層上，但不需要HTTP請求， Sass將接收您要導入的文件，並將其與您要導入的文件合併，以便您可以提供單個CSS文件到的網頁瀏覽器。

所以我期待SASS導入CSS作爲普通的老CSS規則，而不是使用@import規則，所以我的Styles.css中會看起來像：

/* ========================================================================== 
    HTML5 display definitions 
    ========================================================================== */ 
/* 
* Corrects `block` display not defined in IE 8/9. 
*/ 
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
nav, 
section, 
summary { 
    display: block; 
} 

/* 
* Corrects `inline-block` display not defined in IE 8/9. 
*/ 
audio, 
canvas, 
video { 
    display: inline-block; 
} 

/* 
* Prevents modern browsers from displaying `audio` without controls. 
* Remove excess height in iOS 5 devices. 
*/ 
audio:not([controls]) { 
    display: none; 
    height: 0; 
} 

/* 
* Addresses styling for `hidden` attribute not present in IE 8/9. 
*/ 
[hidden] { 
    display: none; 
} 

/* ========================================================================== 
    Base 
    ========================================================================== */ 
/* 
* 1. Sets default font family to sans-serif. 
* 2. Prevents iOS text size adjust after orientation change, without disabling 
* user zoom. 
*/ 
html { 
    font-family: sans-serif; 
    /* 1 */ 
    -webkit-text-size-adjust: 100%; 
    /* 2 */ 
    -ms-text-size-adjust: 100%; 
    /* 2 */ 
} 

/* 
* Removes default margin. 
*/ 
body { 
    margin: 0; 
} 

/* ========================================================================== 
    Links 
    ========================================================================== */ 
/* 
* Addresses `outline` inconsistency between Chrome and other browsers. 
*/ 
a:focus { 
    outline: thin dotted; 
} 

/* 
* Improves readability when focused and also mouse hovered in all browsers. 
*/ 
a:active, 
a:hover { 
    outline: 0; 
} 

/* ========================================================================== 
    Typography 
    ========================================================================== */ 
/* 
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+, 
* Safari 5, and Chrome. 
*/ 
h1 { 
    font-size: 2em; 
} 

/* 
* Addresses styling not present in IE 8/9, Safari 5, and Chrome. 
*/ 
abbr[title] { 
    border-bottom: 1px dotted; 
} 

/* 
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 
*/ 
b, 
strong { 
    font-weight: bold; 
} 

/* 
* Addresses styling not present in Safari 5 and Chrome. 
*/ 
dfn { 
    font-style: italic; 
} 

/* 
* Addresses styling not present in IE 8/9. 
*/ 
mark { 
    background: #ff0; 
    color: #000; 
} 

/* 
* Corrects font family set oddly in Safari 5 and Chrome. 
*/ 
code, 
kbd, 
pre, 
samp { 
    font-family: monospace, serif; 
    font-size: 1em; 
} 

/* 
* Improves readability of pre-formatted text in all browsers. 
*/ 
pre { 
    white-space: pre; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

/* 
* Sets consistent quote types. 
*/ 
q { 
    quotes: "\201C" "\201D" "\2018" "\2019"; 
} 

/* 
* Addresses inconsistent and variable font size in all browsers. 
*/ 
small { 
    font-size: 80%; 
} 

/* 
* Prevents `sub` and `sup` affecting `line-height` in all browsers. 
*/ 
sub, 
sup { 
    font-size: 75%; 
    line-height: 0; 
    position: relative; 
    vertical-align: baseline; 
}

這樣，我將有生產時沒有使用@import規則的styles.css。

來源

2014-07-14 Holly