SCSS
層級嵌套
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }//&代表只作用于父類 a
}
}
在下例中叠穆，你可以用同層相鄰組合選擇器+選擇header元素后緊跟的p元素：
header + p { font-size: 1.1em }
你也可以用同層全體組合選擇器~森书，選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }
嵌套屬性;
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
變量
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
和!important相反 !default用于變量并且 是默認(rèn)值 而不是唯一不變值
$fancybox-width: 400px !default;
@minxin 混合器 @include 導(dǎo)入
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
可以傳參數(shù)
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
通過選擇器繼承繼承樣式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
flex
flex-direction
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端
row-reverse:主軸為水平方向望众，起點(diǎn)在右端
column:主軸為垂直方向，起點(diǎn)在上沿
column-reverse:主軸為垂直方向所禀，起點(diǎn)在下沿
flex-wrap nowrap（默認(rèn)）：不換行 wrap:換行竞漾，第一行在上方 wrap-reverse:換行，在第一行的下方
flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式合冀，默認(rèn) row nowrap
justify-content 屬性定義了項目在主軸上的對齊方式
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center：居中
space-between:兩端對齊各薇，項目之間的間隔都相等
space-around：每個項目兩側(cè)的間隔相等。所以君躺，項目之間的間隔比項目與邊框的間隔大一倍峭判。
align-items 屬性定義項目在交叉軸上如何對齊。
flex-start：交叉軸的起點(diǎn)對齊
flex-end:交叉軸的終點(diǎn)對齊
center：交叉軸的中點(diǎn)對齊
baseline：項目的第一行文字的基線對齊棕叫。
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto林螃，將占滿整個容器的高度。
align-content 屬性定義了多根軸線的對齊方式俺泣。如果項目只有一根軸線疗认，該屬性不起作用。
flex-start：與交叉軸的起點(diǎn)對齊伏钠。
flex-end：與交叉軸的終點(diǎn)對齊横漏。
center：與交叉軸的中點(diǎn)對齊。
space-between：與交叉軸兩端對齊熟掂，軸線之間的間隔平均分布缎浇。
space-around：每根軸線兩側(cè)的間隔都相等。所以打掘，軸線之間的間隔比軸線與邊框的間隔大一倍华畏。
stretch（默認(rèn)值）：軸線占滿整個交叉軸鹏秋。
項目的屬性
order order屬性定義項目的排列順序尊蚁。數(shù)值越小，排列越靠前侣夷，默認(rèn)為0.
flex-grow flex-grow屬性定義項目的放大比例横朋，默認(rèn)值為0，即如果存在剩余空間百拓，也不放大琴锭。
flex-shrink flex-shrink屬性定義了項目的縮小比例晰甚，默認(rèn)為1，即如果空間不足决帖，改項目將縮小厕九。
flex-basis flex-basis屬性定義了在分配多余空間之前勃痴，項目占據(jù)的主軸空間（main size）题翻。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間汛聚。它的默認(rèn)值為auto刻像，即項目的本來大小畅买。
flex flex屬性是flex-grow，flex-shrink和flex-basis的簡寫细睡，默認(rèn)值為0 1 auto谷羞。后面兩個屬性可選
align-self align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性溜徙。默認(rèn)值為auto湃缎，表示繼承父元素的align-items屬性，如果沒有父元素蠢壹，等同于stretch雁歌。
