>

生手指南,风流倜傥种CSS预管理器语言

- 编辑:至尊游戏网站 -

生手指南,风流倜傥种CSS预管理器语言

SASS 新手指南

2013/01/26 · CSS · CSS

英文原文:teamtreehouse.com,编译:w3cplus – 大漠

什么是Sass?

Sass是一门非常优秀的CSS预处语言,他是由Hampton Catlin创立的。它可以减化CSS的工作流,使开发者更加容易开发,维护CSS样式。

例如,你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼?或者你正在寻找一个计算器为多栏布局的宽度计算而头痛?(不用担心,Sass能帮你解决这样的烦恼)。

图片 1

本文将介绍Sass的一些基本概念,比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。

Sass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。

如下面的CSS:

CSS

#skyscraper_ad { display: block; width: 120px; height: 600px; } #leaderboard_ad { display: block; width: 728px; height: 90px; }

1
2
3
4
5
6
7
8
9
10
#skyscraper_ad {
  display: block;
  width: 120px;
  height: 600px;
}
#leaderboard_ad {
  display: block;
  width: 728px;
  height: 90px;
}

在Sass中,上面的CSS代码你要写成下面这样:

CSS

#skyscraper_ad display: block width: 120px height: 600px #leaderboard_ad display: block width: 728px height: 90px

1
2
3
4
5
6
7
8
#skyscraper_ad
  display: block
  width: 120px
  height: 600px
#leaderboard_ad
  display: block
  width: 728px
  height: 90px

Sass使用两个空格琮定义嵌套的区别。

你现在看过了Sass是如何书写的,接下来我们一起看一些Sass方面的介绍,让Sass在你手中变得不在可怕。

变量(Variables)

在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

CSS

$red: #ff4848

1
$red: #ff4848

Sass还内置了函数功能,例如变暗(darken)和变亮(lighten),他们可以帮助你修改变量。

在这个例子中,段落要使用一个比“h1”标签更深的红色,就可以这样使用:

CSS

$red: #ff4848 $fontsize: 12px h1 color: $red p color: darken($red,10%)

1
2
3
4
5
6
$red: #ff4848
$fontsize: 12px
h1
  color: $red
p
  color: darken($red,10%)

你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑,我们也可以在变量的基础上减一个十六进制的颜色,例如“#101”。如果我们想把字号调大“10px”,我们也可以在字号的变量基础上加上这个值。

CSS

/*加法和减法*/ color: $red - #101 font-size: $fontsize + 10px

1
2
3
/*加法和减法*/
color: $red - #101
font-size: $fontsize + 10px

嵌套(Nesting)

Sass有两种嵌套规则:

选择器嵌套

选择器嵌套是Sass嵌套规则中的第一种。

Sass的嵌套类似于你的HTML嵌套:

CSS

$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize

1
2
3
4
5
6
7
8
9
$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

如果你看了Sass生成的CSS,你可以看到“.name”嵌套在“.speaker”内,这里生成的CSS选择器是“.speaker .name”。

CSS

.speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

1
2
3
4
5
6
7
.speaker .name {
  font-weight: bold;
  font-size: 22px;
}
.speaker .position {
  font-size: 12px;
}

属性嵌套

属性嵌套是Sass嵌套的第二种

相同前缀的属性,你可以进行嵌套:

CSS

$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize

1
2
3
4
5
6
7
8
9
$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

在上面的例子中,我们有一个“font:”,在新的一行增加两个空格放置他的属性(通常我们看到的是使用连字符“-”来连接)。

因此我们先写“font:”属性,然后断行空两格,写“weight:”属性,在CSS中就变成了“font-weight:”属性。

CSS

.speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

1
2
3
4
5
6
7
.speaker .name {
  font-weight: bold;
  font-size: 22px;
}
.speaker .position {
  font-size: 12px;
}

所有连字符的选择器都支持。

这种嵌套用来组织你的CSS结构是非常棒的,可以让你不在写一些重复的代码。

混合(Mixins)

混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码,甚至你可以给他们定义参数,更酷的是你还可以设置默认值。

使用关键词“@mixin”来定义Sass的混合,你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数,你还可以将参数设置到这些代码片段中;如果你需要设置默认值,你也可以在混合的代码片段中设置默认值。

调用混合代码片段,可以使用Sass中的关键词“@include”调用,并在其后面跟上你的混合代码片段的名称,你还可以使用括号,在里面设置一些参数。

来看一个简单的例子:

CSS

@mixin border-radius($amount: 5px) -moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amount h1 @include border-radius(2px) .speaker @include border-radius

1
2
3
4
5
6
7
8
@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount
h1
  @include border-radius(2px)
.speaker
  @include border-radius

上面的Sass代码将转译成下面的CSS代码:

CSS

h1 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

