Sass 基础(一)
css 是一些非常简单得语句的组合，既然简单的语句，就不可避免的有很多重复的，冗余的东西，而且没有传统 编程语言变量，控制语句等高级特性，所以造成了css 编写低效，往往需要查找替换，大量复制来修改或者编写。Sass 是用 弥补这些缺陷的，使开发更加的方便快捷，更加方便管理。 1.Sass和SCSS的区别。 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 例如：Sass语法 $font-stack: Helvetica, sans-serif //定义变量 $primary-color: #333 //定义变量
body font: 100% $font-stack color: $primary-color 例如：SCSS语法 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 编译出来的 CSS body { font: 100% Helvetica, sans-serif; color: #333; }
在使用的页面时依然引用.css文件。 Sass中编译出来的样式风格可以按不同的样式风格显示。 1.嵌套输出方式nested 例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}编译出来的风格：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }2.展开输出方式expanded
例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}3.紧凑输出方式 compact
例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }4.压缩输出方式compressed
例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;
text-decoration:none}声明变量用“$”开头， $width:300px; "$":变量声明符 width: 变量名称 300px 变量值 全局变量与局部变量 在选择器、函数、混合宏...的外面定义的变量为全局变量 例如： .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 } 编译后： //CSS .block { color: orange; } em a { color: red; } span { color: orange; }
$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。 什么时候声明变量？ 1.该值至少重复出现了两次； 2.该值至少可能会被更新一次； 3.该值所有的表现都与变量有关（非巧合）。 Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套 例如：在css 会这样写
nav a {
color:red;
}
header nav a {
color:green;
}
在sass中
nav {
a {
color: red;
header & {
color:green;
}嵌套-属性嵌套 Sass中提供属性嵌套，css有一些属性前缀相同。 例如用到的样式：
.box{
border-top:1px solid red;
border-bottom:1px solid green;
}在Sass中我们可以这样写：
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}