By zhpooer

更新日期:

文章目录
  1. 1. Compass Base
  2. 2. Layout helpers
  3. 3. CSS3
  4. 4. Support for Internet Explorer with CSS PIE
  5. 5. Sprite
    1. 5.1. Customizing the sprite CSS
  6. 6. production
    1. 6.1. deploy
  7. 7. 网络优化
  8. 8. Scripting
  9. 9. 控制指令
  10. 10. CSS3
  11. 11. 960 grid
    1. 11.1. vertical rhythm
  12. 12. Tips

Compass Base

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

@import "reset/utilities";
@include global-reset;

/* a :hover :active :visited :focus */
a { @include link-colors(#333, #00f, #f00, #555, #f00); }

a { @include link-colors(
  #333,
  $hover: #00f,
  $active: #f00,
  $visited: #555,
  $focus: #f00);
}

// a {text-decoration: none;} a:hover{underline}
a {@include hover-link}

// 隐藏超链接
p.secret a,
p.secret a:hover,
p.secret a:focus {
color: inherit;
cursor: inherit;
text-decoration: inherit
}

p.secret a { @include unstyled-link }

// 列表标签
ul.features {
  @include pretty-bullets('pretty-bullet.png',
    $padding: 10px,
    $line-height: 22px)
}

ul.no-bullet { @include no-bullets}
li.no-bullet { @include no-bullet }

// 标题: default $padding is 4px. 
ul.nav { @include horizontal-list }
// For browsers that support :first-child and :last-child, we can omit the padding
// on the outside-facing edge of those elements.

// 列表一行展示, 用 ! 分割
ul.words { @include delimited-list("! ") }


// 超出自动省略
td.dot-dot-dot {
  @include ellipsis;
  }

td { @include nowrap }

// 图片替换文本
h1.coffee { @include replace-text("coffee-header.png") }

Layout helpers

1
2
3
4
5
6

@import "compass/layout"; .

@include sticky-footer(40px, "#content", "#footer", "#sticky-footer");

// 弹出窗口 绝对定位
a.login { @include stretch(5px, 5px, 5px, 5px) }

CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

@import "compass/css3";
$experimental-support-for-opera: false;
$experimental-support-for-microsoft: false;
$experimental-support-for-khtml: false;
.notice {
  @include border-radius(5px);
}

.h2 {
  @include box-shadow(#ccc 5px 5px 2px);
  text-shadow: #ddd -1px 1px 0;
  background: #999;
  padding: 1em;
}


.motion {
  @include text-shadow(
   rgba(#000,.5) -200px 0 0,
   rgba(#000,.4) -400px 0 0,
   rgba(#000,.3) -600px 0 0,
   rgba(#000,.2) -800px 0 0
  );
  font-size: 2em;
  font-style: italic;
  text-align: right;
}
  
@import "compass";
@include font-face("ChunkFiveRegular",
font-files( "Chunkfive-webfont.woff", woff,
  "Chunkfive-webfont.ttf", ttf,
  "Chunkfive-webfont.svg", svg),
  "Chunkfive-webfont.eot", normal, normal);

Support for Internet Explorer with CSS PIE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//compass install compass/pie
@import "compass/css3/pie";
.pie-element {
  // relative is the default, so passing relative
  // is redundant, but we do it here for clarity.
  @include pie-element(relative);
}

.rounded {
  @include pie;
  @include border-radius(20px);
}

.gradient {
  @include pie;
  @include background(linear-gradient(#aaa, #333));
}

Sprite

https://github.com/Keyamoon/IcoMoon-limited

<map> part is a placeholder and should be replaced with the name of the folder containing your sprite images.

The all-sprites mixin will write all the necessary CSS for the entire sprite map, whereas the second mixin will output CSS for a single named sprite.

1
2

@include all-<map>-sprites;
@include <map>-sprite($name);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

@import "compass/utilities/sprites";
// generate sprite from images/icons/
@import "icons/*.png";

@include all-icons-sprites;
.add-button { @extend .icons-box-add; }

// 导入单个sprite, 不使用 @include all-icons-sprites
.add-button {
  @include icons-sprite(box-add);
}

$<map>-<property>: setting;
$<map>-<sprite>-<property>: setting;

// sprite map 中的间隔
$icons-spacing: 4px;
$icons-arrow-spacing:12px;

// 会在map中重复
$icons-arrow-repeat: repeat-x;

// 左边距  4px, arrow浮动到最右边
$icons-position: 4px;
$icons-arrow-position: 100%;
// 布局方式, 默认是 vertical
$<map>-layout: vertical/horizontal/diagonal/smart;

// configuring-automatic-sprites/layout.
$icons-layout: smart;
// 清理
$<map>-clean-up: true/false;

Customizing the sprite CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@import "icons/*.png";
.next {
  @include icons-sprite(arrow);
  width: icons-sprite-width(arrow);
  height: icons-sprite-height(arrow);
}

.add-button {
  @include icons-sprite(box-add);
}

// 是否自动度量元素的高度和宽度, 会给容器自动添加 width, height
$<map>-sprite-dimensions: true/false;

$disable-magic-sprite-selectors: true/false;

Magic sprite selectors are enabled by default, meaning Compass will automatically output CSS :hover , :active, and :target pseudo selectors for sprites with names ending in _hover, _active, or _target.

You add arrow.png and arrow_hover.png to your sprite folder.

帮助函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$icons: sprite-map("icons/*.png", $arrow-spacing: 5px);
$icons: sprite-map("icons/*.png", $arrow-spacing: 5px);
sprite($map, $sprite, [$offset-x], [$offset-y])

$icons: sprite-map("icons/*.png");
.next {
  background: sprite($icons, arrow) no-repeat;
}
.add-button {
  background: sprite($icons, box-add) no-repeat;
}

$icons: sprite-map("icons/*.png");
.sprite-base { background: $icons no-repeat; }
.next {
  @extend .sprite-base;
  background-position: sprite-position($icons, arrow);
}
.add-button {
  @extend .sprite-base;
  @include sprite-background-position($icons, box-add);
}
  
// 自动添加 width height
$icons: sprite-map("icons/*.png");
.sprite-base { background: $icons no-repeat; }
.next {
  @extend .sprite-base;
  @include sprite-background-position($icons, arrow);
  @include sprite-dimensions($icons, arrow);
}

production

1
2
3
4
5
6
7
8
9
10
11
12

# 配置文件中

# Increment the deploy_version before every
# release to force cache busting.
asset_cache_buster do |http_path, real_path|
"v=1"
end

asset_cache_buster :none

// 设置相对路径
relative_assets = true

We encourage you to investigate using a rapid prototyping framework like Serve (http://get-serve.com/) or Middleman (http://middlemanapp.com/), which include support for Sass and Compass out of the box.

deploy

compass compile --force -e production 

1
2
3
4
5
6
7
8
9
10

if environment == :production
  output_style = :compact
  end

// 部署时, 改变路径

http_path = '/my-app'
relative_assets = false
images_dir = 'images' #locally it's the images folder
http_images_dir = 'imgs' #on the webserver it's different

添加版权信息

1
2
3
4
5
6

$copyright-year: unquote("2012");
$company-name: unquote("Example, Inc.");
/*!
Copyright © #{$copyright-year}, #{$company-name}
All Rights Reserved.
*/

1
2

compass compile my_sass_dir/application.scss
sass --compass my_sass_dir/application.scss my_css_dir/application.css

1
2
3
4
5
6
7
8
9
10
11

# STAGING=true compass compile --force -e production
if ENV['STAGING']
  relative_urls = true
  output_style = :compact
elsif environment == :production
  relative_urls = false
  output_style = :compact
else #development
  relative_urls = true
  output_style = :expanded
end

1
2
3
4
5
6
7
8
9
10
11

// compass compile --force -c staging_config.rb -e production
eval(File.read("#{File.dirname(__FILE__)}/config.rb"))
relative_urls = true
output_style = :compact

on_stylesheet_save do |filename|
  # run the gzip tool on the file
  # generates a file of the same name
  # plus a .gz at the end.
  `gzip -f #{file}`
end

网络优化

PNG is a complex format that can handle a range of image types. Be sure to remove the alpha layer unless you need transparency. We highly recommend that you install the free tool Pngcrush and run it on all your PNG images. http://pmt.sourceforge.net/pngcrush/

Beyond the benefits of parallelization, it’s also important to set up your assets hosts to use a cookieless domain—a domain that doesn’t share cookies with your site. This will result in fewer bytes being sent to your web server with each image request.

1
2
3
4

asset_host do |asset|
  host_number = (asset.hash % 4) + 1
  "http://img-#{host_number}.example.com"
end

1
2

background-image: inline-url("logo.gif");
*background-image: image-url("logo.gif");

1
2

gem install css_parser
compass stats

Scripting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

$grid-cells: 20;
$cell-width: 25px;
#main {
  $main-width: $grid-cells * $cell-width;
  $main-padding: 10px;
  width: $main-width;
  padding: $main-padding;
  .siderbar {width: ($main-width - $main-padding*2)/4}
}

$pixels-per-em: 16px/1em;
5em * $pixels-per-em // 80px

1px/2px => 1px/2px; // dont work

// that's work
$var: 1px; $var/2px => 0.5px
(1px/2px) => 0.5px
1 + (1px/2px) => 1.5px


abs($number);
ceil($number);
comparable(13in, 4cm);
floor($number);
percentage(0.4); // 40%;
round($number); 
unit($number);
unitless($number);

// 颜色函数

alpha($color);
opacity($color);
lightness($color);
red($color);
greyscale($color);
invert($color);
miix($color-1, $color-2, [$weight]);
scale($color, $lightness: 30%);

// List Funciton
nth(foo bar baz, 2); // bar
join($list1, $list2, [$separator]);
length(1 2 3);


type-of($value);  // number string color bool list 

if($condition, $if-true, $if-false)

@function grid-width($cells) {
  @return ($cell-width + $cell-padding) * $cells;
}

@mixin thing($class, $prop) {
  .thing.#{$class} {
  prop-{$prop}: val;
  }
}

@mixin bang-hack($property, $value, $ie6-value) {
  #{$property}: $value !important;
  #{$property}: $ie6-value;
}
content: "This element is #{$color}";
width: calc(10% + #{$padding});
filter: progid:DXImageTransform.Microsoft.Alpha(
  Opacity=#{$opacity * 100}
);

控制指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@for $i from 1 through 5 {
  .rating-#{$i} {
    background-image; url(/images/rating-#{$i}.png);
  }
}

// count backwards from 10 to 0
@for $i from 0 through 10 {
  $i: 10 - $i;
}
// count to 20 by twos
@for $i from 0 through 10 {
  $i: $i * 2;
}

@each $section in home, about, archive, project {
  nav .#{section} {
    background-image: url(/images/nav/#{$section}.png);
  }
}


@if $alpha < 0.2 {
  background-color: black;
} @else if $alpha < 0.5 {
  background-color: gray;
} @else {
  background-color: white;
}

CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

@import "compass/css3";
.rounded {
  @include border-radius(5px);
  @include box-shadow(#ccc 5px 5px 2px);
}
.rounded-one {
  @include border-corner-radius(top, left, 5px);
}

.pattern {
  @include background(
  linear-gradient(
    360deg,
    #bfbfbf 0%,
    #bfbfbf 12.5%,
    #bfbf00 12.5%,
    #bfbf00 25%,
    #00bfbf 25%,
    #00bfbf 37.5%,
    #bfbf00 37.5%,
    #00bf00 37.5%,
    #00bf00 50%,
    #bf00bf 50%,
    #bf00bf 62.5%,
    #bf0000 62.5%,
    #bf0000 75%,
    #0000bf 75%,
    #0000bf 87.5%,
    #000 87.5%,
    #000 100%));
  height: 300px;
  margin: 100px auto;
  width: 400px;
}

@mixin nb-gradient($bg) {
  // scale main color to pick
  $top:scale-color($bg, $lightness: 40%);
  $middle-1: scale-color($bg, $lightness: 10%);
  $middle-2: scale-color($bg, $lightness: -5%);
  $bottom: scale-color($bg, $lightness: -20%);
  @include background-image(linear-gradient(
                              $top, $middle-1 50%, $middle-2 50%, $bottom));
}
                              
div:nth-child(2) {
  background: green;
  /* @include border-radius(10px); */
  @include rotateX(45deg);
  @include translate(0, 30px);
  @include transform-origin(left, right);
  
  @include box-sizing(border-box);
  @include transition(all 1s);
  &:hover {
    @include border-corner-radius(top, left, 10px);
    @include scale(1, 2);
  }
}

@include animation(sport 1s ease-out 0 infinite alternate);
@include keyframes(sport){
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

960 grid

1
2
3

gem install compass-960-plugin
compass create -r ninesixty twelve_col --using 960
require 'ninesixty'

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<section class="wrapper container_24">
 <header class="main grid_24">
   Header
  </header>
  <section class="content grid_20">
    Content
  </section>
  <aside id="sidebar grid_4">
    The last column
  </aside>
  <footer class="main grid_24">
    Footer
  </footer>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$ninesixty-columns: 24;

.wrapper {
  @include grid-container;
  header.main, footer.main {
    @include grid(24);
  }
  #sidebar {
    @include grid(4);
  }
  .content {
    @include grid(20);
  }
}

// another usage, to enable container_24 or grid_*
.container_24 {
  @include grid-system(24);
}

vertical rhythm

(baseline unit/ font-size) = line height

(24px / 36px) = .6666667 em

1
2
3
4
5
6

h1 {font-size: 48px; line-height: 1.5em}
h2 {font-size: 36px; line-height: .666667em}
h3 {font-size: 24px; line-height: 1em}
h4 {font-size: 20px; line-height: 1.2em}
h5 {font-size: 18px; line-height: 1.33333em}
p {margin: 1.5em 0}

compass 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@import "compass/typography";

$base-font-size: 16px;
$base-line-height: 24px;
@include establish-baseline;

body {
  font-family: 'Helvetica Neue', sans-serif;
  @include debug-vertical-alignment("../images/debug.png");
}

h1 {@include adjust-font-size-to(48px)}
h2 {@include adjust-font-size-to(36px)}
h3 {@include adjust-font-size-to(24px)}
h4 {@include adjust-font-size-to(20px)}
h5 {@include adjust-font-size-to(18px)}
p {margin: 1.5em 0;}
  • $ninesixty-columns (default: 12) controls the default number of grid columns
  • $ninesixty-grid-width (default: 960px) controls the default overall grid width
  • $ninesixty-gutter-width (default: 20px) controls the default gutter width
  • $ninesixty-class-separator (default: '_') sets the word separator for classnames generated by +grid-system
1
2

p {@include leader; @include trailer;}
h2.important {@include leader(2); @include trailer(2)}

The leader mixin adds one baseline unit of margin before the element, whereas the trailer adds one baseline unit of margin after the element.

Compass also provides padding-leader and padding-trailer variants of these mixins

Tips

compass create bootstrap -r bootstrap-sass --using bootstrap

文章目录
  1. 1. Compass Base
  2. 2. Layout helpers
  3. 3. CSS3
  4. 4. Support for Internet Explorer with CSS PIE
  5. 5. Sprite
    1. 5.1. Customizing the sprite CSS
  6. 6. production
    1. 6.1. deploy
  7. 7. 网络优化
  8. 8. Scripting
  9. 9. 控制指令
  10. 10. CSS3
  11. 11. 960 grid
    1. 11.1. vertical rhythm
  12. 12. Tips