这两天一直在学习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 compile2-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;