sass和compass的使用

云端漂移 2015-07-05

原文链接1:http://www.ruanyifeng.com/blog/2012/06/sass.html

原文链接2:http://www.ruanyifeng.com/blog/2012/11/compass.html

sass是一种“css预处理器”,而compass是sass的工具包,两者都是ruby实现,所以需要使用的话,先装ruby以及ruby的包管理器gem,然后安装即可。

1.sass的基本语法

编译

  
    * nested:嵌套缩进的css代码,它是默认值。
   * expanded:没有缩进的、扩展的css代码。
  * compact:简洁格式的css代码。
  * compressed:压缩后的css代码。

  sass --style compressed test.sass test.css

变量

$blue : #1875e7; 
   div {
   color : $blue;
  }

   $side : left;
  .rounded {
    border-#{$side}-radius: 5px;
  }

计算

   body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

嵌套

/*元素嵌套*/
    div {
    hi {
      color:red;
    }
  }

    /*属性也可以嵌套,比如border-color属性,border后面必须加上冒号*/
   p {
    border: {
      color: red;
    }
  }

继承

.class1 {
    border: 1px solid #ddd;
  }

   .class2 {
    @extend .class1;
    font-size:120%;
  }

mixin

类似c语言的宏,不过mixin还能有参数

@mixin left {
    float: left;
    margin-left: 10px;
  }

   div {
    @include left;
  }

/*还能定义参数,这个非常实用*/
    @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

   div {
    @include left(20px);
  }

引入外部文件

@import "path/filename.scss";

@if...@else

@if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

@for、@while、@each

@for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

    $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

    @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

自定义函数

@function double($n) {
    @return $n * 2;
  }

  #sidebar {
    width: double(5px);
  }

2.compass的用法

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

引用

*reset

*css3

*layout

*typography

*utilities

CSS3模块

目前,该模块提供19种CSS3命令,具体参见官方文档。

/*圆角*/ 
    @import "compass/css3";
  .rounded {
    @include border-radius(5px);
  }

    /*编译后代码*/
   .rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
  }

    /*透明*/
    @import "compass/css3";
  #opacity {
    @include opacity(0.5); 
  }
 
    /*编译后*/
    #opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
    opacity: 0.5;
  }


    /*行内区块*/
    @import "compass/css3";
  #inline-block {
    @include inline-block;
  }

    /*编译后*/
    #inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }

    /*更多参考官方文档*/

layout模块

该模块提供布局功能

/*指定页面的footer部分总是出现在浏览器最底端*/
    @import "compass/layout";
  #footer {
    @include sticky-footer(54px);
  }

    /*指定子元素占满父元素的空间*/
   @import "compass/layout";
  #stretch-full {
    @include stretch; 
  }

    /*更多参考官方文档*/

typography模块

该模块提供版式功能

/*指定链接颜色的mixin*/
   link-colors($normal, $hover, $active, $visited, $focus);

    /*使用*/
    @import "compass/typography";
  a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
  }

utilities模块

/*表格*/
    @import "compass/utilities";
  table {
    @include table-scaffolding;
  }

    /*生成后*/
   table th {
    text-align: center;
    font-weight: bold;
  }
  table td,
  table th {
    padding: 2px;
  }
  table td.numeric,
  table th.numeric {
    text-align: right;
  }

Helper函数

@import "compass";
  .icon { background-image: inline-image("icon.png");}

    /*编译后*/
    .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

相关推荐

zengni / 0评论 2019-12-15

CoderChang / 0评论 2014-06-04
aiolos / 0评论 2015-03-09

buttonChan / 0评论 2019-07-18