當前位置：首頁 >

【Sass】+【Compass】学习笔记

發布時間：2025/7/25 36 豆豆

生活随笔收集整理的這篇文章主要介紹了【Sass】+【Compass】学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這兩天一直在學習sass和compass，看完了一些教程后決定做一些實踐操作，權當筆記記錄一下。

COMPASS:compass-style.org

安裝compass：gem install compass?
查詢版本：compass -v
在ruby環境中安裝好compass后，創建compss工作區間:madir workspace?
進入工作區間創建項目:compass create compass-learn-init

{

1、以_開頭的文件為局部文件，主要用來被其他的樣式文件引入，在編譯的時候不會單獨的被編譯成CSS文件

2、在Sass改變的視乎，必須編譯成css才能生效（在項目文件里面編譯）2-1：按需編譯compass compile
2-2：自動編譯 compass watch

}

Sass：變量語法

1、局部變量抽離到外部的局部文件里('_'variables),宿主文件中@import引入

? ?//聲明局部變量：$headline-ff:Braggadocio,Arial,Verdana,Helvetica,sans-serif;

? //宿主文件中引用變量

? ?.main{

? ? ? ? ? font-family:$headline-ff;

}

Sass:嵌套語法

1、?parent_class 空格{

? ? ?.child_class{

? ? ? ? ? 。。。

? ? }

}

2、a {

? ? ?&:hover{

? ? ? ? ?color:blur ? ? ?

? ?}

}//使用&父類引入，并樣式輸出到父類上，否則這個:hover樣式將應用到a標簽的所有內容上

3、屬性嵌套

.headline{

? ? ? ?font:{ //!注意，這里font(屬性)后的冒號不可去掉

? ? ? ? ? ? family:￥headline-ff;

? ? ? ? ? ? size:16px;

? ?}

}

Sass:變量操作

