在本文中，您将会了解到关于css的新资讯，同时我们还将为您解释Ⅱ的相关在本文中，我们将带你探索css的奥秘，分析Ⅱ的特点，并给出一些关于angular-如何支持less和sass（scss）、CSS学
在本文中，您将会了解到关于css的新资讯，同时我们还将为您解释Ⅱ的相关在本文中，我们将带你探索css的奥秘，分析Ⅱ的特点，并给出一些关于angular - 如何支持less和sass（scss）、CSS 学习笔记之CSS BackGrounds（第4天）、CSS 闲着无聊读一读，不知不觉学会CSS（六）完、css 预编译语言 sass scss（变量 $var, css 嵌套规则，@import 规则，@extend，@mixin）的实用技巧。
本文目录一览：- css（Ⅱ）
- angular - 如何支持less和sass（scss）
- CSS 学习笔记之CSS BackGrounds（第4天）
- CSS 闲着无聊读一读，不知不觉学会CSS（六）完
- css 预编译语言 sass scss（变量 $var, css 嵌套规则，@import 规则，@extend，@mixin）
css（Ⅱ）
css文本修饰
p标签
- font-family : “楷体” 字体
- font-size : 20px 字体大小
- font-weight : bold 字体加粗
- color : 文本颜色
- text-align : 文本排列
- text-indent : 3em 首行缩进
- line-height : 2em 行高
a标签
- text-decoration : none 样式
css边框线条
线条样式
-
四边边框 border: 15px solid #B22222
-
单边边框 border-left: 15px dashed #0000FF
-
边框圆角 border-radius : 8px
元素溢出时处理
overflow :
- scroll : 溢出时使用滚动条
- hidden : 溢出时隐藏
- auto : 只有侧边的滚动条
css边框边距
改变块元素的边距并不会影响到块元素的一个实际内容显示
- 四边相同边距 padding : 20px
- 四边不同边距 padding : 10px 20px 30px 40px 顺序上左下右
- 单边设置 margin-top
- 对称变 上下 左右
- 左右外边距值为auto时会水平居中 margin: 20px auto
背景图片
- 位置：头标签style中定位整个body
- 基本结构
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(https://img.58cdn.com.cn/ui6/my/images/reg-bg.png);/* 添加背景图片路径 */
background-repeat: no-repeat ;/* 设置背景图的重复效果
repeat-x 水平方向重复出现
repeat-y 垂直方向重复出现
no-repeat 仅出现一次*/
background-size: 100%;/* 默认填满整个屏幕 */
background-attachment: fixed;/* 设置背景图片固定不动 */
background-position: bottom;/* 调整图片的位置 */
}
</style>
</head>
- 使用padding-top来撑起容器的高度 （容器高度=高/宽*100%）
css的定位属性
1、浮动定位float：
- 浮动定位会脱离文档流
- 浮动定位只能左浮动和右浮动
- 浮动时不能超过父元素的边框
2、相对定位：relative
- 相对上一次的位置进行（X Y）的偏移
- 无论如何偏移相对定位不会释放自己所占的位置，不会脱离文档流
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 3px solid #0000FF;
word-break: break-all;
padding: 30px;
}
#div0{
position: relative; /* 开启相对定位*/
border: 2px solid #C850C0;
width: 100px;
height: 100px;
top: 20px; /* 相对原位置高增加20px,也就是向下平移20px*/
left: 22px;
}
</style>
</head>
<body>
<div id="div1">
我是你的父元素框
<div id="div0">
把我进行相对定位
</div>
</div>
</body>
</html>
3、绝对定位：absolute
- 绝对定位元素位置相对于已经定位的最近的父元素
- 如果要参照最近的父元素，那这个父元素必须开启定位，否则参照上一级
- 开启绝对定位的元素和文档流没有关系，所以他们可能会覆盖其他元素
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
#d0{
width: 200px;
height: 100px;
border: black 2px solid;
position: relative;
}
#d1{
width: 200px;
height: 30px;
background-color: #808080;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div id="d0">
最近的开启定位的父元素
<div id="d1">
把我绝对定位
</div>
</div>
</body>
</html>
4、固定定位：fixed
- 坐标原点固定，始终相对于浏览器窗口定位
- 位置固定，拖动滚动条时，固定定位的元素位置仍然不变
元素的层级z-index
- z-indes可以设置元素的层级，值为正数
- 层级越高就优先显示
- 如果层级一样，优先显示靠下的元素
- 祖元素层级再高，也不能覆盖子元素
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper {
position: relative;
}
.dashed-Box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
width: 300px;
}
.gold-Box {
position: absolute;
z-index: 3; /* put .gold-Box above .green-Box and .dashed-Box */
background: gold;
width: 200px;
left: 60px;
top: 3em;
}
.green-Box {
position: absolute;
z-index: 2; /* put .green-Box above .dashed-Box */
background: lightgreen;
width: 100px;
left: 200px;
top: -25px;
height: 7em;
opacity: 0.9;
}
</style>
</head>
<body>
<div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">Dashed Box</div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">Gold Box</div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">Green Box</div>
</div>
</body>
</html>
元素的显示方式
- 块元素：从上到下排列
- 行内元素：从左到右，不能设宽高(span,a)
- 行内块元素：从左到右，可以设宽高(input,img)
display设置显示方式
- none：不显示该元素，释放其占用位置
- block：将元素设置为块元素
- inline：将元素设置为行内元素
- inline-block：将元素设置为行内块元素
angular - 如何支持less和sass（scss）
更新时间：
（2018-7-26） - 使用angular6.x最新版本
新建项目时，我们指定类型：
1 示例：ng new projectname -style=sass(scss)
2 实例：ng new ng-sass -style=sass
less的话，也是是改一下后缀名而已
1 示例：ng new projectname -style=less
2 实例：ng new ng-sass -style=less
在实际项目中应用的话，大概就是（从angular5.x~6.x），angular-cli.json更名为angular,json
已有项目中运行的话，在angular.json里面添加
1. 添加组件scss(angular内置了sass)
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
2. styles里面的style.css改为scss或sass，具体看你使用哪种
"styles": [
"src/styles.scss"
],
3.修改样式名style.css为style.scss
4. 添加完以后，重启angular，最后在style.scss里面写的样式会更新到所有component组件里.
CSS 学习笔记之CSS BackGrounds（第4天）
总结
以上是小编为你收集整理的CSS 学习笔记之CSS BackGrounds（第4天）全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
CSS 闲着无聊读一读，不知不觉学会CSS（六）完
CSS 六
- 1.z-index
- 2.CSS3与CSS2之间的区别
- 3.结构伪类
- 4.border-collapse
- 5.伪元素
- 6.文本阴影
- 7.盒子阴影
- 8.圆角矩形
- 9.透明度
- CSS完
1.z-index
- z-index表示谁压盖着谁，数值大的会压盖住数值小的。
- 只有定位的元素才有z-index 值，只有设置了固定定位、相对定位、绝对定位的元素它们才会拥有：z-index。
- z-index的值时没有单位的，值是一个正整数，默认的z-index的值为0。
- 如果多个定位元素没有设置z-index属性或者z-index值设置一样，那么写在HTML后面的定位元素就会压盖住前面的定位元素。
一般像导航栏的z-index值最大。
2.CSS3与CSS2之间的区别
CSS3 = CSS2 + 新语法 + 新的属性
就是对CSS2的扩充、删减、优化。
从这里开始往下都是CSS3的内容和新特性。
3.结构伪类
4.border-collapse
这个属性主要是用于来合并表格的边框线，其值为：collapse。
格式：
border-collapse:collapse;
这个属性和表格(table)元素经常使用。
5.伪元素
.Box::before{
content:"所要添加的内容，盒子内部最前面";
}
after一样，一样的格式。
6.文本阴影
格式：
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<Meta charset="utf-8">
<style type="text/css">
.Box{
font-size: 40px;
font-family: "楷体"；
color:#32CD32;
text-shadow:3px 3px 3px #CD5C5C;
}
</style>
</head>
<body>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
文本阴影
</div>
</body>
</html>
此外阴影的数值可以是负值。
- 文字阴影可以有多组值，多组之间用逗号隔开就可以。
- 水平阴影正值阴影在右边，负值在左边。
- 垂直阴影正值在下边，负值在上边。
- 模糊强度，值越大越模糊。
7.盒子阴影
格式：
Box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
水平阴影和垂直阴影必须的写，其余可以忽略不写，和文本阴影一样。
和文本阴影差不多，这里不举例子了。
8.圆角矩形
格式：
border-radius:左上 右上 右下 左下
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<Meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #f00;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意：
如果说border-radius的四个值都是一样的话就可以只需要写一个参数就可以了。
如果将上面的border-radius修改成一下：
border-radius:50px;
那么这个正方形图形就变成了圆形，这面解释一下怎么才能变成圆形。
椭圆如何设置：
半圆如何设置：
同样左半圆，右半圆，下半圆，也都是通过修改px值来完成的。
注意：
img也可以使用border-radius这个属性。
例如：
制作一个圆形图像：
<!DOCTYPE html>
<html>
<head>
<title></title>
<Meta charset="utf-8">
<style type="text/css">
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="./images/壁纸.jpg">
</body>
</html>
结果如下：
9.透明度
只要是颜色，都可以用透明度。
格式：
rgba(红色，绿色，蓝色，透明度)
a: 表示透明度的意思，透明度取值：0~1之间，0表示完全透明，1表示不透明。
说明：
- 背景颜色透明：background-color:rgba(255,255,255,0.3);
- 文本颜色透明：color:rgba(255,255,255,0.3);
- 边框颜色透明：border:1px solid rgba(255,255,255,0.5);
CSS完
css 预编译语言 sass scss（变量 $var, css 嵌套规则，@import 规则，@extend，@mixin）
什么是 sass
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时
【特点】
- 完全兼容 CSS3
- 在 CSS 语言的基础上增加变量 (variables)、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令等高级功能
- 自定义输出格式
scss && sass
Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如 IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。
第二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。
任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具
[注意] 本文使用 scss 语法
缓存
默认情况下，Sass 会自动缓存编译后的模板（template）与 partials，这样做能够显著提升重新编译的速度，在处理 Sass 模板被切割为多个文件并通过 @import 导入，形成一个大文件时效果尤其显著。
基础规则
【注释】
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won''t appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
使用插值语句的注释
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
编译后：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */
【嵌套规则】
Sass 允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内
#main{
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
等同于
#main .redbox{}
【引用父选择器 &】
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
[注意] & 等于 a 即父元素
【属性嵌套】
CSS 中有一些属性遵循相同的 “命名空间”；比如，font-family, font-size, 和 font-weight 都在 font 命名空间中。在 CSS 中，如果你想在同一个命名空间中设置一串属性，你必须每次都输出来。Sass 为此提供了一个快捷方式：只需要输入一次命名空间，然后在其内部嵌套子属性。
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译为：
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
带属性的命名空间
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
编译后
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
SassScript
除了普通的 CSS 属性的语法，Sass 支持一些扩展，名为 SassScript。SassScript 允许属性使用变量，算术和额外功能。SassScript 可以在任何属性值被使用。
SassScript 也可以用来生成选择器和属性名称，当编写 mixins 时非常有用。这是通过 interpolation（插值）完成。
【变量】
使用 SassScript 最直截了当的方法是使用变量。变量以美元符号开始，赋值像设置 CSS 属性那样：
$width: 5em;
#main {
width: $width;
}
编译为：
#main {
width: 5em;
}
数据类型
SassScript 支持 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，从一个值映射到另一个 (例如 (key1: value1, key2: value2))
【字符串】 CSS 指定两种字符串类型：带引号的字符串（"Lucida Grande"），还有不带引号的字符串（sans-serif）SassScript 识别这两种类型，并且一般来说，在编译输出的 CSS 文件中不会改变 Sass 文档中使用的字符串类型。
[例外] 当使用 #{} 时，带引号的字符串将被编译为不带引号的字符串
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
编译后：
body.firefox .header:before {
content: "Hi, Firefox users!";
}
".header" 最终被编译为 .header
【列表】 列表 (lists) 是指 Sass 如何表示在 CSS 声明的，类似 margin: 10px 15px 0 0 或 font-face: Helvetica, Arial, sans-serif 这样的值，列表只是一串其他值，无论是用空格还是用逗号隔开。事实上，独立的值也被视为列表：只包含一个值的列表。
列表本身没有太多的功能，但是 SassScript list functions 使它们非常有用。nth 函数可以直接访问列表中的某一项；join 函数可以将多个列表拼接在一起；append 函数可以将某项添加到列表中；@each 指令可以将添加样式到列表中的每一项。
【Maps】 Maps 代表一个键和值对集合，其中键用于查找值。他们可以很容易地将值收集到命名组中，并且可以动态地访问这些组。在 CSS 中你找不到和他们类似的值，虽然他们的语法类似于媒体查询表达式：
$map: (key1: value1, key2: value2, key3: value3);
和列表（Lists）不同，Maps 必须始终使用括号括起来，并且必须用逗号分隔。Maps 中的键和值可以是任意的 SassScript 对象。一个 Maps 可能只有一个值与给定的键关联（尽管该值可以是一个列表）。一个给定的值可能与许多键关联。
Maps 的主要操作使用的是 SassScript 函数。map-get 函数用于查找 map 中的值，map-merge 函数用于添加值到 map 中的值， @each 指令可以用来为 map 中的每个键值对添加样式。map 中键值对的顺序和 map 创建时始终相同。
[注意] 需要注意的是 map 的建（keys）可以是任何 Sass 数据类型（甚至是另一个 map），并且声明 map 的语法允许是任意的 SassScript 表达式，这个表达式将被评估为一个值以确定建（keys）。
运算
所有数据类型的支持相等运算 (== 和！=)。此外，每种类型都有其自己特殊的运算方式。
【数字运算】 SassScript 支持对数字标准的算术运算（加法 +，减法 - ，乘法 *，除法 / 和取模 %）。Sass 数学函数在算术运算期间会保留单位。这意味着，就像在现实生活中，你不能用不相同的单位数字进行算术运算（比如数字后面添加了 px 和 em 单位）
【除法和 /】 CSS 允许 / 出现在属性值之间作为分隔数字的方式，如下代码
p.ex2{font:italic bold 12px/20px arial,sans-serif;})
12px/20px 是 font-size/line-height的简写形式
SassScript 在以下几种情况下会进行除法运算
- 使用了变量
- 使用了函数
- 使用了括号
p {
font: 10px/8px; // 原生的CSS，不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}
如果你想纯 CSS 的 / 和变量一起使用（即 / 不作为除法使用），你可以使用 #{} 插入他们。例如：
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译后：
p {
font: 12px/30px;
}
【减法，负数，和 -】 在 CSS 和在 Sass 中 - 有许多不同的意义。它可以是一个减法运算符（比如在 5px - 3px 中） 也可以表示一个负数（比如在 - 3px 中） 还可以是一个一元负运算符（比如在 -$var 中） 或是标识符的一部分（比如在 font-weight 中）
那么如何使用 - 呢？
- 减法的时候，你总是在 - 两侧保留空格。
- 当表示一个负数或一元负运算时候，在 - 前面包含一个空格，后面不加空格。
- 如果在一个空格隔开的 list（列表）中，你可以将一元负运算使用括号括起来，比如在 10px (-$var) 中。
【颜色运算】 所有算术运算都支持的颜色值，颜色值的运算是分段进行计算的，也就是，依次计算红（red），绿（green），以及蓝（blue）的成分值。例如：
p {
color: #010203 + #040506; // 计算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09，并且编译为：
}
编译后
p {
color: #050709;
}
【opacify 和 transparentize 函数】 调整颜色的 alpha 通道可以使用
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
编译后：
p {
color: rgba(255, 0, 0, 0.8); // 0.5 + 0.3
background-color: rgba(255, 0, 0, 0.25);// 直接使用0.25替代了0.5
}
【字符串运算】
运算可用于连接字符串
p {
cursor: e + -resize;
}
编译后：
p {
cursor: e-resize;
}
带引号和不带引号字符串加运算
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译后
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
【圆括号】 圆括号可以用来影响运算的顺序 (注：优先级)：
p {
width: 1em + (2em * 3);
}
编译后：
p {
width: 7em;
}
插值
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译后：
p.foo {
border-color: blue;
}
使用插值来避免运算
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译后：
p {
font: 12px/30px;
}
SassScript 中的 &
就像当它在选择器中使用一样，SassScript 中的 & 指向当前父选择器。
.foo{
&:hover{
color:red;
}
}
编译后：
.foo:hover {
color: red;
}
变量默认
如果分配给变量的值后面添加了！default 标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
编译后：
#main {
content: "First content"; // 使用了之前定义的
new-content: "First time reference";
}
规则
Sass 支持所有 CSS3 的 @ 规则，以及一些已知的其他特定的 Sass "指令"。
【@import】
Sass 扩展了 CSS @import 规则，允许其导入 SCSS 或 Sass 文件。被导入的全部 SCSS 或 Sass 文件将一起合并到同一个 CSS 文件中。此外，被导入文件中所定义的任何变量或混入（mixins）都可以在主文件
可以正确导入scss或sass文件
@import "foo.scss";
@import "foo";
不能正确导入的形式
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import 支持导入多个文件语句
@import "rounded-corners", "text-shadow";
@import 用在嵌套
example.scss 包含
.example {
color: red;
}
如此引入：
#main {
@import "example";
}
等同于
#main {
.example {
color: red;
}
}
编译后
#main .example {
color: red;
}
[注意 1] 该指令只允许出现在文档顶层（注：最外层，不在嵌套规则内） [注意 2] 不允许在 mixin) 或控制指令 (control directives) 中嵌套 @import
【@media】 Sass 中 @media 指令的行为和纯 CSS 中一样，只是增加了一点额外的功能：它们可以嵌套在 CSS 规则。如果一个 @media 指令出现在 CSS 规则中，它将被冒泡到样式表的顶层，并且包含规则内所有的选择器。这使得很容易地添加特定 media 样式，而不需要重复使用选择器，或打乱样式表书写流。例如：
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译后：
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@extend
继承另一个样式
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译后：
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
这意味着.error 说定义的所有样式也适用于.seriousError，除了.seriousError 的特定样式。相当于，每个带有.seriousError 类的元素也带有.error 类。
类（class）选择，并不是唯一可以扩展。她可以扩展任何定义给单个元素的选择器，如.special.cool, a:hover, 或 a.user [href^="http://"]。 例如：
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
编译后：
a:hover, .hoverlink {
text-decoration: underline;
}
警告指令
【@debug】
@debug 指令打印 SassScript 表达式的值到标准的错误输出流。这对于调试具有复杂 SassScript 表达式的 Sass 文件非常有用的。
@debug 10em + 12em;
输出：Line 1 DEBUG: 22em
【@warn】
@warn 指令打印 SassScript 表达式的值到标准的错误输出流。这对于警告用户弃用库 或 修复 mixin 轻微的错误是非常有用的。
使用示例
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}
【@error】
@error 指令抛出一个 SassScript 表达式的值作为一个致命的错误，其中包括一个不错的堆栈跟踪。这对于验证混入（mixin）和函数的参数很有用。例如：
@mixin adjust-location($x, $y) {
@if unitless($x) {
@error "$x may not be unitless, was #{$x}.";
}
@if unitless($y) {
@error "$y may not be unitless, was #{$y}.";
}
position: relative; left: $x; top: $y;
}
控制指令和表达式
SassScript 支持一些基本控制指令和表达式，比如仅在在某些条件下包含样式，或者包括相同的样式几次变化。
[注意] 控制指令是一项高级功能，日常编写过程中并不常用到，主要在 mixins（混合）指令中使用，尤其是像 Compass 这样的库。
【@if】 @if 指令需要一个 SassScript 表达和嵌套在它下面要使用的样式，如果表达式返回值不为 false 或者 null ，那么后面花括号中的内容就会返回：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译后：
p {
border: 1px solid;
}
@if 语句后面可以跟多个 @else if 语句和一个 @else 语句。 如果 @if 语句失败，Sass 将逐条尝试 @else if 语句，直到有一个成功，或如果全部失败，那么会执行 @else 语句。 例如：
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译后：
p {
color: green;
}
【@for】 @for 指令重复输出一组样式。对于每次重复，计数器变量用于调整输出结果。该指令有两种形式： @for $var from <start> through <end> @for $var from <start> to <end>
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译后：
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
【@each】 @each 指令通常格式是 @each $var in <list or map>。$var 可以是任何变量名，像 $length 或者 $name，和 < list or map > 是一个返回列表（list）或 map 的 SassScript 表达式。
@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'');
}
【遍历 Map】
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
编译后：
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
Mixin
混入 (mixin) 允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），比如 .float-left。混入 (mixin) 还可以包含所有的 CSS 规则，以及任何其他在 Sass 文档中被允许使用的东西。 他们甚至可以带 arguments，引入变量，只需少量的混入 (mixin) 代码就能输出多样化的样式。
【定义一个 Mixin】
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
【引用混合指令 @include】
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
编译后：
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
【mixin 参数】
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 100px); }
编译后：
p {
border-color: blue;
border-width: 1in;
border-style: dashed;
}
【参数设置默认值】
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
编译后：
p {
border-color: blue;
border-width: 1in;
border-style: dashed;
}
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed;
}
【可变参数】 有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数。例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译后：
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
【参数结合 list map 使用】
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
@include colors($value-map...);
}
编译后：
.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}
.secondary {
color: #00ff00;
background-color: #0000ff;
border-color: #ff0000;
}
【mixin 传递内容块】
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
编译后：
* html #logo {
background-image: url(/logo.gif);
}
【变量的作用域】
传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。
$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}
编译后：
.colors {
background-color: blue; // 引用的mixin的变量值
color: white; // 这里引用的是全局的变量
border-color: blue;// 引用的mixin的变量值
}
函数指令
Sass 支持自定义函数，并能在任何值或脚本上下文中使用
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
编译后：
#sidebar {
width: 240px;
}
调用方式
#sidebar { width: grid-width($n: 5); }
输出格式
虽然 Sass 默认的 CSS 输出格式非常好，并且能反映文档的结构，但是由于每个人的喜好和需求各不相同，因此 Sass 支持其他几种格式。Sass 允许您通过设置:style 选项 或使用 --style 命令行标志，在四种不同的输出格式之间进行选择。
【:nested】
nested（嵌套）格式是 Sass 默认的输出格式，因为它的格式反映 CSS 样式与 HTML 文档结构。每个属性都独占用一行，但缩排不是固定的。每个规则是基于它的何嵌套深度缩进。
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
【:expanded】
expanded（扩展）格式更像是手写的 CSS 样式，每个属性和规则都独占用一行。在规则之内的属性缩进的，但规则没有任何特殊的缩进。例如：
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
【:compact】
compact（紧凑）格式比起 nested（嵌套）或 expanded（扩展）格式占据更小的空间。这种格式重点聚焦在选择器上，不是它们的属性。
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
【:compressed】
compressed（压缩）格式占用尽可能小的空间，在该文件的末尾会有一个换行，并且除了必要的分隔选择器之外，基本没有多余空格，它还包括其他一些小的压缩，比如选择颜色最小的表示方式。
#main{color:#fff;background-color:#000}#main p{width:10em}
小结
本文内容全部来自 sass 文档，通过查阅一遍文档，基本上能掌握 sass 的一些常用用法。
关于css和Ⅱ的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于angular - 如何支持less和sass（scss）、CSS 学习笔记之CSS BackGrounds（第4天）、CSS 闲着无聊读一读，不知不觉学会CSS（六）完、css 预编译语言 sass scss（变量 $var, css 嵌套规则，@import 规则，@extend，@mixin）等相关内容，可以在本站寻找。
本文标签：
