SCSS使用技巧-初级

🍎 插值语法#{ }

$变量

• scss

$name: button;
$new-border: border-radius; // 圆角
// 插值表达式
div > #{ $name } {
	#{ $new-border }: 10px;
}

• scc

div > button {
  border-radius: 10px;
}

🍎🍎嵌套规则

（嵌套选择器）

• scss

.container ul {
	border: 1px solid #aaa;
	list-style: none;

	li {
		float: left;
	}

	li > a {
		display: inline-block;
		padding: 6px 12px;
	}
}
.container ul:after {
	display: block;
	content: "";
	clear: both;
}

• css

.container ul {
  border: 1px solid #aaa;
  list-style: none;
}

.container ul li {
  float: left;
}

.container ul li > a {
  display: inline-block;
  padding: 6px 12px;
}

.container ul:after {
  display: block;
  content: "";
  clear: both;
}

🍎🍎🍌（嵌套中的父级选择器&）

• scss

.container ul {
	&:after {
		display: block;
		content: "";
		clear: both;
	}
}

• css

.container ul:after {
  display: block;
  content: "";
  clear: both;
}

🍎🍎🍌🍌（嵌套组合选择器）（🚀推荐使用这种嵌套）

1. 在嵌套规则中可以写任何css代码
2. 包括群组选择器（,）
3. 子代选择器（>）
4. 同层相邻组合选择器（+）
5. 同层全体组合选择器（~）等等

• scss

.container ul {
	border: 1px solid #aaa;
	list-style: none;

	li {
		float: left;

		> a {
			display: inline-block;
			padding: 6px 12px;
		}
	}

	&:after {
		display: block;
		content: "";
		clear: both;
	}
}

• css

.container ul {
  border: 1px solid #aaa;
  list-style: none;
}

.container ul li {
  float: left;
}

.container ul li > a {
  display: inline-block;
  padding: 6px 12px;
}

.container ul:after {
  display: block;
  content: "";
  clear: both;
}

🍎🍎🍌🍌🍌 写在外层选择器右边时要特别注意，他会作用于所有嵌套的选择器上，尽量不要采用这类写法

li >{
    a {
        display:inline-block;
        padding:6px 12px;
    }
}

li > a {
  display: inline-block;
  padding: 6px 12px;
}

🍎🍎🍌🍌🍌🍌 (嵌套属性) (适合属性有上下左右的)

• scss

li {
	border: 1px solid #aaa {
		left: 0;
		right: 0;
	}
	margin: {
		top: 0;
		right: 1px;
		bottom: 2px;
		left: 0px;
	}
}

• css

li {
  border: 1px solid #aaa;
  border-left: 0;
  border-right: 0;
  margin-top: 0;
  margin-right: 1px;
  margin-bottom: 2px;
  margin-left: 0px;
}

🍎🍎🍎 导入SCSS文件 （css提供了@import命令）

1. 导入变量的优先级问题-变量默认值
2. 后导入的会覆盖前边的 变量

• scss

$border-color:#aaa; //声明变量
@import './基础.scss';  //引入另一个SCSS文件
.container {
    border:1px solid $border-color; //使用变量
}

• css

p {
  margin: 0px;
}

.container {
  border: 1px solid #aaa;
}

🍎🍎🍎🍌 有时候我们希望引入的某些样式不更改原有的样式，这时我们可以在引入的css使用变量默认值。

1. 指令（!default只能使用于变量中）

• scss

// 这是 基础.scss 的文件
$border-color: #f0f !default; //声明变量

// 这是 初级.scss 的文件
$border-color:#ff000f; //声明变量
@import './基础.scss';  //引入另一个SCSS文件
.container {
    border:1px solid $border-color; //使用变量
}

• css

p {
  margin: 0px;
}

.container {
  border: 1px solid #ff000f;
}

🍎🍎🍎🍌🍌 嵌套导入

• scss

$border-color: #ff000f; //声明变量
.container {
	@import "./基础.scss"; //引入另一个SCSS文件 (局部导入)
	border: 1px solid $border-color; //使用变量
}

• css

.container {
  border: 1px solid #ff000f;
}

.container p {
  margin: 0px;
}