SCSS之语法

版权声明：红豆 https://blog.csdn.net/sinat_32605321/article/details/85603644

SCSS

使用css语法(普通写法、加浏览器兼容前缀、filter)

sass-convert style.scss style.sass
使用大括号和分号

变量

1 声明

以‘$’来声明变量

$highlight-color:#333;
$plain-font: "Myriad Pro"

2 作用域

定义在css规则块之外是全局变量
定义在{…}块中是局部变量不可全局引用

3 引用

$nav-color:#333; **全局变量**
$nav-border: 1px solid $nav-color; **粒度分区**
nav{
	$width: 100px; **局部变量**
	width: $width;
	color: $nav-color;
	border: $nav-border;
}

4 命名规则

• '-‘与‘_’相互兼容，推荐使用’-'因为compass普遍使用中划线

嵌套规则

css样式

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

scss

#content{
	article:{
		h1{color:#333}
		p{margin-bottom:1.4rem}
	}
	aside{background-color:#EEE}
}

1 父选择器标示符&

主要用户伪类选择器如：hover before after…
也用于通过js修改类名显示同步样式时的交叉选择器判定

eg:1

	article a{
		color: #333;
		&:hover{
		color: blue;
		}
	}
	
eg:2

	nav div{
		color: #333;
		background-color: #fff;
		&.active{
			color: #fff;
			background-color: blue;
		}
	}

2 嵌套选择器

嵌套选择器使用最多的是群组选择器以及所有样式都属于同一个父选择器

css样式

.container h1, .container h2, .container h3 { margin-bottom: .8em }

scss样式

.container{
	h1, h2, h3{
		margin-bottom: .8em;
	}
}

3 组合选择器

我一般不怎么用这几个选择器，看了scss感觉非常省事，以后会尝试着用
css

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

scss

article {
	~article { border-top: 1px solid #ccc }
	> section { background: #eee }
	dl > {
		dt { color: #333 }
		dd { color: #555 }
	}
	nav + & { margin-top: 0 }
}

4嵌套属性

把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个 { } 块，把子属性部分写在这个 { } 块中
这个不长使用，通常遇到这种情况会选择mixin

eg:
	nav {
		border: {
			style: 'solid';
			width: '1px';
			color: #333;
		}
	}

导入SASS文件

使用@import 导入sass文件
以_开头的sass文件是局部文件

1 默认变量值

反复声明同一个变量，最后一个声明才是有效声明
!default 关键字，来表明这是默认值

$fancybox-width: 400px !default;
	.fancybox {
	width: $fancybox-width;
	}

2 嵌套导入

这种方式可以用来做ie低版本兼容

_ieStyle.scss

.pay_shade{
	 -pie-background: rgba(0,0,0,.7);
    behavior: url(css/PIE.htc);
}

index.scss

body.ie{
	@import "ieStyle.scss";
}

静默注释

使用**//**注释的内容不会出现在生成的css文件中

混合器 mixin

使用 @mixin 定义 使用**@include**使用

1 什么样的属性适合组合为混合器

• 你能否为这个混合器想出一个好的名字

2 给混合器传参

可以通过传递不同的参数生成不同的样式

@mixin link-colors($normal, $hover, $visited) {
	  color: $normal;
	  &:hover { color: $hover; }
	  &:visited { color: $visited; }
}

使用选择器继承来精简CSS

使用 @extend 选择器 来继承css样式

SASS

使用缩进语法

sass-convert style.sass style.scss
不使用大括号和分号