sass基礎(chǔ)語法

SASS是SCSS3的新語法

SASS允許使用變量,所有變量以$開頭翁都。

$red: red;div {? color: $red;}//也可以鑲嵌在字符串里面使用,必須需要寫在#{}之中,作用于屬性名$left: left;margin-#{$left}:30px阅畴;

SASS允許在代碼中使用算式。

body{    margin:(14px/2);    top:50px + 100px;    right:$var * 10%;}

SASS允許選擇器嵌套

div h1{color:red;}//也允許屬性嵌套(注意屬性后面要加上冒號)border:{size:2px;style:solid;color:black;}

注釋

SASS共有兩種注釋風(fēng)格题翰。

標(biāo)準(zhǔn)的CSS注釋 /* comment/ 恶阴,會保留到編譯后的文件诈胜。

單行注釋 // comment,只保留在SASS源文件中冯事,編譯后被省略焦匈。

在/

后面加一個感嘆號,表示這是"重要注釋"昵仅。即使是壓縮模式編譯缓熟,也會保留這行注釋,通乘ん裕可以用于聲明版權(quán)信息够滑。

SASS允許一個選擇器,繼承另一個選擇器吕世。

.class1{border:1px solid #ddd;}//class2要繼承class1彰触,就要使用@extend命令:.class2{@extend.class1;font-size:120%;}

SASS可以設(shè)置可以重用的代碼塊

@Mixin表示是可以重用的代碼塊。

@mixin center{display:flex;justify-content:center;align-items:center;}//使用@center命令命辖,調(diào)用這個mixindiv{@includecenter;}//mixin的強(qiáng)大之處况毅,在于可以指定參數(shù)和缺省值。@mixincolor($color:black){color:$color;border:1px solid$value;}//使用的時候尔艇,根據(jù)需要加入?yún)?shù):div{@includecolor(red);}

高級用法

@if? ? 或者? @if @else

p{@if1+1==2{border:1px solid;}@if5<3{border:2px dotted;}}//@if @elsep{@if1+1==2{border:1px solid solid;}@else{border:10px solid? red;}}



鏈接:http://www.reibang.com/p/e2ed8227eda4

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尔许,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子终娃,更是在濱河造成了極大的恐慌味廊,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棠耕,死亡現(xiàn)場離奇詭異余佛,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)窍荧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門衙熔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人搅荞,你說我怎么就攤上這事红氯。” “怎么了咕痛?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵痢甘,是天一觀的道長。 經(jīng)常有香客問我茉贡,道長塞栅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任腔丧,我火速辦了婚禮放椰,結(jié)果婚禮上作烟,老公的妹妹穿的比我還像新娘。我一直安慰自己砾医,他們只是感情好拿撩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著如蚜,像睡著了一般压恒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上错邦,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天难咕,我揣著相機(jī)與錄音锦积,去河邊找鬼擎浴。 笑死虱疏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的魂拦。 我是一名探鬼主播讨勤,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼晨另!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起谱姓,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤借尿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后屉来,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體路翻,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年茄靠,在試婚紗的時候發(fā)現(xiàn)自己被綠了茂契。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡慨绳,死狀恐怖掉冶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情脐雪,我是刑警寧澤厌小,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站战秋,受9級特大地震影響璧亚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜脂信,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一癣蟋、第九天 我趴在偏房一處隱蔽的房頂上張望透硝。 院中可真熱鬧,春花似錦疯搅、人聲如沸濒生。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽甜攀。三九已至,卻和暖如春琐馆,著一層夾襖步出監(jiān)牢的瞬間规阀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工瘦麸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谁撼,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓滋饲,卻偏偏與公主長得像厉碟,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子屠缭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 聲明變量 定義變量的語法: 在有些編程語言中(如箍鼓,JavaScript)聲明變量都是使用關(guān)鍵詞“var”開頭,但是...
    Junting閱讀 1,470評論 0 6
  • 本文簡單的介紹SASS預(yù)處理語言呵曹,更多的應(yīng)用請參考官方文檔 一款咖、什么是SASS 二、為什么使用SASS 三奄喂、安裝S...
    CharlesDarwin閱讀 432評論 0 0
  • 一铐殃、什么是SASS SASS是一種CSS的開發(fā)工具,提供了許多便利的寫法跨新,大大節(jié)省了設(shè)計者的時間富腊,使得CSS的開發(fā)...
    劉佳音閱讀 379評論 0 1
  • 1赘被、LESS的官網(wǎng):http://lesscss.org 2、Sass官網(wǎng)地址:http://sass-lang....
    Howie223閱讀 3,681評論 0 5
  • 學(xué)過CSS的人都知道肖揣,它并不是一種編程語言帘腹。 你可以用它開發(fā)網(wǎng)頁樣式,但是沒法用它編程许饿。也就是說阳欲,CSS基本上是設(shè)...
    小小奶狗閱讀 292評論 0 0