首頁 web前端 css教學 Sass與Compass-回顧

Sass與Compass-回顧

Feb 13, 2017 pm 02:52 PM

compass 是sass的一個工具庫
compass在sass 的基礎上封裝了一系列有用的模組,用來補充和豐富sass的工能,

安裝:
compass是用ruby語言開發的,所以安裝它之前必須安裝ruby。
指令:

gem install compass
專案初始化:
要建立一個你的Compass 項目,如果專案的名字叫myproject 
compass create myproject
會在目前的目錄下產生這個目錄,還有config.rb有兩個子目錄sass 和stylesheets 前者存放sass 原始文件,後者放編譯後的
css文件。

編譯:
我在開發的時候寫出來的是檔案後綴名為scss的檔案。只有編譯成css文件,才能用到網站上。
compass 的編譯指令為
compass compile
該指令在專案根目錄下運行,將會sass 子目錄中的scss 檔案編譯成css文件,並保存在stylesheets子目錄中。
預設編譯出來的css 檔案帶有大量的註釋,生產環境需要壓縮後的css檔案
compass compile --output-style compressed
如果重新編譯未修改過的檔案
compass compile --force
除了使用指令參數,也可以在設定檔config.rb 中指定編譯模式。

output_style = :expanded
:expanded 表示編譯後保留原格式, 其他值還包括: nested,
:compact和compressed 進入生產階段後,就要改為:compressed模式。
output_style = :compressed
也可以透過指定environment的值(:production或:development),智慧判斷編譯模式。

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

在命令列模式下,除了一次編譯命令,compasspass還有自動編譯命令

在命令列模式下,除了一次性編譯命令,compasspass還有自動編譯命令

在命令列模式發生變化,就會被自動編譯成css檔。

compass 的模組


compass採用模組結構,不同模組提供不同的功能,內建5個模組。

reset css3 layout typography unilities

reset模組


在編寫自己的樣式之前,有必要重置瀏覽器的預設樣式。
寫法是:
@import "compass/reset"

上面的@import指令,用來指定載入模組,這裡就是載入reset模組。編譯後,會產生對應的css reset程式碼。


CSS3模組
此模組提供24 中css3指令。如:
圓角(border-radius) 的寫法,
@import "compass/css3";
.rounded {
@include border-radius(5px);
 }

上面的@include指令,表示某個mixin (類似C語言的宏),5px是參數,這裡用來指定圓角的半徑。


編譯後的程式碼為:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms; 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

}


如果只需要左上角為圓角,寫法為

@include border-corner-radius(top, left, 5px);


layout模組
該模組提供佈局功能,
例如,指定頁面的footer部分出現在瀏覽器的最低端。
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}

指定子元素佔滿父元素的空間:


@import "compass/layout"; full {
@include stretch; 
 }
typography模塊
該模塊提供板式功能
比如,指定鏈接顏色的mixin為:
link-colors($normal, $hover, $active, $visited, $focus);
使用時寫成:
@import "compass/typography";
a {
 @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

utilities

utilities某些不屬於其他模組的功能。

例如,清除浮動:

import "compass/utilities/";

.clearfix {
@include clearfix;
 }
例如表格:
@import "compass/utilities";
  }

編譯後
table th {

text-align: center;

font-weight: bold;
 }
table td,
table th {> tdo〜 .nu​​meric {
text-align: right;
 }

Helper函數
除了模組外,compass也提供了一系列函數。
有一些有用的函數,image-width() 和image-height() 傳回圖片的寬和高
再例如,inline-image()可以將圖片轉為data協定的資料。

@import "compass";

.icon { background-image: inline-image("icon.png");}


編譯後得到
.icon { background-image: url('data:image/png; base64,iBROR...QmCC');}
函數與mixin的主要差異是,不需要使用@include指令,可以直接呼叫。

更多Sass與Compass-回顧相關文章請關注PHP中文網!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1272
29
C# 教程
1252
24
靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語:“靜態表單提供商”。你帶上html

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom 每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom Apr 17, 2025 am 10:55 AM

在本週的平台新聞綜述中,Chrome引入了一個用於加載的新屬性,Web開發人員的可訪問性規範以及BBC Move

與部分元素的交易 與部分元素的交易 Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章:

帶有HTML對話框元素的一些動手 帶有HTML對話框元素的一些動手 Apr 16, 2025 am 11:33 AM

這是我第一次查看HTML元素。我已經意識到了一段時間,但是尚未將其旋轉。它很酷,

我們如何標記Google字體並創建Goofonts.com 我們如何標記Google字體並創建Goofonts.com Apr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目,它們都是版式的忠實擁護者。我們一直在標記Google

多腳步滑塊:一般案例 多腳步滑塊:一般案例 Apr 12, 2025 am 10:52 AM

這個兩部分系列的第一部分詳細介紹了我們如何獲得兩次跑步的滑塊。現在,我們&#039;

'訂閱播客”鏈接應在哪裡? '訂閱播客”鏈接應在哪裡? Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

See all articles