五、 语法格式
1、sass语法格式
是sass的最初语法格式,是通过tab键控制缩进的一种语法规则,对锁紧要求非常严格,而且不带有任何的分号和大括号,把这种语法格式成为sass老版本,其文件名以 “.sass”为扩展名
2、scss语法格式
scss是sass的新语法格式,从外形上来判断他和css几乎是一样的,代码都包裹在一对大括号里,并且末尾结束出都有一个分号,其文件名以 “.sass”为扩展名
不管是 Sass 的语法格式还是 SCSS 的语法格式,他们的功能都是一样的,不同的是其书写格式和文件扩展名不同,来看一个简单的对比图:
3、父选择器
在嵌套 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 {
text-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编译
1、命令编译
单文件编译:sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译:sass sass/:css/
自动监测:sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
2、GUI界面工具编译
Koala (http://koala-app.com/) **
Compass.app(http://compass.kkbox.com/)
Scout(http://mhs.github.io/scout-app/)
CodeKit(https://incident57.com/codekit/index.html)**
Prepros(https://prepros.io/)
3、自动化编译
Grunt:Grunt 配置 Sass 编译的示例代码
Gulp:Gulp 配置 Sass 编译的示例代码
七、 不同样式的输出方式
1、嵌套输出方式 nested
2、展开输出方式 expanded
3、紧凑输出方式 compact
4、压缩输出方式 compressed
八、sass声明变量
1、声明变量
美元符号“$”开头
2、普通变量与默认变量
普通变量:定义之后可以在全局范围内使用
默认变量:sass 的默认变量仅需要在值后面加上 !default 即可
3、局部变量和全局变量
//SCSS(代码演示)
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
全局变量:定义在元素外面的变量($color: orange !default;)
局部变量:定义在元素内部的变量( $color: red;)
九、注释、数据类型、数组、运算
1、注释
/* * / 多行注释
// 单行注释
Sass 支持标准的 CSS 多行注释,以及单行注释 ,多行注释会被完整输出到编译后的 CSS 文件中,单行注释则不会
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
编译为:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }
2、数据类型
SassScript 支持 6 种主要的数据类型:
数字:1, 2, 13, 10px
字符串:有引号字符串与无引号字符串,“foo”, ‘bar’, baz
颜色:blue, #04a3f9, rgba(255,0,0,0.5)
布尔型:true, false
空值:null
数组 (list):用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps:相当于 JavaScript 的 object,(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值,比如 Unicode 字符集,或 !important 声明。然而Sass 不会特殊对待这些属性值,一律视为无引号字符串。
3、数组
数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上,独立的值也被视为数组 —— 只包含一个值的数组。
数组本身没有太多功能,但 Sass list functions 赋予了数组更多新功能:nth 函数可以直接访问数组中的某一项;join 函数可以将多个数组连接在一起;append 函数可以在数组中添加新值;而 @each 指令能够遍历数组中的每一项。
数组中可以包含子数组,比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式,需要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)。变化是,之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated),而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。
当数组被编译为 CSS 时,Sass 不会添加任何圆括号(CSS 中没有这种写法),所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的,但是它们在 Sass 文件中却有不同的意义,前者是包含两个数组的数组,而后者是包含四个值的数组。
用 () 表示不包含任何值的空数组(在 Sass 3.3 版之后也视为空的 map)。空数组不可以直接编译成 CSS,比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值,编译时将被清除,比如 1px 2px () 3px 或 1px 2px null 3px。
基于逗号分隔的数组允许保留结尾的逗号,这样做的意义是强调数组的结构关系,尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组,而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。
4、运算
4.1 数字运算
(一)、加法
加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如:
$main-color:red;
body{
margin: 0;
padding: 0;
h1{
border: 1px solid;
font-size: 2rem;
color: $main-color;
text-decoration: underline;
width: 20px+2in;
}
}
编译为:
body {
margin: 0;
padding: 0;
}
body h1 {
border: 1px solid;
font-size: 2rem;
color: red;
text-decoration: underline;
width: 212px;
}
(二)、减法
Sass 的减法运算和加法运算类似,我们通过一个简单的示例来做阐述:
$main-color:red;
$full-width: 960px;
$sidebar-width: 700px;
body{
margin: 0;
padding: 0;
h1{
border: 1px solid;
font-size: 2rem;
color: $main-color;
text-decoration: underline;
width: $full-width - $sidebar-width
}
编译为:
body {
margin: 0;
padding: 0;
}
body h1 {
border: 1px solid;
font-size: 2rem;
color: red;
text-decoration: underline;
width: 260px;
}
(三)、乘法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例:
body{
margin: 0;
padding: 0;
h1{
border: 1px solid;
width: 100px * 2px
}
}
如果这样写,就会报错,这时要注意:两个值单位相同时,只需要为一个数值提供单位即可
修改成:
body{
margin: 0;
padding: 0;
h1{
border: 1px solid;
width: 100px * 2
}
}
编译出来的width就为200px
Sass 的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也将会报错,所以我们在运算的时候,要多注意些
(四)、除法
Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时,直接使用“/”符号做为除号时,将不会生效,编译时既得不到我们需要的效果,也不会报错,要修正这个问题,只需要给运算的外面添加一个小括号( )即可
body{
margin: 0;
padding: 0;
h1{
border: 1px solid;
width: (1000px / 2)
}
}
编译出来的结果自然就为 500px
如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为:
p {
font: 12px/30px; }
4.2 颜色运算
h1{
color: #010203 + #040506;
color: #010203 * 2;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为:
h1{
color: #050709;
color: #020406;
color: rgba(255,255, 0, 0.75);
}
4.3 字符串运算
$value: null;
h1{
cursor: e + -resize; //+ 可用于连接字符串
content: "Foo " + Bar; //注意,如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号。
font-family: sans- + "serif";
margin: 3px + 4px auto; //运算表达式与其他值连用时,用空格做连接符:
content: "I ate #{5 + 10} pies!"; //在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值:
content: "I ate #{$value} pies!"; //空的值被视作插入了空字符串:
}
编译为:
h1 {
cursor: e-resize;
content: "Foo Bar";
font-family: sans-serif;
margin: 7px auto;
content: "I ate 15 pies!";
content: "I ate pies!";
}
4.4 布尔运算
SassScript 支持布尔型的 and or 以及 not 运算。
4.5 圆括号
h1{
width: 1em + (2em * 3);
}
编译为:
h1{
width: 7rem;
}
- 函数
SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用:
p {
color: hsl(0, 100%, 50%);
}
编译为:
h1 {
color: #ff0000; }
6、关键词参数
Sass 函数允许使用关键词参数 (keyword arguments),
h1 {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
虽然不够简明,但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口,以及容易调用的参数。关键词参数可以打乱顺序使用,如果使用默认值也可以省缺,另外,参数名被视为变量名,下划线、短横线可以互换使用。