SASS的认识

一.sass/scss的认识

今天我们来认识一个CSS的预处理器-------sass/scss，它可以让我们把css当成js来写，可以有变量，字符串，嵌套，函数，引入，扩展，循环，计算等等逻辑处理，让样式的编程不可那么的单一化，也可以减少 CSS 重复的代码，节省开发时间。

二.变量

变量可以存储以下信息：

• 字符串
• 数字
• 颜色值
• 布尔值
• 列表
• null 值

 通过变量的形式 我们可以通过修改一个变量来达到全局的效果 ，而不是复用的要是修改都要全部修改，我们可以定义一下项目默认字体大小，基本颜色，边框 等待常用配置， 变量支持块级作用域，有全局变量跟局部变量，而定义变量我们用是$,跟PHP定义变量一样，而不是前端的var,let;

	$myColor: #f50; //全局变量
	div {
		$_selfColor : #fd0 !global; //局部变量 要想变成全局变量 需要添加 !global，这样就可以在其他地方拿到
		color: $myColor;
		span {
			color: $_selfColor;
		}
	}
	.name{
		color: $_selfColor;
	}
================================================
编译后就是
div {
  color: #f50;
}
div span {
  color: #fd0;
}

.name {
  color: #fd0;
}

三. 嵌套规则

sass可以让我们类似于html嵌套那样的一层一层的嵌套下去,避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理,而有时候我们需要用到父级元素，这里我们可以用&代替，可以让我们省下很多重复性东西，而且嵌套也遵守选择器的方法 比如子级选择器，序选择器，id选择器等等

$myColor: #f50; //全局变量
	div {
		$_selfColor : #fd0 !global; //局部变量 要想变成全局变量 需要添加 !global，这样就可以在其他地方拿到
		color: $myColor;
		// div下面的所有
		span {
			color: $_selfColor;
		}
		// div的第一级a
		>a{
			font-size: 12px;
		}
		p{
			font-weight: bold;
		}
		// & 代表嵌套规则外层的父选择器。z这里只的是div 当前作用域的元素
		&:hover{
			color: #F0AD4E;
		}
	}
================================================
编译后就是
div {
  color: #f50;
}
div span {
  color: #fd0;
}
div > a {
  font-size: 12px;
}
div p {
  font-weight: bold;
}
div:hover {
  color: #F0AD4E;
}

还有一个属性嵌套的规则，把通过属性的通过键值对的形式显示出来

/* 属性嵌套 */
		div{
			font :{
				size: 12px;
				weight : bold;
				
			}
		}
===================================
编译后 
div {
  font-size: 12px;
  font-weight: bold;
}

还有一个 @import嵌套  和 命名嵌套，

//命名嵌套
.name{
		color: #f00;
		&-name{
			font-size: 12px;
		}
	}
=========================
.name {
  color: #f00;
}
.name-name {
  font-size: 12px;
}


//@import嵌套
//index.scss'内容
	.name-title{
		color: #f00;
	}
	//在其他文件引入
	.name{
		@import '../index.scss';
	}
	===========
	.name{
		.name-title{
			color: #f00;
		}
	}

四.运算

sass也支持跟编程一样的加减乘除运算，它除了数字的运算，还可以颜色值的计算，字符串的计算，布尔值的计算，数组的计算 ，其运算规则跟JS的计算规格差不多,更多的可以去官网查看

