Sass @media指令

Example using media directive

接下來，創建文件media.scss。

style.scss

h2{
color: #77C1EF;
}

.style{
width: 900px;

@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}

可以告訴SASS監視文件，並隨時使用下面的命令更新SASS文件來修改CSS：

sass --watch C:\Ruby22-x64\style.scss:style.css

接着執行上面的命令，它會自動創建media.css文件，如下面的代碼：

media.css

h2 {
color: #77C1EF;
}

.style {
width: 900px;
}
@media screen and (orientation: portrait) {
.style {
width: 500px;
margin-left: 120px;
}
}

執行輸出結果

讓我們來執行以下步驟，看看上面的代碼執行結果：

• 保存上述的HTML代碼到 media.html 文件。

• 在瀏覽器中打開該HTML文件，得到輸出如下顯示。