scss常见用法随笔

1. 变量(声明变量， 使用变量)

变量以美元符号开头，赋值方法与 CSS 属性的写法

$width:100px;

直接使用即调用变量

.box{
	width:$width;
}

编译后：

.box{
	width:100px;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），
不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。
将局部变量转换为全局变量可以添加 !global 声明

.box1{
  $width: 5px !global; /*将局部变量转换为全局变量可以添加!global声明*/
  width: $width;
}
.box2 {
  width: $width;
}

编译后：

box1 {
  width: 5px;
}
.box2 {
  width: 5px;
}

2. 嵌套规则

1. 将一套样式嵌入另一套样式中，外层的选择器是里层样式是父选择器

嵌套普通标签：
.box {
	width:100px;
	p{
		font-size:20px;
	}
	img{
		width:60px;
		height:60px;
	}
}

编译后：

.box {
	width:100px;
}
.box p{
	font-size:20px;
}
.box img{
	width:60px;
	height:60px;
}

嵌套功能避免了重复输入父选择器

2. 父选择器 & 用法：

当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器

嵌套伪类
.box {
  width:100px;
  a {
    font-weight: bold;
    &:hover { 
    	color: #999; 
    }
  }
}

编译后：

.box {
  	width:100px; 
 }
 .box a {
    font-weight: bold; 
 }
 .box a:hover {
    color: #999; 
 }

使用“&”引用父级：

3. & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

.box {
  width:100px; 
  &-bgborder { 
  	border: 1px solid; 
  }
}

编译后：

.box{
	width:100px;
}
.box-bgborder{
	border: 1px solid; 
}

4. 属性嵌套

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

编译后:

.box{
	border:1px solid #ccc;
}

5. 占位符选择器 %

Sass 额外提供了一种特殊类型的选择器：占位符选择器。
与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。
必须通过 @extend 指令调用

%boxCommon {
	background: #fff;
	margin-bottom: 20px;
}
.box{
	@extend %boxCommon;
}

多行注释 /* */，以及单行注释 //，
前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

3. 混合：@mixin 和 @include

写法：
@mixin 名称 {
...
};
.box{
	@include 名称;
}

混合指令也可以使用给变量赋值的方法给参数设定默认值
当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值
@mixin display-flex($content:center,$item:center,$direction:row) {
	display: flex;
	justify-content: $content;
	align-items: $item;
	flex-direction: $direction
};
.box{
	@include display-flex;
	/*或者传值写法*/
	/* @include display-flex(space-between, flex-start) */
}

不能确定混合指令需要使用多少个参数
可以使用参数变量 … 声明（写在参数的最后方）
将这些参数视为值列表处理
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器

@mixin box {
  a {
    color: blue;
    background-color: red;
  }
}
@include box;

编译后：

a {
  color: blue;
  background-color: red;
}

混合样式中也可以包含其他混合样式

@mixin cccbackground { 
	background-color: #ccc; 
}
@mixin fontsize20 { 
	font-size: 20px; 
}
@mixin bgfont{
  @include cccbackground ;
  @include fontsize20 ;
}

4. 继承扩展：@extend

@extend 会继承指定元素的所有样式，包括子元素的所有样式

一般用于一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式

.box{
  	width:100px;
  	height:100px;
  	font-size:20px;
}
.btnbox{
 	@extend .box;
 	border: 1px solid red;
}

5. 导入样式：@import

将多个文件中的样式导入到一个文件，文件需要以下划线“_”开头，
如"_color.scss"，以'_'开头的文件不会编译生产对应的css文件

/* _color.scss 文件内容 */
.color-blue{
  color: blue;
};

/* style.scss 文件内容 */
@import 'color';

编译后：（不生成对应的_color.css）

/* style.css 文件 */
.color-blue {
  color: blue; 
}

6. 基础运算

(1)加：+

//编译前
.box{
  width: 10px+10;
}

//编译后
.box {
  width: 20px; 
}

(2)减：-

//编译前
.box{
  width: 10px-5;
}

//编译后
.box {
  width: 5px; 
}

(3)乘：*

//编译前
.box{
  //乘法计算的时候单位只能有一个, 10px*1px报错
  width: 10px*1;
}

//编译后
.box{
  width: 10px;
}

(4)除：/

//编译前
.box{
  //不正确:width: 10px/2  、  width: 10px/2px  、  width: (10px/2px)
  width: (10px/2);
}

//编译后
.box{
  width: 5px; 
}

7. 插值语句#{}

//编译前
$name:boxheight;
$height:10px;

.div-#{$name}{
  #{$name}: #{$height};
};

//编译后
.div-boxheight {
  height: 10px; 
}

8. 函数

语法：
@function 函数名（参数1,参数2）{
	...
}

/编译前
@function addWidth($width1,$width2){
  @return $width1+$width2;
}
.box {
  width:addWidth(10px,20px);
}
//编译后
.box {
  width: 30px; 
}