div {
		font-size: (10px + 10px); //数字计算
		color: (#f40500 + #040506); //颜色值计算
		content: "Foo "+ 'Bar'; //字符串计算

	}
==================
div {
  font-size: 20px;
    color: #f80a06;
  content: "Foo Bar";
}

 五.函数

sass也可以像编程一样定义函数，在需要的地方引入 ，规则也是差不多，也有参数传递，通过 @function 定义，function名字调用；函数里面也可以做逻辑运算，但要通过 @return 返回计算结果; 参数的话要通过变量的形式传入，比如 参数名字是n 那要写成$n 而不是n;

@function grid-width($n) {
	  @return $n + 19px
	}
	div {
		width: grid-width(5);

	}
=============================
div {
  width: 24px;
}

它也支持 使用关键词参数

//定义函数
	@function grid-width($n) {
	  @return $n + 19px
	}
	div {
		width: grid-width($n : 10);  //关键词参数
	}
==========================
div {
  width: 29px;
}

六.混合指令 @mixin

mixin跟函数差不多，也是定义引用，也支持关键词参数;不过跟函数不一样的,他是通过 @include 来引入的，而且内容可以多层嵌套

@mixin test($color:blue) {
		background: $color;
		span{
			color: #f00;
		}
	}
	div{
		@include test(#ff0040);
	}
==========================
div {
  background: #ff0040;
}
div span {
  color: #f00;
}

而且sass的mixin还可以用类似于vue组件那种插槽solt来进行占位，通过 @content来占位

@mixin test {
		div{
			@content;
		}
	}

	@include test {
		span {
			color: blue;
		}
	}
========================
div span {
  color: blue;
}

七.@extend

@extend扩展，有点类似于编程的class的extend，它可以让我们复制一个相同样式，而不用重复的写相同的代码，也不用写一堆的类名，也可以引入多个 ，用逗号隔开  这个跟我们在html写多个类名的效果差不多

.fz30{
		font-size: 30px;
	}
	
	.btn{
		border-radius: 10px;
		padding: 10px 20px;
		border: none;
		box-sizing: border-box;
	}
	.btn-success{
		@extend  .btn,.fz30;
		color: green;
		background: transparent;
		border: 1px solid currentcolor;
	}
===================================
.fz30, .btn-success {
  font-size: 30px;
}

.btn, .btn-success {
  border-radius: 10px;
  padding: 10px 20px;
  border: none;
  box-sizing: border-box;
}

.btn-success {
  color: green;
  background: transparent;
  border: 1px solid currentcolor;
}

八.控制指令---@if,@for,@each

sass也可以像编程那样进行条件判断，数据循环这类操作，

一.@if条件判断，满足对应的条件执行对应的代码，其他的代码样式忽略

$type : ocean;
	.btn {
		@if $type==ocean {
			color: blue;
		}

		@else if $type==matador {
			color: red;
		}

		@else if $type==monster {
			color: green;
		}

		@else {
			color: black;
		}

	}
=====================
.btn {
  color: blue;
}

二.@for​​​​​​​ 循环 有时候我们有一个列表的图表 或者精灵图 要写很多类似的样式  通过循环我们可以省下很多代码，

循环有两种写法，一个是  @for $var from <start> through <end> 这个包含开始和结束长度 一个是 @for $var from <start> to <end>，只包含开头，不包含结束长度

//包含一 不包含 3
	@for $i from 1 to 3 {
		.name_#{$i}{
			width: 2em * $i;
		}
	}
==========================	
.name_1 {
  width: 2em;
}

.name_2 {
  width: 4em;
}


==========================	
//包含一 也包含 3
	@for $j from 1 through 3 {
		.names_#{$j}{
			width: 2em * $j;
		}
	}
============================
.names_1 {
  width: 2em;
}

.names_2 {
  width: 4em;
}

.names_3 {
  width: 6em;
}

 三. @each有点类似JS的for..in..,写法为$var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表

//类别字符串
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

===================================
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

======================================
列表为数组
@each $animal in [a,b,c,d] {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
========================
.a-icon {
  background-image: url("/images/a.png");
}

.b-icon {
  background-image: url("/images/b.png");
}

.c-icon {
  background-image: url("/images/c.png");
}

.d-icon {
  background-image: url("/images/d.png");
}

 九,sass封装的函数

这里就不介绍，可以去菜鸟教程-SASS进行查看，有一下对字符串，数组，数字，颜色的处理的函数