sass的使用

一、sass

1.解決中文報錯

????在ruby中找到engine.rb文件,在該文件require?xxx?后邊寫上:

????Encoding.default_external?=?Encoding.find('utf-8')

2.作用域?qū)旌弦约袄^承的影響

????sass中:

????????1)定義在作用域內(nèi)部的混合,在外部無法訪問,只能在內(nèi)部訪問

????????2)定義在作用域內(nèi)部的繼承,在作用域外部是可以訪問的,不管該選擇器寫在任何位置,都可以被繼承到

????less中:

????????1)less的混合與sass的繼承比較像,less定義在作用域內(nèi)部的混合,外部不能直接訪問,需要通過命名空間進(jìn)行訪問

????????2)less的方法和sass的混合比較像,less定義在作用域內(nèi)部的方法,在外部不能直接訪問,需要通過命名空間

3.占位符

????我們自定義一個選擇器樣式,用于繼承,繼承結(jié)束,我們不想要這個選擇器了骂维,刪掉它

????此時可以使用占位符,表示定義一組臨時屬性,當(dāng)編譯結(jié)束就會被刪除

????占位符只能用于標(biāo)簽選擇器,其他選擇器不能用

????語法:

????%div{}

????%mydiv{}

4.數(shù)字運算

????Sass中也有加減乘除運算,可以進(jìn)行數(shù)字航闺、變量之間的運算,可以帶單位運算

????帶有單位運算時:默認(rèn)是px,哪個單位在前邊,最終就以那個單位為標(biāo)準(zhǔn)

????除法有點特殊:

????1)加上()

????2)變量或者是函數(shù)的返回結(jié)果

????3)除法運算只是表達(dá)式的一部分

????滿足以上任何一個條件都可以

5.色彩運算

????sass中支持色彩的加減乘除,注意除法要滿足上邊的數(shù)學(xué)運算中的條件

????16進(jìn)制的色彩運算,每個通道進(jìn)行獨立運算,如果十六進(jìn)制色彩每個通道的值大于255或小于0潦刃,不會影響其他通道,大于255取255乖杠,小于0取0

????在rgba模式下,進(jìn)行運算時,要求透明度必須一致,否則無法運算,最終結(jié)果不會影響透明度

6.插值與字符串拼接

????????插值:為了動態(tài)創(chuàng)建屬性

????????語法:

????????#{$dir}

????????字符串拼接:

????????+?拼接兩個字符串,沒有''

????????no?+?-repeat

????????$re:-repeat

????????no?+?$re;

7.

????語法:

????@if?定義if語句

????@else?if?定義else?if語句

????@else?定義else語句

????or?或?and?與?not?非

????判斷相等使用:==

????<=?>=?<?>

8.for循環(huán)

????語法:

????@for?$i?from?start?through?end{

????//循環(huán)體

????}

????@for:定義for循環(huán)

????$i:循環(huán)變量

????start:$i的初始值,包括start

????end:$i的結(jié)束值,包括end

????from:從哪里開始

????through:到哪里結(jié)束

9.while循環(huán)

????語法:

????@while?條件{}

????$i?:?0;

????@while?$i?<?20{

????//循環(huán)體

????$i:$i+1;

????}

10.三元運算符

????if(條件,true結(jié)果執(zhí)行,false結(jié)果執(zhí)行)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末胧洒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子菲饼,更是在濱河造成了極大的恐慌宏悦,老刑警劉巖包吝,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漏策,死亡現(xiàn)場離奇詭異掺喻,居然都是意外死亡储矩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來屡拨,“玉大人呀狼,你說我怎么就攤上這事【啵” “怎么了貌踏?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵逗堵,是天一觀的道長。 經(jīng)常有香客問我砸捏,道長,這世上最難降的妖魔是什么梆暖? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任掂骏,我火速辦了婚禮,結(jié)果婚禮上级解,老公的妹妹穿的比我還像新娘田绑。我一直安慰自己,他們只是感情好芒划,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布民逼。 她就那樣靜靜地躺著拼苍,像睡著了一般调缨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棚点,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天湾蔓,我揣著相機與錄音默责,去河邊找鬼桃序。 笑死,一個胖子當(dāng)著我的面吹牛奇适,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播葛账,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼籍琳,長吁一口氣:“原來是場噩夢啊……” “哼趋急!你這毒婦竟也來了势誊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤查近,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后饭玲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叁执,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡茄厘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了谈宛。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片次哈。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖吆录,靈堂內(nèi)的尸體忽然破棺而出窑滞,到底是詐尸還是另有隱情,我是刑警寧澤恢筝,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布哀卫,位于F島的核電站,受9級特大地震影響撬槽,放射性物質(zhì)發(fā)生泄漏此改。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一侄柔、第九天 我趴在偏房一處隱蔽的房頂上張望共啃。 院中可真熱鬧,春花似錦究珊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瑟蜈。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間详瑞,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人柒竞。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓稼虎,卻偏偏與公主長得像哀军,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

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

  • 一秽五、sass 1.解決中文報錯 在ruby中找到engine.rb文件,在該文件requirexxx后邊寫上: E...
    一念天堂_5e04閱讀 857評論 2 5
  • 1、LESS的官網(wǎng):http://lesscss.org 2、Sass官網(wǎng)地址:http://sass-lang....
    Howie223閱讀 3,668評論 0 5
  • 前言 在介紹之前樱拴,請大家先弄清楚下面的問題: 什么是 sasssass 是 css 的預(yù)處理器(css prepr...
    destiny0904閱讀 859評論 0 0
  • 前言 什么是CSS預(yù)處理器 定義:CSS預(yù)處理器定義了一種新的語言,其基本思想是,用一種專門的編程語言,為CSS增...
    SA_Arthur閱讀 3,113評論 0 18
  • 前端開發(fā)規(guī)范 每個一個前端都會包含庫類疹味、jQuery插件以及很多的各種各樣目的的JS、CSS文件坎缭,有效管理不同的技...
    W凱閱讀 539評論 0 0