来自 软件资讯 2019-09-19 08:22 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

一种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

网络尝试

一旦你的本地Computer未有设置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 -Lacrosse.”。将CSS转变到Sass。当中“-LAND”表示递归,“.”表示当前目录。

Scss

在此处大家只介绍了Sass的语法,然后还会有二个新的名号叫SCSS可能Sassy CSS。区别的是SCSS看起来更像CSS,但他也像Sass一样具备变量、混合、嵌套和选拔器承袭等特色。

总结

在你共青团和少先队和保管CSS时,Sass真的很非凡。还会有个品种Compass,它在CSS框架中应用混合格局,并非去修改你的HTML结构依旧另行定义你的类名。

那您还在等什么吧?在你的下多个档期的顺序中就尝试选用Sass吧。

赞 2 收藏 评论

图片 2

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

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

## Sass有啥样好处?
Sass的主要性特点如下:变量、嵌套、导入、混合、承继、运算、函数。那一个特色为编写制定CSS加入编程调节的力量。

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

![]()

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

选用器承袭
运用@extend后边跟要承接的选用器
```sass
h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px
```

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:一种CSS预处理器语言,新手指南

关键词: