scss基础知识学习笔记
1. 使用变量
1.1、声明变量与使用变量
变量名以$开头,名字自定义。
$font-size: 14px;
$border: 1px solid violet;
使用方法
$font-size: 14px; /* 声明变量 */
.violet {
font-size: $font-size; /* 使用变量 */
$width: 15px; /* 声明变量 */
width: $width; /* 使用变量 */
}
1.2、变量名使用中划线和下划线是一样的
$color: violet;
div {
color: $color;
$font-size: 50px; /* 以中划线声明 */
font-size: $font_size; /* 取值时用下划线也可以访问 */
}
2、嵌套css规则
div {
color: violet;
$font-size: 50px;
font-size: $font_size;
span { /* 子元素的css嵌套在父元素中 */
color: pink;
}
}
2.1、父选择器的标识符&
.inner {
color: violet;
$font-size: 50px;
font-size: $font_size;
span {
color: pink;
}
&:hover { /* 表示父元素hover时的样式,不会传递到子元素 */
color: red;
}
.outer & { /* 可以在父选择器上再加上父选择器 */
border: 1px solid violet;
}
}
2.2、群组选择器的嵌套
/**
* css写法
* .container h1, .container h2, .container h3 { margin-bottom: .8em }
* 以下为scss写法
*/
.container {
h1, h2, h3 {margin-bottom: .8em}
}
/**
* css写法
* nav a, aside a {color: blue}
* 以下为scss写法
*/
nav, aside {
a {color: blue}
}
2.3、子组合选择器和同层组合选择器:>、+和~
.inner {
color: violet;
$font-size: 50px;
font-size: $font_size;
> span { /* 选中直接子元素中的span元素 */
color: pink;
}
+ .next { /* 同级元素中紧挨着的下一个.next元素 */
color: skyblue;
}
~ label { /* 选中同级元素中所有的label元素 */
font-size: 40px;
}
}
2.3、嵌套css属性
.outer & {
/**
* css写法,以下为scss嵌套属性写法
* border-width: 2px;
* border-style: dashed;
* border-color: violet;
*/
border: {
width: 2px;
style: dashed;
color: violet;
}
border: 1px solid red {
left: 0;
right: 0;
}
}
3.导入sass文件
使用@import来导入scss文件,可以省略文件后缀.scss或.sass,被导入的文件中所有的变量,函数,mixin等都可以直接使用。
3.1、使用sass部分文件
通过@import导入的文件并不会生成独立的css文件,这些文件被称为局部文件。
如图所示,.scss文件编译后会生成对应的.css文件和其他的一些文件,编译时被导入的文件并没有生成相应的.css文件。
对局部文件有一些特殊约定,即用文件名以下划线开头,如:_other.scss,而导入这个.scss文件时可以省略下划线,如下图:
3.2、默认变量值
/* 给变量赋予默认值,如果其他地方对这个变量声明赋值red,就采取那个值red,否者就使用默认值violet */
$leona-color: violet !default;
3.3、嵌套导入
sass允许@import命令直接写在css规则内,生成.css文件时,局部文件会直接嵌套到它导入的地方
/* 在css规则内导入.sass文件,局部文件中的样式会嵌套在导入的地方,局部文件中的变量和混合器也只会在该范围内生效 */
.annie {
@import 'annie';
}
3.4、原生css导入
sass兼容原生的css,所以它也支持原生的css@import。
在下列的三种情况下会发生原生的css@import,这回造成浏览器解析css的额外下载:
* 被导入文件的名字以.css结尾;
* 被导入文件的名字是一个URL地址(比如http://www.sass.hk/css/css.css),由此可用谷歌字体API提供的相应服务;
* 被导入文件的名字是CSS的url()值
4、静默注释
sass中有两种注释方式:
.leona {
border: $leona-border; // border 这种注释在生成的.css文件中不会显示,即静默注释
color: $leona-color; /* font color 这种注释会在生成的.css文件中显示 */
}
// 生成的.css文件中可以看到注释
.leona {
border: 1px solid violet;
color: pink;
/* font color */ }
5、混合器
混合器使用@mixin标识符来定义,用来给一大段代码赋予一个名字。这样就可以通过引用这个名字来实现代码重用。
// 使用@mixin为一段代码赋予名字
@mixin border-round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.leona {
border: $leona-border; // border
color: $leona-color; /* font color */
@include border-round; // 使用@include 来引用,@mixin中定义的代码就会嵌入这里
}
混合器使用过量会导致生成的样式表过大,代码加载缓慢。
5.1、何时使用混合器
当你能为混合器起一个合适的名字的时候那么就应该使用混合器,如:
// 混合器就是用来描述文本样式的,可以起一个直观的名字
@mixin text-style {
color: violet;
font-size: 16px;
line-height: 32px;
font-style: normal;
font-weight: bold;
}
.ahri {
@include text-style;
}
5.2、给混合器传参
混合器并不总是生成相同的样式,通过给混合器传参数来生成更加精确的样式。语法规则类似javascript的function
// 定义混合器时制定需要哪些参数
@mixin text-style($color,$font-size,$line-height,$font-weight) {
color: $color;
font-size: $font-size;
line-height: $line-height;
font-style: normal;
font-weight: $font-weight;
}
.ahri {
@include text-style(violet,20px,40px,normal); // 调用混合器时传入参数
}
5.3、默认参数值
使用混合器时有时也不需要传入所有的参数,可以给参数制定默认值。
// 定义混合器时给所有的参数都指定了默认值
@mixin border-style($width: 2px,$color: violet,$style: dashed) {
border: $width $style $color;
}
.annie {
@include border-style; // 无参调用,全部使用默认值
@include border-style(5px); // 只有width使用自定义值
@include border-style(5px,red); // 只有style使用默认值
@include border-style(5px,red,solid); // 全部使用自定义值
}
6、使用选择器继承来精简css
使用sass的时候,最后一个减少重复的主要特性就是选择器继承。
// 定义选择器样式
.border-style {
border-width: 2px;
border-style: dashed;
border-color: red;
}
.annie {
@extend .border-style; // 继承选择器样式
}
6.1、继承的高级用法
任何css规则都可以继承其它规则,几乎任何css规则都可以被继承。所以你可以继承一个html元素的样式。
默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承。
我特么照着例子写怎么都报错???html元素继承还需要定义??
6.2、继承的工作细节
- 跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度,请牢记这一点。
- 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时,并且这两个不同的css规则对同一属性的修饰存在不同的值,css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。