1
2
3
4
5
6
7
8
9
10
h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

我们给“h1”元素指定了一个特定的圆角值,但是并没有给“.speaker”指定任何值,因此他将使用的是默认值“5px”。

选择器继承

选择器的继承可以让你的选择器继承另一个选择器的所有样式风格,这是一个非常优秀的特性。

使用选择器的继承,要使用Sass的关键词“@extend”,后而跟上你需要继承的选择器,那么这个选择器就会继承另一个选择器的所有样式。(当然他们是有继承和被继承的关系)

CSS

h1 border: 4px solid #ff9aa9 .speaker @extend h1 border-width: 2px

1
2
3
4
5
h1
  border: 4px solid #ff9aa9
.speaker
  @extend h1
  border-width: 2px

上面的Sass代码将转译成下面的CSS代码:

CSS

h1, .speaker { border: 4px solid #ff9aa9; } .speaker { border-width: 2px; }

1
2
3
4
5
6
7
h1,
.speaker {
  border: 4px solid #ff9aa9;
}
.speaker {
  border-width: 2px;
}

尝试Sass

网上尝试

如果你的本地电脑没有安装Sass,你可以在网上尝试使用。

在转译之前,你需要选择底部的“Indented Syntax”选项。

安装

Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems,那么可以在你命令终端直接运行:

CSS

gem install sass

1
gem install sass

Sass也可以使用命令行工具将Sass文件转译成CSS文件。

你可以键入“sass –watch sass_folder:stylesheets_folder”,这个时候你的Sass文件(文件扩展名必须是.sass)stylesheets_folder就会把转译的样式文件保存在“sass_folder”目录,当然你的sass文件必须保存在这个文件目录中。“–watch”选项的意思就是将这个目录中的sass文件转译成样式文件。

CSS转换成Sass

在现有的项目中通过“sass-convert”使用sass。

在终端进入你的目录中,键入“sass-convert –from css –to sass -R .”。将CSS转换成Sass。其中“-R”表示递归,“.”表示当前目录。

Scss

在这里我们只介绍了Sass的语法,然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS,但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。

总结

在你组织和管理CSS时,Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式,而不是去修改你的HTML结构或者重新定义你的类名。

那你还在等什么呢?在你的下一个项目中就尝试使用Sass吧。

赞 2 收藏 评论

图片 2

![]()

Sass是一种CSS预处理器语言,通过编程方式生成CSS代码。因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码。
同时,因为Sass是生成CSS的语言,所以写出来的Sass文件是不能直接用的,必须经过编译器编译成CSS文件才能使用。

## Sass有什么好处?
Sass的主要特性如下:变量、嵌套、导入、混合、继承、运算、函数。这些特性为编写CSS加入编程控制的能力。

## 如何开始使用Sass
直接使用任何文本或代码编辑器都可以开始编辑Sass代码,要将Sass文件转换为CSS文件,则需使用Sass命令行编译器或桌面集成编译软件。
**安装Sass编译器**
Sass编译器使用Ruby环境,所以本地安装使用Sass编译器之前需要有Ruby环境,Ruby安装另见...
Ruby环境准备完毕后,使用gem安装Sass:
`gem install sass`

##Sass语法
#### 先分清sass与scss
Sass使用sass和scss这两种后缀名以区分不同的语法格式:
- sass与普通CSS的语法格式区别较大,其不使用花括号和分号。
- scss接近普通CSS的语法格式,使用与CSS相同的花括号和分号。
具体要使用哪种格式,

在sass格式中,取消花括号,改为使用二个空格缩进嵌套;取消分号,以行分隔。
以下sass代码:
```sass
#div1
  width:50px
  height:30px
```
编译后为如下css代码:
```css
#div1{
width:50px;
height:50px;
}
```

选择器嵌套
```sass
#sample
  .span
    font-size:12px
    font-weight:bold
```

属性嵌套
带有相同前缀的属性可进行嵌套
```sass
#sample
  font:
    size:12px
    weight:bold
```

变量
```sass
$red:#f00
h1
  color:$red
```

函数
```sass
.div1
  color:darken($red,10%)
  background:lighten($red,10%)
```

表达式
```saaa
p
  color:$red - #101
  font-size:$fontsize+10px;
```

混合
重用代码
使用@mixin关键字定义混合代码,使用@include使用混合代码
@mixin后面是定义混合的名字
```sass
@mixin border-radius($amount:5px)
-moz-border-radius:$amount
-webkit-border-radius:$amount
border-radius:$amount
h1
@include border-radius(2px)
.speaker
@include border-radius
```
没有给出参数,会使用设置的默认值

选择器继承
使用@extend后面跟要继承的选择器
```sass
h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px
```

本文由硬件数码发布,转载请注明来源:生手指南,风流倜傥种CSS预管理器语言