// compass create myproject // compass compile
// compass compile --force 重新编译未改动的 // compass compile --output-style compressed
// compass compile --output-style compressed --force // compass watch // compass模块:reset css3 layout typography utilities // 使用变量
$company-blue: #eee;
$basic-border: 1px solid black; // 使用嵌套
// 属性嵌套
nav{
border:{
width: 1px;
style:solid;
color:red;
}
}
nav{
border:1px solid #ccc{
left: ;
right: ;
}
} // 使用混合器来复用一段样式 （混合器在每一个被包含进来的地方就会就地复制一段样式）
@mixin horizontal-list{
li{
float:left;
margin-right:10px;
}
}
#header ul.nav{
@include horizontal-list;
margin-top:10px;
}
#footer ul.nav{
@include horizontal-list;
margin-top:20px;
} // 混合器和变量的结合使用
@mixin horizontal-list($spacing:10px){
li{
float:left;
margin-right:$spacing;
}
}
#header ul.nav{
@include horizontal-list;
margin-top:10px;
}
#footer ul.nav{
@include horizontal-list(20px);
margin-top:20px;
} // 使用继承来避免混合器的复制
.warning{
background-color: #ccc;
}
.other-warning{
@extend .warning;
} // 使用占位符 （上面warning和other-warning都是需要在HTML中使用到的，但有时父类不需要再HTML中使用）
%button-reset{
margin: ;
padding: 5px 12px;
cursor: pointer;
}
.save{
@extend %button-reset;
color: #fff;
}
.delete{
@extend %button-reset;
color: #;
} // Compass是一个强大的Sass框架，自身包含了很多有Sass混合器和函数构成的模块 @import "compass/reset"; //重置 @import "compass/reset/utilities"; //基础辅助作用，使下面的global-reset可用
@include global-reset;
// @include reset-html5; @import "compass/utilities/tables"; //表格
.table{
$table-color:#;
width: %;
@include table-scaffolding; //base table style
@include inner-table-borders(1px,darken($table-color,%)); //table inner-border
@include outer-table-borders(1px); //table outer-border
@include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#); //th and td color
} // 混合器源码
@mixin table-scaffolding{
th{
text-align: center;
font-weight: bold;
}
td,th{
padding: 2px;
&.numeric{
text-align: right;
}
}
} @import "compass/css3"; //CSS3
.rounded{
@include border-radius(5px);
@include border-corner-radius(top,left,20px);
} // 如果你并不打算支持所有的浏览器厂商
$experimental-support-for-opera:false;
$experimental-support-for-microsoft:false;
$experimental-support-for-khtml:false; @include box-shadow(#ccc 5px 5px 2px);
@include text-shadow(
rgba(#,.) -200px ,
rgba(#,.) -400px ,
rgba(#,.) -600px ,
rgba(#,.) -800px
);
@include box-shadow(
rgba(#,.) -200px ,
rgba(#,.) -400px ,
rgba(#,.) -600px ,
rgba(#,.) -800px
);
@include background( 渐变
linear-gradient(
360deg,
#bfbfbf %,
#bfbfbf 12.5%,
#bfbf00 12.5%,
#bfbf00 %,
#00bfbf 37.5%,
#00bfbf 37.5%,
#00bf00 %,
#00bf00 %,
#bf00bf 62.5%,
#bf00bf 62.5%,
#bf0000 %,
#bf0000 %,
#0000bf 87.5%,
# %
)
); // https://www.google.com/fonts/ Google字体的使用 // Sass允许 @import 命令写在CSS规则内
.blue-theme{
@import "blue-theme";
} // 可以把原始的CSS文件改名为.SCSS后缀，即可直接导入了 // 这种注释内容不会出现在生成的css文件中
/* 这种注释内容会出现在生成的css文件中 */ // 混合器中不仅可以包含属性，也可以包含CSS规则，包含选择器和选择器中的属性
@mixin no-bullets{
list-style: none;
li{
margin-left: 10px;
}
} // 给混合器传参
@mixin link-colors($normal,$hover){
color: $normal;
&:hover{
color: $hover;
}
}
a{
@include link-colors(blue,red);
}
// ..........................设默认值...................
@mixin link-colors($normal:blue,$hover:red){
color: $normal;
&:hover{
color: $hover;
}
}
a{
@include link-colors(blue,red);
} // 不要用后代选择器去继承！！！
.foo .bar{
@extend .bar;
} // ...................................网络布局..............................
// 所有的CSS网络布局都有列的概念，并且这些列在同一容器内是等宽的 @import "compass/typography"; //更快更直观的排版工具 @include link-colors(#,red); //默认和hover时的颜色
@include hover-link; //添加下划线
@include unstyled-link; //隐形的链接
@include pretty-bullets('a.png'); //装点列表 注意是加在ul上面喔
ul.features{
@include pretty-bullets('a.png');
} // pretty-bullets混合器使用了image-url辅助器，它可以在开发环境和生产环境返回各自不同的完整路径 // 去掉项目符号
li.no-bullet{
@include no-bullet;
}
ul.no-bullet{
@include no-bullets;
} @include horizontal-list; //轻松横向排列 对于支持:first-child和.last-child的浏览器，则省去了两遍元素的padding，对于低版本浏览器，则可以使用.first和.last
ul.nav{
// @include horizontal-list;
@include horizontal-list(10px,right); //改变列表间距并颠倒次序并右浮动
} @include delimited-list; //让列表看起来像文字排列一样哈
ul.words{
@include delimited-list("! ");
} @include ellipsis; //点点点
@include nowrap; //防止折行 @include replace-text("a.png"); //用图片来替换文字 @import "compass/layout"; //布局模块 // 粘滞的页脚
<div id="content">
start<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end
<div id="blank"></div>
</div>
<div id="footer">停靠在页脚的内容</div> @include sticky-footer(80px,"#content","#blank","#footer"); //利用margin-bottom负值实现：无论content内容多少，footer永在最下面 @include stretch(15px,15px,15px,15px); //流布局 // ................................Compass精灵，重！.....................................
@import "compass/utilities/sprites"; $icon-spacing:30px; //设置间距
$icon-a-spacing:60px; //设置图片a的间距
$icon-repeat: no-repeat; //设置精灵的重复性
$icon-a-repeat:repeat-x;
$icon-position:; //设置精灵的偏移量
$icon-b-position:%;
$icon-layout:vertical/horizontal/diagonal/smart; //对于采用智能布局或对角线布局的精灵地图，位置和重复性的设置是无效的
$icon-clean-up:true/false; //清除过期的精灵地图 @import "icon/*.png"; @include all-icon-sprites; //可写可不写
.icon1{
@include icon-sprite-dimensions(a);
@include icon-sprite(a);
} //设置精灵大小的3种方式
$icon-sprite-dimensions:true; //头部给整体设置 width: icon-sprite-width(a); //样式内部单独设置
height: icon-sprite-height(a); @include icon-sprite-dimensions(a); //样式内部自动设置 //设置精灵的基础类（同样在引入图片之前定义，具体的类不必在引入图片之前定义）
$icon-sprite-base-class:".yangkang";
.yangkang{
border: 2px solid red;
} //魔术精灵选择器 只需要给图片命名 a.png/a_hover.png等等即可
$disable-magic-sprite-selectors:true/false; // ....................驾驭精灵辅助器.....P131待看.................. // 用Sass编写脚本..............略................. Compass函数 (这里无需引入任何模块喔) //返回图片的宽和高
width: image-width("icon/head.png");
height: image-height("icon/head.png");
// 将图片转换为data协议的数据
background-image: inline-image("icon/head.png"); //the path specified should be relative to your project's images directory 我的Compass常用模块总结 @import "compass/reset";
@import "compass/css3/background-size"; //@include background-size;默认background-size:100% auto;
@import "compass/css3/border-radius"; //@include border-radius;默认border-radius:5px;
@import "compass/css3/box-shadow"; //@include box-shadow;默认box-shadow:0px 0px 5px #333333;
@import "compass/css3/box-sizing"; //@include box-sizing(border-box);
@import "compass/css3/inline-block"; //@include inline-block;
@import "compass/css3/opacity"; //@include opacity(.4);