【Sass】+【Compass】学习笔记
這兩天一直在學(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、以_開(kāi)頭的文件為局部文件，主要用來(lái)被其他的樣式文件引入，在編譯的時(shí)候不會(huì)單獨(dú)的被編譯成CSS文件
2、在Sass改變的視乎，必須編譯成css才能生效（在項(xiàng)目文件里面編譯）2-1：按需編譯compass compile2-2：自動(dòng)編譯 compass watch
}
Sass：變量語(yǔ)法
1、局部變量抽離到外部的局部文件里('_'variables),宿主文件中@import引入
? ?//聲明局部變量：$headline-ff:Braggadocio,Arial,Verdana,Helvetica,sans-serif;
? //宿主文件中引用變量
? ?.main{
? ? ? ? ? font-family:$headline-ff;
}
Sass:嵌套語(yǔ)法
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、通過(guò)函數(shù) {·跟代碼塊無(wú)關(guān)的函數(shù)，多為內(nèi)置函數(shù)functions·可重用的代碼塊，成為mixin{@include方式調(diào)用（以復(fù)制拷貝方式存在的）@extend方式調(diào)用，（以組合聲明存在的）} }3、類名一定要有語(yǔ)義化的意義而不光是為了視覺(jué)上的效果不全 可以利用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)成僅用來(lái)繼承的選擇器
Sass:@media,響應(yīng)式的布局設(shè)計(jì)
-
- ·sass@media可以內(nèi)嵌在css規(guī)則中
- ·最后編譯后會(huì)被提取到樣式的最高級(jí)別
- 好處：避免重復(fù)書寫選擇器和打亂樣式表
編譯時(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'
- 但是，大型的開(kāi)發(fā)項(xiàng)目中我們并不需要初始化全部的樣式，這時(shí)normalize的八大模塊就派上了用場(chǎng)
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");如果我們想要了解瀏覽器和特定瀏覽器的版本，可通過(guò)
@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; } 長(zhǎng)文本或過(guò)長(zhǎng)的url默認(rèn)是：單行顯示不換行的。 而當(dāng)它們長(zhǎng)度超出了父容器的寬度，就破壞了布局。 我們使用word-wrap強(qiáng)制它們換行。 .text-force-wrap{@include force-wrap(); } //強(qiáng)行掰斷過(guò)長(zhǎng)文本當(dāng)不想文本在任何位置換行， .text-nowrap{@include no-wrap(); }//而在過(guò)長(zhǎng)的文本又不換行時(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;//開(kāi)啟對(duì)fiefox的支持
Vertical Rhythm
Helper模塊
helper模塊中的image-url('圖片.png');可以直接指定圖片路徑。默認(rèn)是絕對(duì)路徑，如果要改變成相對(duì)路徑，需要改變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)前開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境
@debug compass-env();
編譯：compass compile -e production --force //-e指定編譯環(huán)境，force讓compass覆蓋重寫的已有的環(huán)境
也可通過(guò)在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】学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： QQ推广工具
- 下一篇： Unity应用架构设计(7)——IoC工