SASS——CSS的编程式开发工具相关概念及操作命令
概念
css不是编程语言，css代码过于静态，sass的出现，使得css可以通过编程语言来实现样式的书写
功能
扩展了css3.0，增加了规则、变量、混合、判断、选择器、继承等特性，使得css代码编程化，且易于组织和维护
运行环境
sass是基于ruby平台运行的，gem是此平台的包管理工具
sass的安装（请确保ruby已安装）
cmd运行 gem install sass
sass的编译
ps：sass文件名的后缀是scss，sass文件可以编写css语法，并生成css文件
编译语法(sass文件转至css文件)：
sass 文件名(sass文件):文件名(css文件）
ps： css文件名存在为覆盖，不存在为创建
编译格式化命令（sass文件转至css文件并实现相关功能）:
sass --style 格式化命令 文件名（sass文件）:文件名（css文件）
格式化命令如下：
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。（去回车）
compressed：压缩后的css代码。（去回车去空格）
watch:监听模式（只要sass文件修改，与之定义的文件会自动修改，无需重运行）
编程语法
变量的定义:
普通变量 $变量名：值
特殊变量 #{变量名} ps：在属性名中的变量，与字符串模板中的${}含义相同
默认变量 $变量名:值 ! default ps:只要有相同变量出现，就会覆盖默认变量，无关代码执行顺序
计算：
$size:10px;
#box2 {
width: $size*10;
}
嵌套：
#box3 {
width: 100px;
height: 100px;
background: yellow;
color: #333;
a {
font-size: 14px;
&:hover {
text-decoration: underline;
}
}
}
函数
$size:100;
@function myStyle($px) {
@return $size*$px;
}
#box4 {
width: 100px;
height: myStyle(5px);
}
判断
$type: monster;
#box5 {
width: 100px;
height: 100px;
@if $type==ocean {
background: blue;
}
@else if $type==matador {
background: red;
}
@else if $type==monster {
background: green;
}
@else {
background: black;
}
}
循环
@for $i from 1 to 4 {
.item-#{$i} {
width: 2em*$i;
}
}
$i: 2;
@while $i>0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 1;
}
混合样式（预定义样式，提高代码的复用性）
$color:red;
@mixin myStyle($px) {
height: 100px;
background-color: $color;
font-size: $px;
}#box6 {
@include myStyle(36px);
width: 500px;
}