當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【Sass】+【Compass】学习笔记

發(fā)布時(shí)間：2025/7/25 编程问答 19 豆豆

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

這兩天一直在學(xué)習(xí)sass和compass，看完了一些教程后決定做一些實(shí)踐操作，權(quán)當(dāng)筆記記錄一下。

COMPASS:compass-style.org

安裝compass：gem install compass?
查詢版本：compass -v
在ruby環(huán)境中安裝好compass后，創(chuàng)建compss工作區(qū)間:madir workspace?
進(jìn)入工作區(qū)間創(chuàng)建項(xiàng)目:compass create compass-learn-init

{

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

2、在Sass改變的視乎，必須編譯成css才能生效（在項(xiàng)目文件里面編譯）2-1：按需編譯compass compile
2-2：自動(dòng)編譯 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 ? ? ?

? ?}

}//使用&父類引入，并樣式輸出到父類上，否則這個(gè):hover樣式將應(yīng)用到a標(biāo)簽的所有內(nèi)容上

3、屬性嵌套

.headline{

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

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

? ? ? ? ? ? size:16px;

? ?}

}

Sass:變量操作

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

Sass:@media,響應(yīng)式的布局設(shè)計(jì)

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

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

編譯時(shí)，media會(huì)被提到樣式表的最外層

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

@at-root:樣式表嵌套會(huì)增加樣式的權(quán)重，和樣式位置的依賴

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

Sass:輸出格式Config.rb

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

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

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

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

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

Compass:

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

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

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

如何使用Normalize替換掉reset

Reset模塊

使用compass中的normalize插件

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

Normalize

·base模塊：統(tǒng)一html body字體文字大小邊距

·html5：統(tǒng)一html5的元素

·links：統(tǒng)一a標(biāo)簽的樣式

·typography:統(tǒng)一段落文本樣式

·embeds:統(tǒng)一img、svg樣式

·groups：統(tǒng)一

·forms：統(tǒng)一文字

·tables：統(tǒng)一表格的標(biāo)簽

?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的這個(gè)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); //而這時(shí)，我又不需要該樣式支持所有的瀏覽器，這時(shí)，我們即需要用到browser-supported模塊 //用它配置compass默認(rèn)支持哪些瀏覽器，特定瀏覽器支持到哪個(gè)版本，一旦修改，即影響其他模塊的輸出 @import "compass/support"; //也可省略..... $supported-browsers: chrome; $browser-minimum-versions: ("ie":"8");

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

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

也可以，進(jìn)入ruby命令行中

1---compass interactive

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

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

還有CSS3的其他屬性

animation：動(dòng)畫效果

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)}//修改鏈接不同狀態(tài)下顏色，只有$normal!是必須的 @import "compass/typography/lists" .list-horizontal{@include horizontal-list(0,right); //padding值為0，向右浮動(dòng) }//可修飾導(dǎo)航條，使其向左浮動(dòng)，又擁有一定的高度========編譯完成=======.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默認(rèn)是：單行顯示不換行的。而當(dāng)它們長度超出了父容器的寬度，就破壞了布局。我們使用word-wrap強(qiáng)制它們換行。 .text-force-wrap{@include force-wrap(); } //強(qiáng)行掰斷過長文本當(dāng)不想文本在任何位置換行， .text-nowrap{@include no-wrap(); }//而在過長的文本又不換行時(shí)我們經(jīng)常用。。。。省略后面的文本 .text-ellipsis{@include ellipsis(); }

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

這個(gè)時(shí)候則需要修改ellipsis.xml文件即可

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

Vertical Rhythm

Helper模塊

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

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

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

也可通過在config.rb中設(shè)定compass的編譯環(huán)境
environment = :production

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

utilities模塊

color:

print:

tables:

General:

@import "compass/utilities/general"

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

tag-clound:

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/siestakc/p/6648277.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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