這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)CSS框架sass的示例分析,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
sass結(jié)尾的文件有著更嚴(yán)格的格式要求,scss文件更貼近原生css
比如sass文件
CSS
#main
color: #fff
&-sidebar
border: 1px solid
等同于scss的
CSS
#main {
color: black;
&-sidebar { border: 1px solid; }
}
編譯后為
其中代表父級(jí)元素的& 只可出現(xiàn)在頭部,否則解析不出來(lái)。
嵌套屬性
CSS
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
編譯為
CSS
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
這個(gè)在一些復(fù)雜的css3屬性上用處比較大,比如animate
字符串內(nèi)插
使用#{}作為選擇器變量
CSS
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
第二個(gè)例子如果不用字面量則12除30
運(yùn)算符
CSS
p {
width: 1in + 8pt;
}
單位如果可以轉(zhuǎn)換,會(huì)被自動(dòng)轉(zhuǎn)換
編譯為:
CSS
p {
width: 1.111in; }
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
直接字面量,變量使用,函數(shù),括號(hào),優(yōu)先級(jí)
以上編譯為
CSS
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
顏色:
CSS
p {
color: #010203 + #040506;//相加 rbg三位分別相加
color: #010203 * 2;//相乘
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);//帶alpha通道的疊加
color: opacify($translucent-red, 0.3);//控制透明的函數(shù),加強(qiáng)非透明
background-color: transparentize($translucent-red, 0.25); //控制透明的函數(shù),加強(qiáng)透明
}
默認(rèn)變量:
CSS
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
!default 如變量被賦值使用之前的賦值,沒(méi)被賦值,賦值
上述就是小編為大家分享的CSS框架sass的示例分析了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章:CSS框架sass的示例分析-創(chuàng)新互聯(lián)
路徑分享:http://m.newbst.com/article40/cejjeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、響應(yīng)式網(wǎng)站、外貿(mào)建站、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容