Sass @media指令

@media指令設置樣式規則,不同的媒體類型。可以嵌套@media指令選擇器在SASS內,但它被冒泡到樣式表的頂層。

示例

下面的例子演示了在SCSS文件中如何使用@media:

media.html

Media指令示例-www.yiibai.com

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文件,得到輸出如下顯示。

Sass