Saas(軟件服務(wù)化SoftwareasaService)
Saas平臺(tái)是運(yùn)營(yíng)saas軟件的平臺(tái)。SaaS提供商為企業(yè)搭建信息化所需要的所有網(wǎng)絡(luò)基礎(chǔ)設(shè)施及軟件、硬件運(yùn)作平臺(tái),并負(fù)責(zé)所有前期的實(shí)施、后期的維護(hù)等一系列服務(wù),企業(yè)無需購買軟硬件、建設(shè)機(jī)房、招聘IT人員,即可通過互聯(lián)網(wǎng)使用信息系統(tǒng)。SaaS是一種軟件布局模型,其應(yīng)用專為網(wǎng)絡(luò)交付而設(shè)計(jì),便于用戶通過互聯(lián)網(wǎng)托管、部署及接入。
sass是css的預(yù)處理器,它提供了許多便利的寫法方法
可以使用變量,常量,嵌套,函數(shù),混合,繼承等功能,讓css的開發(fā)變得更加簡(jiǎn)單可維護(hù)。
直接寫出來的sass文件其實(shí)就是普通的文本文件,以.sass或.scss作為文件后綴名。
里面可以直接使用css語法以及sass特有的語法特性,完成后通常需要經(jīng)過編譯成合法的css文件以供瀏覽器使用。
sass的安裝
sass基于Ruby語言開發(fā)而成,因此安裝sass前需要安裝Ruby。
安裝完成后需測(cè)試安裝有沒有成功,運(yùn)行CMD輸入以下命令:
ruby-v
如安裝成功會(huì)打印
ruby2.2.2p95(2015-04-13revision50295)[i386-mingw32]
Ruby自帶一個(gè)叫做RubyGems的系統(tǒng),用來安裝基于Ruby的軟件。我們可以使用這個(gè)系統(tǒng)來輕松地安裝Sass和Compass。要安裝最新版本的Sass和Compass,你需要輸入下面的命令:
安裝如下(如mac安裝遇到權(quán)限問題需加sudogeminstallsass)
geminstallsass
geminstallcompass
在每一個(gè)安裝過程中,你都會(huì)看到如下輸出:
Fetching:sass-3.x.x.gem(100%)
Successfullyinstalledsass-3.x.x
Parsingdocumentationforsass-3.x.x
Installingridocumentationforsass-3.x.x
Doneinstallingdocumentationforsassafter6secon
1geminstalled
安裝完成之后,你應(yīng)該通過運(yùn)行下面的命令來確認(rèn)應(yīng)用已經(jīng)正確地安裝到了電腦中:
sass-v
Sass3.x.x(SelectiveSteve)
compass-v
Compass1.x.x(Polaris)
Copyright(c)2008-2015ChrisEppstein
ReleasedundertheMITLicense.
Compassischarityware.
Pleasemakeataxdeductabledonationforaworthycause:http://umdf.org/compass
sass的編譯
1.命令行編譯;
//單文件轉(zhuǎn)換命令
sassinput.scssoutput.css
//單文件監(jiān)聽命令
sass--watchinput.scss:output.css
//如果你有很多的sass文件的目錄,你也可以告訴sass監(jiān)聽整個(gè)目錄:
sass--watchapp/sass:public/stylesheets
2.編譯工具Koala
3.使用vscode中的LiveSassCompiler插件來實(shí)現(xiàn)scss文件的實(shí)時(shí)編譯
變量
Sass讓人們受益的一個(gè)重要特性就是它為CSS引入了變量。你可以把反復(fù)使用的CSS屬性值定義成變量,然后通過變量名來引用它們,而無需重復(fù)書寫這一屬性值。
變量的定義是以$符號(hào)開頭,加上變量名,比如:
$text-warning:red;
$border-radius:5px;
.tip{
color:$text-warning;
border:1pxsolid$border-radius;
}
變量也可以通過加減乘除等運(yùn)算符號(hào)進(jìn)行計(jì)算,比如:
$font-base:10px;
.article{
font-size:$font-base*2-4px;
border-width:$font-base/10;
}
變量的注意事項(xiàng)
變量需要提前聲明才能使用,因?yàn)榫幾g是從上往下進(jìn)行的,如果在還未聲明變量的地方使用,會(huì)找不到這個(gè)變量。
變量都是全局變量,如果在大括號(hào)內(nèi)部定義的變量則屬于局部變量。
嵌套
通常所用到的選擇器嵌套是這樣的,將新的選擇器放到父級(jí)選擇器當(dāng)中,并且可以無限多級(jí)嵌套。
繼承
如果存在兩個(gè)class,他們有一些不同但又有許多相似之處,以前的做法可能是把所有樣式重復(fù)聲明兩次。但是有sass之后更好的做法是創(chuàng)建一個(gè)基礎(chǔ)的class,然后在第二個(gè)class中用@extend繼承它,同時(shí)還可以添加一些額外的樣式,或者對(duì)某些樣式進(jìn)行重寫。比如我們之前學(xué)過bootstrap的按鈕的構(gòu)建思想,是對(duì)基礎(chǔ)樣式進(jìn)行附加和重寫,而現(xiàn)在想要定義自己的樣式時(shí)就可以很方便地進(jìn)行這一操作了。首先聲明一個(gè)標(biāo)準(zhǔn)樣式的class,然后繼承這個(gè)樣式,然后設(shè)置不同的主題色:
混合
當(dāng)出現(xiàn)大段大段重用樣式代碼時(shí),獨(dú)立的變量就難以應(yīng)付,這個(gè)時(shí)候可以通過sass的混合器@mixin和@include實(shí)現(xiàn)大段樣式的重用。在定義mixin時(shí),需要在前面添加@符號(hào),使用時(shí)需要用@include來引用該@mixin:
導(dǎo)入
導(dǎo)入規(guī)則可以從外部文件導(dǎo)入mixin混合器等等。在sass中有一個(gè)命名慣例,被導(dǎo)入的樣式文件名用下劃線做前綴。導(dǎo)入的語法是@import“xxx”,這里的xxx不需要帶文件后綴和下劃線前綴。也就是說導(dǎo)入“_style.sass”或者“_style.scss”的時(shí)候,只需要寫@import“style”就可以了:
1.為什么要使用SASS?
它是預(yù)處理語言,它為CSS提供縮進(jìn)語法(它自己的語法)。
它允許更有效地編寫代碼和易于維護(hù)。
它是包含CSS的所有功能的CSS的超集,是一個(gè)開源的預(yù)處理器,以Ruby編碼。
它提供了比平面CSS好的結(jié)構(gòu)格式的文檔樣式。
它使用可重復(fù)使用的方法,邏輯語句和一些內(nèi)置函數(shù),如顏色操作,數(shù)學(xué)和參數(shù)列表。
2.列出SASS的一些功能?
它是更穩(wěn)定,強(qiáng)大,與CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被稱為CSS的語法糖,這意味著它使用戶更容易閱讀或表達(dá)的東西更清楚。
它使用自己的語法并編譯為可讀的CSS。
你可以在更少的時(shí)間內(nèi)輕松地編寫CSS代碼。
它是一個(gè)開源的預(yù)處理器,被解釋為CSS。
3.SASS的優(yōu)點(diǎn)是什么?
它允許在編程結(jié)構(gòu)中編寫干凈的CSS。
它有助于編寫CSS更快。
它是CSS的超集,幫助設(shè)計(jì)師和開發(fā)人員更有效率和快速地工作。
由于Sass兼容所有版本的CSS,我們可以使用任何可用的CSS庫。
可以使用嵌套語法和有用的函數(shù),如顏色操作,數(shù)學(xué)和其他值。