Sass基础知识及语法
sass
Sass是一款强化css的辅助工具,他在css语法中的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixns)、导入(inline impoarts)等高级功能,这些拓展令css更加强大和优雅。使用sass的样式库(如compass)有助于更好的组织管理样式文件,以及更高效的开发项目。
1、特色功能(features)
- 完全兼容css3
- 在css基础上增加变量、嵌套(nesting)、混合(mibxins)等功能
- 通过函数进行颜色值与属性值得运算
- 提供控制指令(control directives)等高级功能
2、语法格式(stntax)
- SCSS(Sassy CSS)--这种格式仅在CSS3语法的基础上进行拓展,所有CSS3语法在CSS3语法在SCSS中都是通用的,同时加入Sass的特色功能。此外,SCSS也支持大多数CSS hacks写法以及浏览器前缀写法。这种格式以.scss作为拓展名。
- Sass,被称为缩进格式(indented Sass)通常简称“Sass”,是一种简化格式。它使用“缩进”代替“花括号”表示属性属于某个选择器,用“换行”代替“分号”分隔属性,很多人认为这样做比SCSS更容易阅读,书写也更快速。缩进格式也可以使用Sass的全部功能,只是与SCSS相比个别地方采取了不同的表达方式。
3、css功能拓展()
- 嵌套规则:Sass允许将一套css样式嵌套进另一套样式中,内层的的样式将它外层的选择器作为父类选择器,例如:
#main p{
color:#00ff00;
width:97%;
.redbox{
background-color:#ff0000;
color:#000000;
}
}
编译为:
#main p{
color:#00ffid00;
width:97%;
#main p .redbox{
background-color:#ff0000;
color:#000000;
}
}
嵌套功能避免了重复输入父选择器,而且令复杂的CSS结构更易于管理。
#main{
width:97%;
p,div{
font-size:2em;
a{
font-weight:bold;
}
}
pre{
font-size:3em;
}
}
编译为:
#main{
width:97%;
}
#main p,#main div{
font-size:2em;
}
#main p a,#main div a{
font-weight:bold;
}
#main pre{
font-size:3em;
}
- 父选择器
在嵌套CSS规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定hover样式时,或者当body元素有某个classname时,可以用&代表嵌套规则外层的父选择器。
a{
font-weight:bold;
text-decoration:none;
&:hover{
text-decoration:underline;
}
body.firefox &{
font-weight:normal;
}
}
编译为
a{
font-weight:bold;
text-decoration:none;
}
a:hover{
lintext-decoration:underline;
}
body.firefox a{
font-weight:normal;
}
编译后的CSS文件中&将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递;
#main{
color: black;
a{
font-weight:bold;
&:hover{
color:red;
}
}
}
编译为:
#main {
color:black;
}
#main a{
font-weight:bold;
}
#main a:hover{
color:red;
}
&必须作为选择器的第一个字符。其后可以跟随后缀生成复合的选择器,例如:
#main{
color:black;
&-sidebar{
border:1px solid;
}
}
编译为:
#main{
color:black;
}
#main-sidebar{
border:1px solid;
}
当父选择器含有不合适的后缀时,Sass将会报错。
- 属性嵌套
有些CSS属性遵循相同的命名空间(namespace),比如:font-family,font-size,font-weight都以font作为属性的命名空间。为了便于管理这样的属性,同时也为了避免重复输入,Sass允许将属性嵌套在空间中,例如:
.funky{
font:{
family:fantasy;
size:30em;
weight:bold;
}
}
编译为
.funky{
font-family:fantasy;
font-size:30em;
font-weight:bold;
}
命名空间也可以包含自己的属性值,例如:
.funky{
font:20px/24px{ //字体大小/行高
family:fantasy;
weight:bold;
}
}
编译为:
.funky{
font:20px/24px;
font-size:fantasy;
font-weight:bold;
}
- 占位符选择器%foo
Sass额外提供了一种特殊类型的选择器:占位符选择器(placeholder selector).与常用的id与class选择器写法相似,只是#或.替换成了%。必须通过@extend指令调用。
-
注释/* /与//
Sass支持标准的CSS多行注释/ */,以及单行注释//,前者会被完整输出到编译后的CSS文件中,而后者则不会, -
变量
SassScript最普遍的用法就是变量吧,变量以美元符号开头,赋值方法与CSS属性的写法一样。
$width:5em;
直接使用即调用变量:
#main{
width:$width;
}
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加!global声明:
#main{
$width:5em !global;
width:$width;
}
#sidebar{
width:$width;
}
编译为:
#main{
width:5em;
}
#sidebar{
width:5em;
}