sass与compass实战(读书笔记)

// 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:{
         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;
     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;      //头部给整体设置

 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函数          (这里无需引入任何模块喔)

//返回图片的宽和高
 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);