使用Compass生成雪碧图

         CSS雪碧图是将几个图片拼合成一张图片,以此来减少HTTP请求的方法,并且可以提升网站加载性能。除了使用传统方法在Photoshop中手动拼合,还有一些简便的方法和便捷的工具来帮助我们完成这项工作。

但是,以我处理CSS雪碧图的经验来说,没有哪种方法比使用CompassSprite函数更轻松容易的了。现在就让我们来看看他是如何工作的

开始使用Compass

在使用Compass工作之前,我们需要创建一个Compass的项目然后监视它。这样,当这个项目中包含的图片和.scss一发生改变,Compass就会编译成合适的形式。

让我们打开你的终端或者命令行窗口(如果你使用的是Windows),然后运行下面的这段命令。

compass create /path/to/project  
cd /path/to/project  
compass watch  

合并图片

正如我们上面提到的,你可以使用Photoshop来手动增减图片或者你也可以使用一些便捷的工具,例如:SpriteBox或者SpriteMe。Compass将这些功能整合成一个函数。我们在images/browsers/这个文件夹下有一些icon图片,命名为XXX.png。

使用Compass生成雪碧图

特别声明:以上icon由Futurosoft制作

在Compass中添加这些icon,我们可以在.scss文件中使用@import语法指向图片文件夹下的所有png扩展名的图片。就像下面这样:

@import "browsers/*.png";  

保存文件后,Compass将会将这些图片进行合并,然后生成一个新的图片文件,如下:

使用Compass生成雪碧图

雪碧图陈列方向(即合并完后的图片是横向排列还是纵向排列)

此外,我们还可以设置雪碧图排列的方向。正如你之前看到的图片截屏,图片默认排列是纵向的。假设纵向排列不能适应当前的情况下,我们可以使用$<map>-layout: horizontal;或者$<map>-layout: diagonal;变量来指定他们水平排列或者对角线排列,将变量中的<map>替换成你存储图片的文件夹的名字。

水平排列例子

$browsers-layout:horizontal;  
@import "browsers/*.png";

使用Compass生成雪碧图

对角线排列例子

$browsers-layout:vertical;  
@import "browsers/*.png";  

使用Compass生成雪碧图

在样式表中添加图片

一旦我们将图片合并完,我们就可以在样式表中的背景图中调用它了。我们用传统的做法就可以了。

.chrome {   
    background-position: 0 0; width: 128px; height: 128px;   
}   
.firefox {   
    background-position: 0 -133px; width: 128px; height: 128px;   
}   
.ie {   
    background-position: 0 -266px; width: 128px; height: 128px;   
}   
.opera {   
    background-position: 0 -399px; width: 128px; height: 128px;   
}   
.safari {   
    background-position: 0 -532px; width: 128px; height: 128px;   
}   

在Compass中,我们有更简单的的方法。首先,我们用@include all-<map>-sprites这个语法来生成一些CSS规则,其中,将<map>替换成我们存放图片的文件夹名称。

@include  all-browsers-sprites; 

当上面这行编译成正常的CSS时,除了会生成背景图的声明,还有对应的位置,正如下面展示的。

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {  
  background: url('/images/browsers-sad8e949931.png') no-repeat;  
}  
.browsers-chrome {  
    background-position: 0 0;  
}  
.browsers-firefox {  
    background-position: 0 -128px;  
}  
.browsers-ie {  
    background-position: 0 -256px;  
}  
.browsers-opera {  
    background-position: 0 -384px;  
}  
.browsers-safari {  
    background-position: 0 -512px;  
}  

或者,我们也可以用@include <map>-sprite(image-naem)语法将背景图中的某一个对应的位置图片传给指定的选择器:和前面的代码一样,只需要将<map>替换成存储图片的文件夹名字即可。下面是一个例子。

li {  
    @include browsers-sprite(safari);  
} 

然后,Compass会聪明的识别出背景的位置,不用我们明确指定。在正常的CSS中,上面那行代码会转换成:

.browsers-sprite, li {  
  background: url('/images/browsers-sad8e949931.png') no-repeat;  
}  
li {  
    background-position: 0 -512px;  
}  

指定容器的尺寸

最后我们需要做的就是指定需要显示背景图容器的宽高属性。我们传统的做法是手动查看图片的宽和高(绝大多数情况是通过查看图片信息或图片属性获得)。

使用Compass,我们就可以使用 <map>-sprite-height(image-name)或者<map>-sprite-width(image-name)函数来获取到图片的宽和高。在下面这个例子中,我们会获取其中一个图片的宽和高,并将值存储给变量。再使用@include指令获得分配背景图。

