sass basic

sasas basics

##预处理
- 在控制台使用命令编译
- 新建一个scss文件，
- sass src/input.scss dist/output.css，

- 还可以使用监听文件或文件夹的变化自动进行编译
- sass --watch src/input.scss dist/output.css
- 文件夹的变化，里面的文件发现变化，就会自动编译
- sass --watch src:dist

##变量
- 变量使用$开头进行，
- $font-size:10px;样式那边会自动识别之前定义好的变量
body{
font-size:$font-size;
}

##嵌套
语法：
nav{
width:100px;
ul{
list-style:none;
li{
float:left；
}
}
}
编译之后的结果是
nav{
width:100px;
}
nav ul{
list-style:none;
}
nav ul li{
float:left;
}

## 分部
定义多个不同部分的scss文件。之后使用@import进行导入

## 导入Import
假设有abc.scss,a.scss两个不同的scss文件
想要在a.scss文件里面导入abc.scss的样式代码，可以这样：
@import ‘abc’，
//引入的时候，不需要写文件的.scss后缀名了，编译器会自动帮我识别
下面写的是原来自己的代码
body{
font-size:100px;
}

##混合Mixins
@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-o-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
.box{
@include border-radius(10px);
}

创建@mixin后面的名字可以随便自定义的，
我们也可以传递一个参数$radius，
在引用的时候使用@include 自己定义的名字（值）
编译之后的结果如下：
div{-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

## 扩展和继承Extend/Inheritance
%message-shared{
border:1px solid #ccc;
}
.message{
@extend %message-shared;
width:100px;
}

//%百分号是一个占位符，默认情况是不会被编译出来的，只有被引用了，才会被调用
调用的时候需要使用@extend 加上前面写的样式，也可以不使用%定义的样式，即普通的样式类
也是可以的

## 操作符
可以现在sass -i开发sass的结果提示命令

.abc{
width:300px/960px*100%; //划分为接近三个之一的宽度
}