Sass & Compass 初步使用

boredream 發(fā)布于2019-08-30 15:52 / 3603人閱讀

摘要：一需安裝的東西自帶可能被墻查看安裝情況查看的可參考資料如何安裝，使用鏡像二實操使用終端進入選定的目錄初始化編寫針對可能用到的命令可能用到的命令針對進入到特定目錄后，輸入命令方式方式，會創(chuàng)建一個以命名的目錄是目錄的配置文件，可根據(jù)個人

一、需安裝的東西

ruby（mac自帶）

gem（sources可能被墻）

sass

compass

查看安裝情況：

ruby -v
gem -v
sass -v
compass -v

查看 gem 的 sources：

gem sources

可參考資料

如何安裝 Ruby、Sass、Compass（Windows，使用 Ruby China 鏡像）

二、實操

使用終端進入選定的目錄

compass 初始化

sass 編寫

針對1：

mac可能用到的命令：

cd xxx
ls

win可能用到的命令：

E：
cd xxx
dir

針對2：

進入到特定目錄后，輸入命令：

compass init    // 方式1
compass create [project_name]    // 方式2，會創(chuàng)建一個以project_name命名的compass目錄

config.rb是compass目錄的配置文件，可根據(jù)個人需求修改（重要）

針對3：

體驗sass的強大吧（與css比較）

// reset
@import "compass/reset";

// css3圓角
@import "compass/css3";
.box{
    @include border-radius(5px);
}

// css3漸層
.box{
    @include background(linear-gradient(lighten(red, 20%), red)); 
}

// sprite
@import "icons/*.png";
@include all-icons-sprites;  //all-后面的‘icons’代表文件夾名字

compass會監(jiān)測目錄下文件變動而進行實時編譯（可能需要watch一下）

可參考資料：

用強大的compass+sass寫css

GPU云服務器云服務器 compass sass 人工智能初步 hadoop初步學習

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116464.html

相關(guān)文章

Intellij IDEA &amp; Sass 使用記錄匯總

摘要：在安裝插件很容易，在通用設置窗口里面，選擇節(jié)點，輸入搜索相關(guān)插件名稱即可。參考鏈接徹底解決卡頓七解決中文注釋錯誤問題問題描述控制臺報錯，類似于報錯。排查發(fā)現(xiàn)是由于中文注釋引起。一、如何查看某端口被占用進程并將其殺死終端輸入以下命令，將會出現(xiàn)占用端口的進程信息： lsof -i tcp:[port] // port 為所占用的端口，如：8086 找到進程的 PID，使用 kil...

CodeSheep 2019-08-14 17:42 評論0 收藏0
Compass創(chuàng)建者Chris Eppstein：真正的CSS框架是如何工作的

摘要：當我的補丁被拒絕了之后，我想要指出一個方向真正的框架是如何工作的。發(fā)起這項捐助有我的個人原因在里面，我的父親在年被確診為患有一種罕見的成年人形式的線粒體疾病。正是一個經(jīng)歷了如此過程的產(chǎn)品。非商業(yè)轉(zhuǎn)載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/120792 Chris Eppstein，Compass框架的創(chuàng)建...

BigTomato 2019-08-28 18:01 評論0 收藏0
前端利器：SASS基礎與Compass入門

摘要：在吸取了的一些特性基礎上，有了大幅改進，也就是現(xiàn)在的。嵌套極大程度上降低了選擇器名稱和屬性的重復書寫。選擇器嵌套選擇器嵌套是指從一個選擇器中嵌套子選擇器，來實現(xiàn)選擇器的繼承關(guān)系。也已經(jīng)成為的一個標配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫，它是css的一個開發(fā)工具，提供了很多便利和簡單的語法，讓css看起來更像是一門...

娣辯孩 2019-08-28 17:54 評論0 收藏0
使用compass自動合并css雪碧圖(css sprite)

摘要：使用雪碧圖，能夠減少頁面的請求數(shù)降低圖片占用的字節(jié)，以此來達到提升頁面訪問速度的目的。也正是因為這一點，導致很多開發(fā)者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規(guī)則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術(shù)。使用css雪碧圖，能夠減少頁面的請求數(shù)、降低圖片占用的字節(jié)，以此來達到提升頁面訪問速度的目的。但...

劉永祥 2019-08-28 18:06 評論0 收藏0
前端入門23-CSS預處理器（Less&amp;Sass）

摘要：聲明聲明本篇內(nèi)容梳理自以下幾個來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個時候，預處理器就出現(xiàn)了，其實應該是說和這類語言出現(xiàn)了。聲明本篇內(nèi)容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。正文-CSS預處理（less&Sass） CSS預處理什么是 CSS 預處理？為什么要有 CSS 預處理？這...

freecode 2019-04-23 13:07 評論0 收藏0