CSS基础语法：
属性名: 属性值;
属性名：值1 值2 ... 值N;
编写CSS的三种方式：
①inline style：样式写在某个HTML元素里(style属性)——比较少用
②inner style：样式写在HEAD里(style标签)——项目首页中常用
③outer style：样式写在独立的CSS文件里，页面文件引入(link标签)——二三级页面常用
作用范围： inline style < inner style < outer style
提示：
①外部样式作用范围大；但是会增加页面的请求次数，从而拖累页面性能。
②样式的优先级：!important > 行内样式 > 内部样式 = 外部样式 > 浏览器默认样式
③<style>和<link>标签用于声明样式时，必须放置到<head>内部，以防止页面重绘
一、CSS选择器(Selector)
用在内部或外部样式中，声明接下来的样式作用于哪个或哪些元素。基础语法：
选择器 {
属性名： 属性值;
}
CSS提供了如下几种选择器：
① 通用选择器： 选中页面中的所有元素
* { }
② 元素选择器： 选中某类特定的HTML元素
div { }
③ ID选择器： 选中某一个元素（为元素设定样式时推荐少用ID——ID常用于为元素绑定JS）
#item2 { }
④ 类选择器： 选中某一个或某几个元素
.danger { } <div class="danger success"></div>
⑤ 伪类选择器：“假的类”——类名是固定的，不能自定义，表示选中某个时刻/状态
:link{ } 选中“超链接未被访问过”的状态
:hover{ } 选中“超链接/普通元素鼠标悬停于上方”的状态
:active{ } 选中“超链接/按钮等元素被激活”的状态
:visited{ } 选中“超链接被访问过后”的状态
:focus { } 选中“获得了输入焦点的输入框”
提示：如果希望看到超链接四个状态的改变，必须按顺序指定样式 ①link ④visited ②hover ③active
⑥ 属性选择器：
[readonly] { }
[name="upwd"] { }
==========================================================
⑦ 并列选择器： 选中可以同时被多个选择器选中的元素——多个选择器间不能有空格
选择器1选择器2{ }
span.danger { }
.btn.success { }
img:hover { }
⑧ 群组选择器： 一次使用多个选择器（用英文逗号分开）选中多个元素
h1, h6, p, ul { }
⑨ 后代选择器： 选中某个元素内的儿子、孙子、重孙子...元素
div span { }
⑩ 子代选择器： 选中元素下面的直接儿子元素
div > span { }
11)兄弟选择器：选中元素后面的兄弟元素——不要前面的兄弟，也不选子代
p ~ span { }
12)相邻兄弟选择器：选中元素后面紧跟着的相邻兄弟元素
p + span { }
二、CSS中的颜色表示法
小结：目前哪些CSS属性需要用到颜色： color、background、border-color、outline-color....
| 颜色值 | 单词表示法 | RGB表示法(24位色) | RGBA表示法(32位色) | 十六进制表示法 | 十六进制缩写 |
| 红色 | red | rgb(255, 0, 0) | rgba(255, 0, 0, 1) | #FF0000 | #F00 |
| 绿色 | green | rgb(0, 255, 0) | rgba(0, 255, 0, 1) | #00FF00 | #0F0 |
| 蓝色 | blue | rgb(0, 0, 255) | rgba(0, 0, 255, 1) | #0000FF | #00F |
| 青色 | cyan | rgb(0, 255, 255) | rgba(0, 255, 255, 1) | #00FFFF | #0FF |
| 品红 | magenta | rgb(255, 0, 255) | rgba(255, 0, 255, 1) | #FF00FF | #F0F |
| 黄色 | yellow | rgb(255, 255, 0) | rgba(255, 255, 0, 1) | #FFFF00 | #FF0 |
| 白色 | white | rgb(255, 255, 255) | rgba(255, 255, 255, 1) | #FFFFFF | #FFF |
| 黑色 | black | rgb(0, 0, 0) | rgba(0, 0, 0, 1) | #000000 | #000 |
| 中灰 | gray | rgb(128, 128, 128) | rgba(128, 128, 128, 1) | #808080 | —— |
存储红色：用计算机中的8个bit位，1个bit可以存储一个0或1，存储范围就是0~255
存储绿色：用计算机中的8个bit位，1个bit可以存储一个0或1，存储范围就是0~255
存储蓝色：用计算机中的8个bit位，1个bit可以存储一个0或1，存储范围就是0~255
存储不透明度（alpha）：用计算机中的8个bit位，1个bit可以存储一个0或1，存储范围就是0~255——255表示完全不透明，0表示完全透明
三、CSS中的尺寸表示法
小结：目前哪些CSS属性需要用到大小尺寸： border-width、width、font-size ....
前端开发中可用的大小尺寸：
① in / cm / mm / pt —— 可以使用，但是很少使用
② px —— 像素(Pixel)，指的屏幕中一个最小的发光单元
③ % —— 百分比，指占父元素的尺寸占比
④ em / rem —— 倍率/根倍率，1em指一倍的当前字体大小，1rem指一倍的根元素(即html)字体大小
⑤ vw / vh —— 视口宽度占比/高度占比，App开发中用得着
补充：几个常用的CSS属性
①overflow：溢出（一个元素中的内容从宽高中溢出）
可取值： visible(默认) / hidden / scroll / auto
②overflow-x：水平溢出（一个元素中的内容从宽高中溢出）
可取值： visible(默认) / hidden / scroll / auto
③overflow-y：竖直溢出（一个元素中的内容从宽高中溢出）
可取值： visible(默认) / hidden / scroll / auto
④vertical-align：行内块元素与同一行中的其它元素竖直对齐方式
可取值：baseline(默认) / top / middle / bottom
提示：两行中的行内块元素如果想在竖直方向上紧挨着，vertical-align可以取后三个值
一、CSS盒子模型（Box Model）
一个HTML元素，内容需要占用页面空间、内容与边框间距也可能需要占用布局空间、当前元素与其它元素间也可能需要留白——这些空间的总和称为“元素页面布局空间”。
一个元素水平方向上占用的总空间(内容盒子)：
margin-left(左外间距) + border-left(左边框) + padding-left(左内边距) + width(宽度) + padding-right(右内边距) + border-right(右边框) + margin-right(右外间距)
一个元素竖直方向上占用的总空间(内容盒子)：
margin-top(上外间距) + border-top(上边框) + padding-top(上内边距) + height(高度) + padding-bottom(下内边距) + border-bottom(下边框) + margin-bottom(下外间距)
一个元素水平方向上占用的总空间(边框盒子)：
margin-left(左外间距) + width(宽度) + margin-right(右外间距)
一个元素竖直方向上占用的总空间(边框盒子)：
margin-top(上外间距) + height(高度) + margin-bottom(下外间距)
推荐把所有HTML元素的盒子计算方案改为边框盒子：
*{
box-sizing: border-box;
}
二、页面元素的显示模式
一个HTML元素在可以中，可以有多种显示模式，例如：
①块级元素 —— display: block;
必须独占一行；
可以指定width和height;
四个方向的padding/margin都有效；
②行内元素 —— display: inline;
可以和其他内容共处一行；
不能指定width和height；
左右方向的padding/margin有效；上下方向的padding/margin无效；
③行内块元素 —— display: inline-block;
可以和其他内容共处一行；
可以指定width和height;
四个方向的padding/margin都有效；
一、盒子模型补充知识
① 边框的圆角问题
border-radius: 3px; /*边框圆切角半径*/
border-radius: 50%; /*边框圆切角半径*/
②边框的不同写法
border: 1px solid #f00;
border-top: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
border-left: 1px solid #f00;
border-width: 2px;
border-color: #0f0;
border-style: solid(单实线) | dashed(破折线) | double(双实线);
③ 表单输入元素（例如：输入框、按钮）在获得焦点后，边框外还有一圈“轮廓线”
outline: none; /*取消轮廓线*/
④ 有两种水平居中：
情形1：让一个块元素或行内块元素中的内容(一般是行内或行内块)水平居中：
text-align: center;
情形2：让一个块元素在父容器中水平居中
margin: 0 auto;
⑤ 了解：块级元素在竖直方向上相邻的margin会发生合并
二、背景颜色和背景图片
① 背景颜色
background-color: #fff;
提示：body默认背景颜色是透明色！一般都需要重新设定为白色或类似浅色。
② 背景图片
background-image: url(xx.jpg);
③ 背景图片的重复/平铺方式
background-repeat：repeat; /*X-Y轴都重复*/
background-repeat：repeat-x; /*仅在X周重复*/
background-repeat：repeat-y; /**/
background-repeat：no-repeat; /*背景图仅显示一次，不重复*/
④ 背景图片的位置
background-position: left top;
background-position: right bottom;
background-position: center center;
⑤ 背景图大小
background-size: 50% 80%;
background-size: 100% 100%;
⑥ 背景图追加方式
background-attachment: scroll; /*背景图随内容而滚动*/
background-attachment: fixed; /*背景图固定不动*/
一、浮动 —— 难点
目标1：两个50%宽的行内块不能共处一行 / 四个25%宽的行内块不能共处一行
目标2：实现两个元素发生叠落效果
float: left;
float: right;
浮动带来的布局效果：
①浮动元素不再占用页面的布局空间——后续元素自动补位，从而出现叠落现象
②元素只要脱离文档流，就自动变为“行内块元素”(可以指定宽和高)——不管之前是什么元素
③多个元素同时左浮动，在空中会依次排布，先浮动的在左边；
多个元素同时右浮动，在空中会依次排布，先浮动的在右边；
④如果一个父元素体内所有的子元素都浮动走了，该父元素会发生“高度坍塌”，
解决方案1：在父元素最后再添加一个空白子元素(必须是块元素)，例如：
<div class="clearfix"></div>
.clearfix{ clear: both; }
解决方案2：在父元素体内最后的位置生成一个新的空白元素，显示模式为块级，并清除浮动影响
.parent:after {
content: '';
display: block;
clear: both;
}
| CSS小技巧：内容生成 div:after{ /*伪元素选择器：选中div的内容之后的部分*/ 其它样式... } |
二、定位——重点&难点
CSS 中使用 position 属性来控制元素在页面中的位置，它的可取值：
① position: static; 默认值，元素是静态定位的。当前元素受限于文档流中，只能依次排布，不能随意改变自己的位置 —— top / right / bottom / left 四个属性无效的。
② position：relative; 相对定位。相对定位的元素会脱离文档流，但不会释放布局空间 —— 可以使用top / right / bottom / left 四个属性改变自己的位置。
相对定位元素的定位参照物是：自己静态定位时应该有的位置。
很多时候，使用相对定位的元素并不是为了改变其位置，而是为绝对定位的子元素提供定位参照物。
③ position：absolute; 绝对定位。绝对定位的元素会脱离文档流，且释放布局空间 —— 可以使用top / right / bottom / left 四个属性改变自己的位置。
绝对定位元素的定位参照物是：离自己最近的非静态定位的父元素，最终会找到body元素。
④元素定位的最后一种方法：固定定位
元素定位方法：
①float: left/right;
②position: static;
③position: relative;
④position: absolute;
⑤position: fixed; 固定定位的元素，固定于页面中的某个位置，不随内容滚动而滚动。可以使用 top / right / bottom / left 修改自己的位置，参照物是屏幕的四个边缘。
三、文本和字体
① 字体型号/家族
font-family: "黑体";
font-family: "启功体", "微软雅黑", "宋体"; /*如果系统里有字体1，就使用；否则使用后面的*/
提示：Windows系统字体文件默认放在C:/Windows/Fonts目录下(xx.ttf)
② 字体大小
font-size: 14px;
font-size: 1.5em;
提示：Chrome浏览器默认字体大小16px；一般门户常用字体大小12px/14px/16px
③ 字体重量
font-weight：normal; /*正常粗细*/
font-weight: bold; /*加粗*/
font-weight: thin; /*减细*/
④ 用户是否能够选中文本
user-select: none; /*不让用户选中任何文本*/
⑤ 文本水平对齐方式 —— 重要知识点&面试题
text-align: left;
text-align: center;
text-align: right;
提示：此属性对行内元素无效；如果行内块元素宽度与内容等宽，也无效——让块级元素或行内块元素中的文本、图片等元素水平居中
⑥ 文本样式
font-style: normal;
font-style: italic; /*斜体字*/ <i></i>
| 样式小知识：修改鼠标悬停于元素上方时光标(cursor)的样式 cursor：move; cursor: help; cursor: crosshair; cursor: pointer; /*小手、指向符*/ cursor: text; |
四、复杂选择器
简单选择器： *{ } div{ } .danger{ } #item2{ } :hover{ } [readonly]{ }
复合选择器： 后代、子代、群组、兄弟、相邻
复杂选择器：
①选择父元素中的第N个子元素
li:nth-child(1){ 选中一个li，要求它是父元素中的第1个儿子 }
li:nth-child(2){ 选中一个li，要求它是父元素中的第2个儿子 }
li:nth-child(3){ 选中一个li，要求它是父元素中的第3个儿子 }
li:nth-child(odd){ 选中一批li，要求它们是父元素中的第奇数个儿子 }
li:nth-child(2n+1){ 选中一批li，要求它们是父元素中的第奇数个儿子 }
li:nth-child(even){ 选中一批li，要求它们是父元素中的第偶数个儿子 }
li:nth-child(2n){ 选中一批li，要求它们是父元素中的第奇数个儿子 }
②对已有选择器取反
li:not(:nth-child(1)){ 选中除了第一个子元素外的所有的li }
li:not(:first-child){ 选中除了第一个子元素外的所有的li }
li:not(:last-child){ 选中除了最后一个子元素外的所有的li }
③取第一个儿子/最后一个儿子
li:first-child{ }
li:last-child{ }
五、渐变背景色
① background-color：背景颜色——只能是一个纯色
② background-image：图片的URL 或 一个渐变对象！
注意：渐变色不用于背景色，而用于背景图！CSS提供了四个渐变色对象：
1.线性渐变：
background-image: linear-gradient( 90deg, red 0%, ..., blue 100%)
background-image: linear-gradient( to right, red 0%, ..., blue 100%)
2.不断重复的线性渐变：
background-image: repeating-linear-gradient( 90deg, red 20px, ..., blue 80px)
background-image: repeating-linear-gradient( to right, red 20px, ..., blue 80px)
3.径向(雷达波)渐变：
background-image: radial-gradient(半径 at 圆心X坐标 圆心Y坐标 , red 0%, ..., blue 100%)
background-image: radial-gradient(半径 at 圆心X坐标 圆心Y坐标, red 0%, ..., blue 100%)
4.不断重复的径向渐变：
background-image: repeating-radial-gradient(半径 at 圆心X坐标 圆心Y坐标, red 20px, ..., blue 80px)
background-image: repeating-radial-gradient(半径 at 圆心X坐标 圆心Y坐标, red 20px, ..., blue 80px)
六、变形和渐变
修改width/height 可以让图片变大，但是有两个副作用：
①影响后续元素 ②只能以左上角为轴进行放大
CSS3提供的替代方法 —— 变形
img:hover {
transform: scale( 1 ); /*变形：缩放(1倍) —— 不缩不放*/
transform: scale( 1.5 ); /*变形：缩放(1.5倍) —— 放大到1.5倍*/
transform: scale( 0.8 ); /*变形：缩放(0.8倍) —— 缩小到默认大小的80%*/
}
七、弹性布局：是CSS3中提供的强大的布局工具，比之前的浮动布局强大的多！不需要考虑老IE浏览器的项目中推荐使用！
弹性容器可用的样式：
| display: flex; 声明一个块级的弹性容器 —— 容器内的项目自动变为“BFC” display: inline-flex; 声明一个行内的弹性容器 flex-direction: row / row-reverse / column / column-reverse; 声明主轴的方向(即元素的排列方向) justify-content: flex-start / flex-end / center / space-around / space-between; 调整内容在主轴上的对齐方式 align-items: stretch / flex-start / flex-end / center; 在交叉轴上所有项目的对齐方式 flex-wrap: nowrap / wrap; 若项目的总尺寸超过主轴的尺寸，是否换行 |
弹性项目可用的样式：
| flex-basis： auto / px； 弹性项目在主轴上的尺寸；如果主轴是横轴，那么此属性等价于width；如果主轴是纵轴，此属性等价于height flex-grow： 0 / 数字; 弹性项目在容器有富余空间时，可以分得的富余空间的比重；0表示不增长 flex-shrink: 0 / 数字； 弹性项目在容器空间不足时，尺寸收缩的比重；0表示不收缩 上述三个属性可以简写为： flex：增长权重 收缩比重 基础尺寸; flex: 0 1 auto; 默认值 flex: 1; 只声明增长权重，省略了收缩比重和基础尺寸 |
一、变形
transform：变形，转换。是CSS3提有关元素外形变化的供的新的特效。语法：
| transform: 变形函数( 参数 ); transform: 变形函数( 参数 ) 变形函数( 参数 ) ... ; 多个变形函数之间用空格分隔 |
变形函数分为四组：
①平移变形(translate)
②扭曲变形(skew)
③缩放变形(scale)
④旋转变形(rotate)
注意：所有的变形函数都不会对周围其它元素产生任何影响！！且变形时不释放原有空间！！
1.平移变形涉及到的变形函数
| transform: translateX( 50px ); 沿着X轴平移，正数表示向右，负数表示向左 transform: translateY( 50px ); 沿着Y轴平移，正数表示向下，负数表示向上 transform: translate( 50px, 50px ); 沿着X轴和Y轴平移 |
练习：把图片当做一个按钮，鼠标按下时产生向右下角的轻微平移，模拟“被按下”的效果
img:active { translate(5px,5px) }
2.扭曲变形涉及到的变形函数
| transform: skewX( 45deg ); 沿着X轴扭曲一定的角度 |
3.缩放变形涉及到的变形函数
| transform: scaleX( 1 ); 沿着X轴缩小宽度，1表示1倍，大于1表示放大，小于1表示缩小 transform: scaleY( 1 ); 沿着Y轴缩小高度，1表示1倍，大于1表示放大，小于1表示缩小 transform: scale( 1 ); 宽和高同时缩放，1表示1倍，大于1表示放大，小于1表示缩小 transform-origin：left top; 缩放变形的原点（围绕哪一点进行变形） transform-origin: 50% 0%; |
提示： ①修改width和height会对周围元素造成影响，而缩放变形不会
②缩放变形默认的原点在元素中央，可以使用transform-origin修改缩放的原点。
4.旋转变形涉及到的变形函数
| transform: rotateX( 45deg ); 沿着X轴旋转 —— 做单杠 transform: rotateY( 45deg ); 沿着Y旋转 —— 钢管舞 transform: rotateZ( 45deg ); 沿着Z旋转 —— 玩陀螺 transform: rotate( 45deg ); 一个参数的话等价于沿着Z轴旋转 transform-origin：left top; 旋转变形的原点（围绕哪一点进行旋转） transform-origin: 50% 0%; |
提示： ①旋转变形默认的原点在元素中央，可以使用transform-origin修改旋转的原点。
一、补充：变形的高级使用
1.平移变形相关的函数
| transform: translateX( 30px ); transform: translateY( 40px ); transform: translateZ( 50px ); transform: translate3d( 30px, 40px, 50px) |
| 注意：所有与Z轴有关的变形，都应该产生“近大远小”的效果！所有的近大远小效果都与“视距”有关——指观察者的眼睛到屏幕(Z: 0px)的距离。视距越小，近大远小效果越明显；视距越大，近大远小的效果越不明显。 perspective: 1024px; 视距必须声明在变形元素的父辈元素上，不能声明在变形元素本身！ |
| 注意：所有的3D变形为了完全呈现出Z轴上的叠落效果，必须在父元素上声明“变形样式”： transform-style: flat; 扁平的，不支持Z轴上的叠落和覆盖； transform-style: preserve-3d; 保持3D效果，才支持Z轴上的叠落和覆盖 |
2.扭曲变形相关的函数
| transform: skewX( 30deg ) transform: skewY( 40deg ) transform: skew(30deg, 40deg) |
3.缩放变形相关的函数
| transform: scaleX( 1 ) transform: scaleY( 2 ) transform: scale( 1, 2 ) transform: scaleZ( 3 ) 在Z轴上缩放。前提是元素在Z轴上有内容（即必须有X轴或Y轴旋转）。书写时需要注意：必须先写缩放再写旋转 transform: scaleZ(2.5) rotateX(30deg) |
4.旋转变形相关的函数
| transform: rotateX( 30deg ) 沿X轴旋转——做单杠 transform: rotateY( 40deg ) 沿Y轴旋转——跳钢管舞 transform: rotate( 50deg ) 沿Z轴旋转 transform: rotateZ( 50deg ) 沿Z轴旋转——抽陀螺 transform: rotate3d( x, y, z, a) |
| 注意：必须指定视距(perspective)才能看出 Z 轴出现的近大远小效果 |
| 旋转变形还可以指定变形原点： transform-origin: 50% 50%; |
| 单独使用变形，可以从一个状态变到第二个状况，耗时为0s —— 突然的改变，浏览体验不好； 如果想让改变耗时1s渐渐的改变，必须配合另一项技术：过渡动画 / 渐变动画 |
二、CSS3高级动画第一种：过渡动画
transition：过渡/渐变，是CSS3提供的可以将元素的两个状态之间添加逐渐改变过程的动画技术。例如：
状态1：width:100px => 状态2：width: 300px
状态1：left:50px => 状态2：left: 500px
状态1：color: red => 状态2：color: green;
状态1：scaleX(0） => 状态2：scaleX(1)
状态1：rotate(0deg) => 状态2：rotate(360deg)
状态1：opacity(0) => 状态2：opacity(1)
.......
注意：只有数值类型的两个状态间才能发生渐变动画！不是数值类型的改变不能使用渐变，例如：
状态1：text-deoration: underline => 状态2：text-deoration: overline
状态1：font-family:'黑体' => 状态2：font-family:'宋体'
状态1：display:none => 状态2：display: block
.......
| 渐变动画相关函数： ① transition-property： 针对哪个样式属性施加渐变 ② transition-duration： 渐变动画持续时长 ③ transition-timing-function： 渐变动画的速度函数 ⑤ transition: 动画属性 持续时长 [速度函数, 延迟时间] |
说明：
①渐变动画必须有一个触发条件：:hover/:active动作伪类 或 JavaScript修改元素的样式
②渐变动画的不足：
>必须有触发条件，而不能自动执行
>只能有两个状态，而不能有更多
>只能执行一次，不能执行多次或无限循环
>只能正向执行(1=>2)，不能反向执行(2=>1)
| 关键帧动画可以完成渐变动画可以完成的所有功能，而且更加强大！ |
三、CSS3高级动画第二种：关键帧动画
Frame：帧，构成连续的影片/动画中的每一幅图像。
KeyFrame：关键帧，在整个动画过程中起到关键拐点作用的帧。
关键帧动画：由开发者指定几个特别的状态(关键帧)，浏览器自动补全中间的补间帧，合成一个完整的动画。
使用关键帧动画的步骤：
①创建一个关键帧动画必需的关键帧
@keyframes 动画名称{
0%{ 样式名: 样式值, ... }
......
100%{ 样式名: 样式值, ... }
}
②在选定的HTML元素上应用该关键帧动画
元素选择器{
animation-name: 动画名; 动画名称
animation-duration: .3s; 动画持续时间
animation-timing-function: linear; 动画速度函数
animation-delay: 2s 动画延迟多久后执行
animation-iteration-count: 3; 动画循环执行的次数，infinite表示“无限次”
}
四、页面性能优化 之 —— CSS优化
页面性能优化的目标：通过各种方案减少页面资源的请求数量和响应数据总大小，提高页面的渲染效率，增强用户的浏览体验。
性能优化方案可从如下四方面入手：
①数据库及服务器端数据缓存优化
②服务器端优化
③请求和响应消息优化
④客户端运行及缓存优化
有关CSS的优化方案有：
①尽可能减少CSS文件数量 —— CSS合并
②最大化利用客户端缓存减少CSS请求次数 —— 提取公共样式文件
③尽可能减小CSS文件体积 —— CSS最小化
③尽可能减少图片文件的请求次数 —— 精灵图
④不要在页面中缩小显示图片
⑤提取公共样式，减少重复样式的编写，减小CSS代码量
⑥尽量使用CSS简写属性，减小CSS代码量
⑦尽量减少样式覆盖
SCSS语法细则
3.1、注释
标准CSS只能使用多行注释（/**/）；SCSS可以使用多行注释（/**/），也可以使用单行注释（//）,前者会被编译到.css文件中，后者则不会。
3.2、嵌套
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
| .f1 { width: 97%; .box { color: #000000; } } |
将编译为：
| .f1 { width: 97%; } .f1 .box { color: #000000; } |
3.3、父选择器&
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器。
| a { text-decoration: none; &:hover { text-decoration: underline; } span > & { font-weight: normal; } } |
将编译为：
| a { text-decoration: none; } a:hover { text-decoration: underline; } span > a { font-weight: normal; } |
3.4、属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：
| .box { font: { family: "黑体"; size: 1.1em; weight: bold; } } |
将被编译为：
| .box { font-family: fantasy; font-size: 30em; font-weight: bold; } |
3.5、SCSS变量
变量以美元符号开头，赋值方法与 CSS 属性的写法一样：
| $light-color: #f5f5f5; //全局变量 body { $base-font: 14px; //局部变量 background-color: $light -color; border: 1px solid $light -color; font-size: $base-font; } |
可以使用 !default 为未经赋值的变量赋值（如果变量已经赋过值了，就不再赋值），从而保证变量不会被重复赋值：
| $bg-color: #fff; $bg-color: #eee; $bg-color: #ddd !default; $txt-color: #333 !default; body { background-color: $bg-color; //将编译为：#eee color: $txt-color; //将编译为：#333 } |
3.6、数据类型
SCSS支持 7 种主要的数据类型：
① 数字：1, 2, 13, 10px
② 字符串：有引号字符串与无引号字符串，"foo", 'bar', baz
③ 颜色：blue, #04a3f9, rgba(255,0,0,0.5)
④ 布尔型：true, false
⑤ 空值：null
⑥ 数组 (list)：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
⑦ maps： 相当于 JavaScript 的 object，(key1: value1, key2: value2)
3.7、运算符
SCSS支持如下的运算符：
① 算术运算： + - * / %
② 颜色运算： + - *
③ 字符串拼接： +
④ 逻辑运算： and or not
⑤ 调整运算顺序： ( )
3.8、函数
SCSS中允许自定义函数：
| @function add( $c1, $c2 ){ @return $c1 + $c2 } |
也提供了非常多的预定义函数：https://sass-lang.com/documentation/modules
3.9、插值
通过 #{} 插值语句可以在选择器或属性名中使用变量：
| $name: box; $attr: border; p.#{$name} { #{$attr}-color: blue; animation-name: "my-#{name}-anim"; } |
3.10、选择和循环结构
与JavaScript等语言类似，SCSS中也有选择和循环结构：
| $enable-border: true; .box { @if $enable-border { border: 1px solid #aaa; } color: #333; } |
| @for $i in 1 to 6 { .item#{$i} { font-size: 12px + $i * 2; } } |
| @for $i in 1 through 6 { .item#{$i} { font-size: 12px + $i * 2; } } |
3.11、@import指令
CSS中也可以使用@import，用于在一个CSS文件中导入其它CSS文件 —— 属于客户端导入，即客户端浏览器还是需要发起两个HTTP请求，分别获取两个CSS文件。
SCSS中的@import指令属于服务器端导入，即在服务器端使用Node.js完成多个SCSS的合并编译为一个完整的CSS文件；客户端并不知道这个文件中的内容来自多个SCSS文件。
注意：如果希望监视编译目录的SCSS编译器不单独编译某个.scss文件，只需要将此文件名以下划线开头即可；导入此文件时，可以添加也可以省略下划线。
| //假设当前目录下存在 _base.scss，则下面三条语句是等价的： @import "_base.scss"; @import "base.scss"; @import "base" |
大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式，如下例：
| //_box.scss .box { color: red; } //main.scss .f2 { @import "box" } |
将编译为：
| .f2 .box { color: red; } |
3.12、@extend指令
一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。SCSS中可以使用 @extend 指令实现：
| .btn { border:1px solid #aaa; } .btn-danger { @extend .btn; background-color: #fcc; } |
3.13、@mixin 和 @include指令
@mixin指令用于定义可重复使用的样式，但是不会引入不必要的class；可以在后续的代码中使用@include指令引用之前定义的混合样式：
| @mixin bordered { border: 1px solid #aaa; padding: 5px; margin: 5px; } .btn { @include bordered; background-color: #eee; } .box { @include bordered; color: #333; } |
将编译为：
| .btn { border: 1px solid #aaa; padding: 5px; margin: 5px; background-color: #eee; } .box { border: 1px solid #aaa; padding: 5px; margin: 5px; color: #333; } |
在使用混合指令时，还可以设定变量（形参），在后续引用时为这些变量提供实际数据（实参）：
| @mixin bordered($bw, $bc, $space: 5px) { border: $bw solid $bc; padding: $space; margin: $space; } .btn { @include bordered(1px, #aaa, 6px); background-color: #eee; } .box { @include bordered(2px, #bbb); color: #333; } |
将编译为：
| .btn { border: 1px solid #aaa; padding: 5px; margin: 5px; background-color: #eee; } .box { border: 1px solid #aaa; padding: 5px; margin: 5px; color: #333; } |
扫一扫
2449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
