// 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: 0;
right: 0;
}
}
// 使用混合器来复用一段样式 （混合器在每一个被包含进来的地方就会就地复制一段样式）
@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: 0;
padding: 5px 12px;
cursor: pointer;
}
.save{
@extend %button-reset;
color: #fff;
}
.delete{
@extend %button-reset;
color: #000;
}
// 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:#666;
width: 100%;
@include table-scaffolding; //base table style
@include inner-table-borders(1px,darken($table-color,40%)); //table inner-border
@include outer-table-borders(1px); //table outer-border
@include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222); //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(#000,.5) -200px 0 0,
rgba(#000,.4) -400px 0 0,
rgba(#000,.3) -600px 0 0,
rgba(#000,.3) -800px 0 0
);
@include box-shadow(
rgba(#000,.5) -200px 0 0,
rgba(#000,.4) -400px 0 0,
rgba(#000,.3) -600px 0 0,
rgba(#000,.3) -800px 0 0
);
@include background( 渐变
linear-gradient(
360deg,
#bfbfbf 0%,
#bfbfbf 12.5%,
#bfbf00 12.5%,
#bfbf00 25%,
#00bfbf 37.5%,
#00bfbf 37.5%,
#00bf00 50%,
#00bf00 50%,
#bf00bf 62.5%,
#bf00bf 62.5%,
#bf0000 75%,
#bf0000 75%,
#0000bf 87.5%,
#000 100%
)
);
// 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(#333,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>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<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:0; //设置精灵的偏移量
$icon-b-position:100%;
$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编写脚本
时间： 2024-10-24 08:16:35