1、直接操作變量，即變量表達式 2、通過函數 {·跟代碼塊無關的函數，多為內置函數functions·可重用的代碼塊，成為mixin{@include方式調用（以復制拷貝方式存在的）@extend方式調用，（以組合聲明存在的）} }
3、類名一定要有語義化的意義而不光是為了視覺上的效果不全可以利用mixin定義函數，并在調用時進行傳參 @mixin col($width){width:$width;float:left; } .webdemo-sec{@include col(25%);&:hover{background-color:#f5f5f5;} } ================編譯結果 .webdemo sec{width:50%;float:left; } .webdemo-sec:hover{background-color:#f5f5f5; }1、extend繼承多個選擇器，但不可以繼承選擇器系列。.A .B{} 2、連續繼承,使用%，構成僅用來繼承的選擇器

Sass:@media,響應式的布局設計

- ·sass@media可以內嵌在css規則中
- ·最后編譯后會被提取到樣式的最高級別
- 好處：避免重復書寫選擇器和打亂樣式表

@mixin col-sm($width:50%){@media(min-width:768px){//當屏幕的尺寸大于768px時，col占寬50%,小于768px時，占寬100%width:$width;float:left } }

編譯時，media會被提到樣式表的最外層

@media (min-width: 768px) {/* line 10, ../sass/screen.scss */.webdemo-sex {width: 50%;float: left;} }

@at-root:樣式表嵌套會增加樣式的權重，和樣式位置的依賴

所以可以使用@at-root{}指定被嵌套的內容輸出到嵌套樣式表為外。

Sass:輸出格式Config.rb

修改config.rb文件中的output-style:可以改變樣式的輸出格式

output-style = :expand ?(默認的輸出樣式)

output-style = :nested （嵌套輸出樣式）

output-style = :compact (將所有選擇器匯總到一行)

output-style = :compressed(將所有的樣式壓縮)

Compass:

Reset和Layout模塊需要單獨引入：@import "compass/reset" ,"compass/layout"

其他五大模塊@import compass即引入：

·CSS3：提供跨瀏覽器的CSS3能力
·Helpers：內涵一系列函數
·Typography：修飾文本樣式
·Utilities輔助函數，多為mixin
Browser：配置compass默認支持哪些瀏覽器，支持到哪個版本，一旦修改即影響其他模塊的輸出

如何使用Normalize替換掉reset

Reset模塊

使用compass中的normalize插件

安裝normalize--gem install compass-normalize
引入插件：修改config.rb---require 'compass-normalize'
但是，大型的開發項目中我們并不需要初始化全部的樣式，這時normalize的八大模塊就派上了用場

Normalize

·base模塊：統一html body字體文字大小邊距

·html5：統一html5的元素

·links：統一a標簽的樣式

·typography:統一段落文本樣式

·embeds:統一img、svg樣式

·groups：統一

·forms：統一文字

·tables：統一表格的標簽

?Layout模塊

使用率最低的模塊

stretching

?@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")?

sticky-footer

@import "compass/layout";@include sticky-footer(30px);$grid-background-column-color:rgba(255,0,0,.25);
#root{@include grid-background(); }

CSS3模塊：主要用于跨瀏覽器提供CSS3的能力

the browser support 模塊是CSS3模塊中最重要的模塊，稱為必要不充分條件。

有了封裝在css3的這個browser-supported的模塊后，將不用再使用

box-shadow:1px 2px 3px 2px #cfcecf; -webkit-box-shadow:1px 2px 3px 2px #cfcecf; -moz-box-shadow:1px 2px 3px 2px #cfcecf;

而直接使用

@import "compass/css3"; @include box-shadow(1px 2px 3px 2px #cfcecf); //而這時，我又不需要該樣式支持所有的瀏覽器，這時，我們即需要用到browser-supported模塊 //用它配置compass默認支持哪些瀏覽器，特定瀏覽器支持到哪個版本，一旦修改，即影響其他模塊的輸出 @import "compass/support"; //也可省略..... $supported-browsers: chrome; $browser-minimum-versions: ("ie":"8");

如果我們想要了解瀏覽器和特定瀏覽器的版本，可通過

@debug browsers();打印出支持的瀏覽器

也可以，進入ruby命令行中

1---compass interactive

2---browsers() //查看到所有支持的瀏覽器

3---browser-versions(chorme)//查看某特定瀏覽器的所有版本

還有CSS3的其他屬性

animation：動畫效果

background-size:

Border-Radius：

CSS3 Pie:

Images:......等等

Typography模塊

·links：鏈接修飾模塊

·lists：列表修飾模塊

·text:文本修飾模塊

·Vertical Rhythm:垂直韻律修飾模塊

@import "compass/typography/links"a{@include hover-link();}//修改下劃線的樣式a{@include link-colors($normal,$hover,$active,$visited,$focus)}//修改鏈接不同狀態下顏色，只有$normal!是必須的 @import "compass/typography/lists" .list-horizontal{@include horizontal-list(0,right); //padding值為0，向右浮動 }//可修飾導航條，使其向左浮動，又擁有一定的高度========編譯完成=======.list-horizontal li {list-style-image: none;list-style-type: none;margin-left: 0;white-space: nowrap;float: left;padding-left: 4px;padding-right: 4px; }.list-horizontal li:first-child {padding-left: 0; }.list-horizontal li:last-child {padding-right: 0; } 長文本或過長的url默認是：單行顯示不換行的。而當它們長度超出了父容器的寬度，就破壞了布局。我們使用word-wrap強制它們換行。 .text-force-wrap{@include force-wrap(); } //強行掰斷過長文本當不想文本在任何位置換行， .text-nowrap{@include no-wrap(); }//而在過長的文本又不換行時我們經常用。。。。省略后面的文本 .text-ellipsis{@include ellipsis(); }

而firefox的低版本根本不支持 text-overflow: ellipsis

這個時候則需要修改ellipsis.xml文件即可

在ruby命令行中輸入----compass install compass/ellipsis
生成elliplise.xml
在screen.sass文件中---$use-mozilla-ellipsis-binding:true;//開啟對fiefox的支持

Vertical Rhythm

Helper模塊

helper模塊中的image-url('圖片.png');可以直接指定圖片路徑。默認是絕對路徑，如果要改變成相對路徑，需要改變config.rb文件中的relative_assets=true配置項如果需要直接使用http路徑，則需改變config中的 http_path:"http://img.siesta.com/compass-demo"

font-file()跟image-url()有異曲同工之妙

compass-env()返回當前開發環境和生產環境
@debug compass-env();
編譯：compass compile -e production --force //-e指定編譯環境，force讓compass覆蓋重寫的已有的環境

也可通過在config.rb中設定compass的編譯環境
environment = :production

在屬性名、選擇器或者字符串時，如果需要引用sass的變量或函數，需要
#{{selector{}}};

utilities模塊

color:

print:

tables:

General:

@import "compass/utilities/general"

@include legacy-pie-clearfix(); //清除浮動

tag-clound:

Sprites:合圖功能！當UI被修改，只需要利用該功能即可修改其他相關的樣式，不用修改其他的HTML代碼！

_icons.scss@import "compass/utilities/sprites";@import "logo/*.png"; //magic import，是一個不寫到硬盤上的sass文件@include all-logo-sprites();
ruby命令行 ----compass sprite "images/logo/*.png" //將_logo.scss文件寫入到sass文件夾中
生成的css文件//.logo前綴相同 .logo-analyazer{ } .logo-shape{ } 而如果將圖片的命名 analyzer_active 和 analyzer_hover，即會生成active和hover的樣式
合圖會合并全部的圖片合圖布局的改變：$logo-layout:diagon;

轉載于:https://www.cnblogs.com/siestakc/p/6648277.html

總結

以上是生活随笔為你收集整理的【Sass】+【Compass】学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： QQ推广工具
下一篇： Unity应用架构设计(7)——IoC工