Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。
CSS预处理语言有Scss(Sass) 和Less、Postcss。
Scss和Sass
sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
区别：
- 后缀名不同 .sass和.scss
- 语法不同，请看下面
新版：
/*新版本
多行文本注释*/
//新版本
//单行文本注释
@import "base";
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}
老版本：
/*新版本
多行文本注释
//新版本
单行文本注释
@import "base"
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none
变量
变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便
变量的使用
可以通过$来定义变量，在变量名字中可以使用-和来作为连接，并且-和是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如
$primary-color:#ff6600;
$primary-border:1px solid $primary_color;
div.box{
background:$primary-color;
}
h1.page-header{
border:$primary-border;
}
css写法---》
div.box {
background: #ff6600;
}
h1.page-header {
border: 1px solid #ff6600;
}
嵌套的使用
合理的使用嵌套语法，可以使我们编写代码更为快捷
假设我们想写这样的css：
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
在sass里我们可以这样写
.nav{
height:100px;
ul{
margin:0;
li {
float:left;
list-style:none;
padding:5px;
}
}
}
大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写
.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}
在里面就会出现这样的情况
.nav a :hover {
color: #ff6600;
}
我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类
例如：
.nav{
height:100px;
a{
color:#fff;
&:hover{
color:#ff6600;
}
}
}
这样就好了，下面来个完整的代码：
.nav{
height:100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
a{
display:block;
color:#000;
&:hover{
color:#f60;
background:red;
}
}
}
& &-text{
font-size:15px;
}
}
css写法-----》
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}
.nav ul a:hover {
color: #f60;
background: red;
}
.nav .nav-text {
font-size: 15px;
}
嵌套属性
我们可以把一些复合属性的子属性来嵌套编写，加快编写速度，例如
body{
font:{
family:Helvitica;
size:15px;
weight:bold;
}
}
.nav{
border:1px solid red{
left:none;
right:none;
}
}
.page-next{
transition:{
property:all;
delay:2s;
}
}
css写法-----》
body {
font-family: Helvitica;
font-size: 15px;
font-weight: bold;
}
.nav {
border: 1px solid red;
border-left: none;
border-right: none;
}
.page-next {
transition-property: all;
transition-delay: 2s;
}
mixin 混合
你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字，类似于js里的函数定义方法如下
@mixin 名字(参数1，参数2...){
...
}
使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：
@mixin alert {
color:#f60;
background-color:#f60;
a{
color:pink;
}
&-a{
color:red;
}
}
.alert-warning{
@include alert;
}
css写法-----》
.alert-warning {
color: #f60;
background-color: #f60;
}
.alert-warning a {
color: pink;
}
.alert-warning-a {
color: red;
}
刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：
- 形参的名字前要加$
- 传参的时候只写值的话要按顺序传
- 传参的时候不想按顺序的话需要加上形参名字
例如：
@mixin alert($color,$background) {
color:$color;
background-color:$background;
a{
color:darken($color,10%);//把颜色加深百分之十
}
}
.alert-warning{
@include alert(red,blue);
}
.alert-info{
@include alert($background:red,$color:blue);
}
css写法------》
.alert-warning {
color: red;
background-color: blue;
}
.alert-warning a {
color: #cc0000;
}
.alert-info {
color: blue;
background-color: red;
}
.alert-info a {
color: #0000cc;
}
继承拓展 extend
如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承
大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}
css写法----》
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}
partials
在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。
在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译
- 需要注意的是 partials的文件名前要加_
_base.scss :
body{
margin:0;
padding:0;
}
style.scss :
@import "base";
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}
css写法----------->
body {
margin: 0;
padding: 0;
}
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}
这样的话我们就可以把模块化的思想引入到sass里了
comment注释
sass里的注释有三种
- 多行注释
- 单行注释
- 强制注释
多行注释：压缩后不会出现在css里 /* */
单行注释: 不会出现在css里 //
强制注释：压缩后也会出现在css里 /*! */
sass的基础使用方法就介绍到这里，文章持续更新，后续更新sass高阶用法，关注公众号第一时间阅读。
我是monkeysoft，你的【三连】就是monkeysoft创作的最大动力，如果本文有任何错误和建议，欢迎大家留言！
文章持续更新，可以微信搜索 【小猴子的web成长之路】关注公众号第一时间阅读,关注之后后台回复知识体系，更可领取小编精心准备的前端知识体系，未来学习不再迷茫,更可加入技术群交流讨论。