$height: browsers-sprite-height(safari);  
$width: browsers-sprite-width(safari);  
li {  
    display: inline-block;  
    height: $height;  
    width: $width;  
    @include browsers-sprite(safari);  
}  

当我们编译上面这些代码,他就会转成下面这些正常的CSS。

.browsers-sprite, li {  
    background: url('/images/browsers-sad8e949931.png') no-repeat;  
}  
li {  
    display: inline-block;  
    height: 128px;  
    width: 128px;  
    background-position: 0 -512px;  
} 

结论

实际上,Compass除了这些创建CSS雪碧图的基本函数,Compass还有很多有用的函数可以使用。然而,如果你是Compass的新手,我们建议你关注我们之前写的关于Sass和Compass的文章。我们希望这些文章对你有所帮助。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

文章出处:

英文出处:http://www.hongkiat.com/blog/compass-image-sprite/

中文译文:http://www.w3cplus.com/preprocessor/compass-image-sprite.html

Sass基础——Sass函数

     在Sass中除了可以定义变量,具有@extend,%placeholders和Mixins等特性之外,还自备了一系列的函数功能。前面在《Sass基础——颜色函数》一文中主要向大家介绍了Sass函数中有关于颜色函数的功能以及使用。其实在Sass的函数功能中除了颜色函数之外,还具有字符串函数数字函数列表函数Introspection函数以及三元函数等,当然大家还可以根据需求自定义函数

在这篇文章中,我们主要对Sass函数中的字符串函数数字函数列表函数Introspection函数以及三元函数的功能能使用做一些简单的介绍,希望对初学Sass的同学略有帮助。

字符串函数

字符串函数顾名思意是用来处理字符串的函数。Sass的字符串函数主要包括两个函数:

unquote()函数

unquote()函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串。简单的使用终端来测试这个函数的运行结果:

//SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

//CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

从测试的效果中可以看出,unquote()函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。如果字符没有带引号,返回的将是字符串本身。

quote()函数

quote()函数刚好与unquote()函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号会统一换成双引号""。如:

//SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}
//CSS
.test1 {
  content: "Hello Sass!"; 
}

.test2 {
  content: "Hello Sass!"; 
}

.test3 {
  content: "ImWebDesigner"; 
}
.test4 {
  content: " "; 
}

使用quote()函数增加只能给字符串增加双引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错。

.test1 {
    content:  quote(Hello Sass);
}

这样使用,编译器马上会报错:

error style.scss (Line 13: $string: ("Hello" "Sass") is not a string for `quote')

解决方案就是去掉空格,或者加上引号:

.test1 {
    content:  quote(HelloSass);
}
.test1 {
    content:  quote("Hello Sass");
}

同时quote()碰到特殊符号,比如说!?>等,除中折号-和下划线_都需要使用双引号括起,否则编译器在进行编译的时候同样会报错:

error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")
error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was "?);")

数字函数

Sass中的数字函数提要针对数字方面提供一系列的函数功能:

看到上面函数的简介,对于熟悉javascript同学而言并不会感觉陌生。因为他们有很多功能都非常类似,接下来对每个函数进行一些简单的测试。

percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式:

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
>>

如果您转换的值是一个带有单位的值,那么在编译的时候会报错误信息:

>> percentage(2px / 10em)
SyntaxError: $value: 0.2px/em is not a unitless number for `percentage'

round()函数

round()函数将一个数四舍五入为一个最接近的整数:

>> round(12.3)
12
>> round(12.5)
13
>> round(1.49999)
1
>> round(2.0)
2
>> round(20%)
20%
>> round(2.2%)
2%
>> round(3.9em)
4em
>> round(2.3px)
2px
>> round(2px / 3px)
1
>> round(1px / 3px)
0
>> round(3px / 2em)
2px/em

round()函数中可以携带单位的任何数值。

ceil()函数

ceil()函数将一个数转换成最接近于自己的整数,会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入,不做舍的计算:

>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1
>> ceil(2% / 3px)
1%/px
>> ceil(1em / 5px)
1em/px

floor()函数

floor()函数刚好与ceil()函数功能相反,其主要将一个数去除其小数部分,并且不做任何的进位。也就是只做舍,不做入的计算:

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
10em
>> floor(2px / 10px)
0
>> floor(3px / 1em)
3px/em

abs()函数

abs()函数会返回一个数的绝对值。

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5

min()函数

min()函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数:

>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

不过在min()函数中同时出现两种不同类型的单位,将会报错误信息:

>> min(1px,1em)
SyntaxError: Incompatible units: 'em' and 'px'.

max()函数

max()函数和min()函数一样,不同的是,max()函数用来获取一系列数中的最大那个值:

>> max(1,5)
5
>> max(1px,5px)
5px

同样的,如果在max()函数中有不同单位,将会报错:

>> max(1,3px,5%,6)
SyntaxError: Incompatible units: '%' and 'px'.

List函数

列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:

列表函数中的每个函数都有其独特的作用与功能,接下来我们通过命令终端向大家展示每个列表函数的功能与使用。

length()函数

length()函数主要用来返回一个列表中有几个值,简单点说就是返回列表清单中有多少个值:

>> length(10px)
1
>> length(10px 20px (border 1px solid) 2em)
4
>> length(border 1px solid)
3

length()函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会把错:

>> length(10px,20px,(border 1px solid),2em)
SyntaxError: wrong number of arguments (4 for 1) for `length'
>> length(1,2px)
SyntaxError: wrong number of arguments (2 for 1) for `length'

nth()函数

nth()函数用来指定列表中某个位置的值。不过在Sass中,nth()函数和其他语言不同,1是指列表中的第一个标签值,2是指列给中的第二个标签值,依此类推。如:

>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)

