sass基础入门

关于sass

Sass的学名叫“CSS预处理器”，就是在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们以更少的代码实现同样的效果，而且代码的整洁度、可读性更强。而且Sass算是CSS的超集，它100%兼容CSS的语法，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。

使用方法

1. 安装sass
2. 编译Sass文件成CSS文件
3. 在项目中引用CSS文件的路径

安装方法
sass官网安装教程

常用基本语法

变量定义

$box-color: red;        //定义变量
ul{
   color: $box-color;      //引用
}
li{
   background-color: $box-color;       //引用
}

//编译后
ul {
 color: red;
}
li {
 background-color: red;
}

嵌套

选择器嵌套

div {
    span{
        color: #333;
    }
    p {
        margin-bottom: 10px;
    }
}

 /* 编译后 */
div span{ color: #333; }
div p { margin-bottom: 10px; }

属性的嵌套

div {
    border: {
      style: solid;
      width: 1px;
      color: #ccc;
    }
}

//编译后
div {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

混合器

无参混合器

@mixin round{
	border:1px solid #eee;
	border-radius:10px;
}
.notice{
	width:10px;
	height:10px;
	@include round;
}
//编译后
.notice{
	width:10px;
	height:10px;
	border:1px solid #eee;
	border-radius:10px;
	}

带参混合器

@mixin back-color($color){
	background-color:$color;
}
.notice{
	width:10px;
	height:10px;
	@include back-color(blue);
}
//编译后
.notice{
	width:10px;
	height:10px;
	background-color:blue;
	}

选择器样式继承

.class1 {
    border: 1px solid #333;
}
.class1 a {
    color: red;
}

.class2 {
    @extend .class1;
}

//编译后：
.class1, .class2 {
  border: 1px solid #333;
}

.class1 a, .class2 a {
  color: red;
}	
/** .class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式 **/

内置指令

@if，@each,@for等