css-sass基础语法

变量

定义变量使用 $ 开头, 赋值与 css 逻辑一样

$fontsize : 10px;
$width : 100%;
$height : $width * 2; /* 可以直接进行运算 */

运算
$fontsize : 10px;
$path : "/path/img/";
.box{
	$font-size: $font-size * 2;
	width: 100%;
	height: 200px;
	background: url('#{$path}/1.png') no-repeat;
}
嵌套 与 &
选择器的嵌套, 表示层级关系, & 表示当前层级
$width : 100%;
ul{
	margin : 0 auto;
	display : block;
	width: $width;
	li{
		display: inline-block;
		width: $width / 4; /* $width = 100%, $width / 4 = 25% */
	}

	a{
		display: inline-block;
		color: #666;
		/* & 表示当前对象 */
		&:hover{
			color: #000;
		}
	}
}
mixin 混合
mixin 定义一段代码集合, 且可以选择传参, 可以理解为 javascript 中的 function
/*
	定义一个边框的 mixin
	设置了三个参数
*/
@mixin border($width,$style,$color){
	border : $width $style $color;
}

.box{
	/* 使用 border 这个 mixin */
	@include border(1px solid #000);
}


@mixin radius($radius: 15px){
	border-radius: $radius;
}

.box{
	/* 使用 radius 这个 mixin */
	@include radius;   /* 有默认值可以不用传入参数 */
	@include radius(); /* 与上同等 */
	
}
extend 扩展 / 组合 ／ 继承
extend 可以将其它选择器的属性继承过来, 使其自身元素也可以使用
.wrap{
	width: 900px;
	margin: 10px auto;
}

.box{
	@extend .wrap; /* 使用 extend 扩展自身元素属性, 扩展的对象时一个选择器 */
}
占位符 %
占位符与上面的 extend 一样，区别在于使用 % 声明的选择器编译时不会出现在 css 文件中
%wrap{
	width: 900px;
	margin: 10px auto;
}

.box{
	@extend %wrap; /* 使用 extend 扩展自身元素属性, 扩展的对象时一个选择器 */
}
if else
$width : 100px;
.box{
	@if $width == 100px {
		width : 200px;
	} @else {
		width : 300px;
	}
}
map 对象
使用 map 可以对一些逻辑相同, 但是内容又有些小差别的不同 定义 map 使用 () 符号, 里面的内容与 js 中的 json 格式一样
$hs: (h1: 14px, h2: 20px, h3: 32px);
@each $name, $size in $hs {
  #{$name} {
    font-size: $size;
  }
}
h1{
	font-size: 14px;
}
h2{
	font-size: 20px;
}
h3{
	font-size: 32px;
}
Array
$list: h1, h2, h3, h4, h5, h6;
@each $item in list {
  #{$item} {
    font-size : 100%;
  }
}
h1{
	font-size : 100%;
}
h2{
	font-size : 100%;
}
h3{
	font-size : 100%;
}