注:nth($list,$n)函数中的$n必须是大于0的整数:

>> nth((1px solid red) border-top green 1 ,0)
SyntaxError: List index 0 must be a non-zero integer for `nth'

join()函数

join()函数是将两个列表连接合并成一个列表。

>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)
>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
>> join((blue,red),(#abc #def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)

不过join()只能将两个列表连接成一个列表,如果直接连接两个以上的列表将会报错:

>> join((blue red),(#abc, #def),(#dee #eff))
SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join'

但很多时候不只碰到两个列表连接成一个列表,这个时候就需要将多个join()函数合并在一起使用:

>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

join()函数中还有一个很有特别的参数$separator,这个参数主要是用来给列表函数连接列表值是,使用的分隔符号,默认值为auto

join()函数中$separator除了默认值auto之外,还有commaspace两个值,其中comma值指定列表中的列表项值之间使用逗号,)分隔,space值指定列表中的列表项值之间使用空格( )分隔。

join()函数中除非明确指定了$separator值,否则将会有多种情形发生:

如果列表中的第一个列表中每个值之间使用的是逗号(,),那么join()函数合并的列表中每个列表项之间使用逗号,分隔:

>> join((blue, red, #eff),(green orange))
(#0000ff, #ff0000, #eeffff, #008000, #ffa500)

但当第一个列表中只有一个列表项,那么join()函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的,如果第二列表项中使用是,分隔,则使用逗号分隔;如果第二列项之间使用的空格符,则使用空格分隔:

>> join(blue,(green, orange))
(#0000ff, #008000, #ffa500)
>> join(blue,(green orange))
(#0000ff #008000 #ffa500)

如果列表中的第一个列表中每个值之间使用的是空格,那么join()函数合并的列表中每个列表项之间使用空格分隔:

>> join((blue green),(red,orange))
(#0000ff #008000 #ff0000 #ffa500)
>> join((blue green),(red orange))
(#0000ff #008000 #ff0000 #ffa500)

如果当两个列表中的列表项小于1时,将会以空格分隔:

>> join(blue,red)
(#0000ff #ff0000)

如此一来,会有多种情形发生,造成使用混乱的情形,如果你无法记得,什么时候会是用逗号分隔合并的列表项,什么时候是使用空格分隔合并的列表项,在些建议大家使用join()函数合并列表项的时候就明确指定$separator参数,用来指定合并的列表中使用什么方式来分隔列表项:

>> join(blue,red,comma)
(#0000ff, #ff0000)
>> join(blue,red,space)
(#0000ff #ff0000)
>> join((blue green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
>> join((blue, green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue, green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
>> join(blue,(red,orange),comma)
(#0000ff, #ff0000, #ffa500)
>> join(blue,(red,orange),space)
(#0000ff #ff0000 #ffa500)
>> join(blue,(red orange),comma)
(#0000ff, #ff0000, #ffa500)
>> join(blue,(red orange),space)
(#0000ff #ff0000 #ffa500)

append()函数

append()函数是用来将某个值插入到列表中,并且处于最末位。

>> append(10px 20px ,30px)
(10px 20px 30px)
>> append((10px,20px),30px)
(10px, 20px, 30px)
>> append(green,red)
(#008000 #ff0000)
>> append(red,(green,blue))
(#ff0000 (#008000, #0000ff))

如果没有明确的指定$separator参数值,其默认值是auto。如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔;如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔。

当然,在append()函数中,可以显示的设置$separator参数,如果取值为comma将会以逗号分隔列表项,如果取值为space将会以空格分隔列表项:

>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)
>> append((blue, green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue, green),red,space)
(#0000ff #008000 #ff0000)
>> append(blue,red,comma)
(#0000ff, #ff0000)
>> append(blue,red,space)
(#0000ff #ff0000)

zip()函数

zip()函数将多个列表值转成一个多维的列表:

>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

在使用zip()函数时,每个单一的列表个数值必须是相同的:

>> zip(1px 2px 3px, solid , green blue red)
NoMethodError: undefined method `options=' for nil:NilClass
  Use --trace for backtrace.

