Sass開發(fā)環(huán)境的配置-創(chuàng)新互聯(lián)

創(chuàng)建運(yùn)行Sass的環(huán)境

ruby安裝

因?yàn)閟ass依賴于ruby環(huán)境，所以裝sass之前先確認(rèn)裝了ruby。先導(dǎo)官網(wǎng)下載個(gè)ruby

創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元鳳城做網(wǎng)站,已為上家服務(wù),為鳳城各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

在安裝的時(shí)候，請勾選Add Ruby executables to your PATH這個(gè)選項(xiàng)，添加環(huán)境變量，不然以后使用編譯軟件的時(shí)候會提示找不到ruby環(huán)境

安裝完ruby之后，在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby

安裝sass

<1>Sass的安裝:

Ruby命令行下輸入下面的命令：
gem install sass

<2>Compass的安裝:
Ruby命令行下輸入下面的命令：

gem install compass

<3>創(chuàng)建一個(gè) COMPASS 項(xiàng)目
在命令行中切換到你需要?jiǎng)?chuàng)建項(xiàng)目的目錄，運(yùn)行：
compass create projectname

這個(gè)命令會創(chuàng)建一個(gè)包含一系列文件的目錄，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以刪除。

在 config.rb 中你可以修改 SASS 和 CSS 的目錄及其它一些基礎(chǔ)設(shè)置。
<4>實(shí)時(shí)編譯 SASS 文件
COMPASS 提供的默認(rèn)方法是：
在命令行下切換到項(xiàng)目目錄，運(yùn)行
compass watch

將會實(shí)時(shí)監(jiān)控 SASS 目錄的文件變化，只要你一保存文件，立即將相應(yīng)文件編譯為 CSS 文件。

<5>SASS文件就是普通的文本文件，里面可以直接使用CSS語法。文件后綴名是.scss，意思為Sassy CSS。SASS提供兩種編譯方式，一種是手動編譯，一種是監(jiān)視編譯(–watch)，手動編譯就是當(dāng)你撰寫好CSS時(shí)下指令去做編譯，監(jiān)視編譯則是你指令一個(gè)目錄，當(dāng)此目錄里面的*.scss檔案有改變時(shí)（新增、覆寫等等），就會自動去做編譯的動作。先來講手動編譯方式：
下面的命令，可以在屏幕上顯示.scss文件轉(zhuǎn)化的css代碼。（假設(shè)文件名為test。）
sass test.scss
如果要將顯示結(jié)果保存成文件，后面再跟一個(gè).css文件名。
sass test.scss test.css
SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：
* nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
* expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮后的css代碼。
生產(chǎn)環(huán)境當(dāng)中，一般使用最后一個(gè)選項(xiàng)。
sass –style compressed test.sass test.css
還有一種監(jiān)視的方式做編譯，在命令行中切換到當(dāng)前sass或者scss文件所在的目錄，然后運(yùn)行
sass –watch scss:css

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：Sass開發(fā)環(huán)境的配置-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://bm7419.com/article34/hshse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)