否则将会出错。

zip()函数中每个单一列表的值对应的取其相同位置值:

|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
|    List1   |      1px     |      2px     |      3px     |
|------------|--------------|--------------|--------------|
|    List2   |      solid   |      dashed  |     dotted   |
|------------|--------------|--------------|--------------|
|    List3   |      green   |      blue    |      red     |
|------------|--------------|--------------|--------------|

zip()函数组合出来就成了:

1px solid green, 2px dashed blue, 3px dotted red

index()函数

index()函数类似于索引一样,主要让你找到某个值在列表中所处的位置。在Sass中,第一个值就是1,第二个值就是2,依此类推:

>> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)
3

index()函数中,如果指定的值不在列表中(没有找到相应的值),那么返回的值将是false,相反就会返回对应的值在列表中所处的位置。

>> index(1px solid red,dotted) //列表中没有找到dotted
false
>> index(1px solid red,solid) //列表中找到solid值,并且返回他的位置值2
2

Introspection函数

Introspection函数包括了几个判断型函数:

这几个函数主要用来对值做一个判断的作用,依次来看每个函数的功能。

type-of()函数

type-of()函数主要用来判断一个值是属于什么类型:

>> type-of(100)
"number"
>> type-of(100px)
"number"
>> type-of("asdf")
"string"
>> type-of(asdf)
"string"
>> type-of(true)
"bool"
>> type-of(false)
"bool"
>> type-of(#fff)
"color"
>> type-of(blue)
"color"
>> type-of(1 / 2 = 1)
"string"

unit()函数

unit()函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个多单位组合的值,不过只充许乘除运算:

>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

但加减碰到不同单位时,unit()函数将会报错,除pxcmmm运算之外:

>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: 'cm' and 'px*em'.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: '' and 'em'.
>> unit(1px - 1em)
SyntaxError: Incompatible units: 'em' and 'px'.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: 'rem' and 'px'.
>> unit(1px - 1%)
SyntaxError: Incompatible units: '%' and 'px'.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: 'em' and 'cm'.

unit()函数对于单位运算相对来说也没有规律,而且有些单位也无法整合成一个单位,对于我们在CSS中运用中并不适合,比如:

>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

换句话说,上面运算出来的单位,对于在CSS中使用将是没有任何意义的。

unitless()函数

unitless()函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为true,带单位返回的值为false

>> unitless(100)
true
>> unitless(100px)
false
>> unitless(100em)
false
>> unitless(100%)
false
>> unitless(1 /2 )
true
>> unitless(1 /2 + 2 )
true
>> unitless(1px /2 + 2 )
false

comparable()函数

comparable()函数主要是用来判断两个数是否可以进行加,减以及合并。如果可以返回的值为true,如果不可以返回的值是false

>> comparable(2px,1px)
true
>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2px,1mm)
true
>> comparable(2px,1rem)
false
>> comparable(2cm,1mm)
true

Miscellaneous函数

在这里把Miscellaneous函数称为三元条件函数,主要因为他和JavaScript中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:

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

上面表达式的意思是当$condition条件成立时,返回的值为$if-true,否则返回的是$if-false值。

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

自定义函数

自定义函数是用户根据自己一些特殊的需求编写的Sass函数。在很多时候,Sass自带的函数并不能满足功能上的需求,所以很多时候需要自定义一些函数。

例如,我们需要去掉一个值的单位,在这种情形之下,Sass自带的函数是无法帮助我们完成,这个时候我们就需要定义函数:

//去掉一个值的单位,如12px => 12
// eg. strip-units(12px) => 12

@function strip-units($number){
    @return $number / ($number * 0 + 1);
}     

上在演示是一个经典的去除单位的自定义函数,除了这个函数之外,大家还可以根据自己需求定义其他的函数,正如前面介绍的pxToempxTorem两个自定义的函数。

总结

在这一节中,主要根据Sass的官网介绍的函数为范本,借助Sass的sass -i命令在终端向大家展示了Sass函数中的字符串函数数字函数列表函数Introspection函数以及三元函数等功能以及使用方法。并且在最后简单的介绍了在Sass中如何自定义Sass的函数。希望这篇文章对于初学者能更好的理解Sass中的自带函数的功能与作用。

转载:http://www.w3cplus.com/preprocessor/sass-other-function.html