第五节：CSS内置函数、Less/Scss简介以及核心用法总结
一. CSS中的内置函数
1. var
使用CSS定义的变量; 属性名需要以两个减号（--）开始; 属性值则可以是任何有效的CSS值;
注：自定义属性的可见作用域(只在选择器内部有效)，所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;
<style>
:root {
/* 定义了一个变量(CSS属性) */
/* 只有后代元素可以使用 */
--main-color: #f00;
}
.box {
color: var(--main-color);
}
.title {
color: var(--main-color);
}
</style>2. calc
计算CSS值, 通常用于计算元素的大小或位置;
3. blur
毛玻璃(高斯模糊)效果;
4. gradient
颜色渐变函数；
二. Less简介
1. 背景
2. 什么是less？
3. less代码的编译方式
方案1：
通过npm下载对应包进行编译。 针对vue项目
详见：https://www.cnblogs.com/yaopengfei/p/15272441.html
https://www.cnblogs.com/yaopengfei/p/17074777.html
方案2：
在线编译 或者 vscode插件
https://lesscss.org/less-preview/ 该地址可以将less 转换成 css
方案3：
针对传统的.html页面，如何让less直接生效呢，只需要引入一个工具类的js文件即可。 可以cdn，也可以下载到本地，建议下载到本地。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet/less" href="./less/01_less的基本使用.less">
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
</head>特别注意： less文件的引入，rel位置是：rel="stylesheet/less"
三. Less核心用法
详见官网：https://less.bootcss.com/#概览 （非常详细）
1. 变量（Variables）
@变量名: 变量值;
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
2. 嵌套（Nesting）
Less 提供了使用嵌套（nesting）代替层叠多个选择器的情况。
css代码
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}less代码
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}补充： & 符号，表示所在选择器的名称
css代码
.box1 {
font-size: 20px;
color: black;
}
.box1:hover {
color: pink;
}less代码
.box1 {
font-size: 20px;
color: black;
// & 表示所在选择的名称，这里表示的是 .box1
&:hover {
color: pink;
}
}
3. 运算（Operations）
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。
计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
4. 混合（Mixins）
在原来的CSS编写过程中，多个选择器中可能会有大量相同的代码， 在less中提供了混合（Mixins），将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用。
(1). 不含参数
less代码
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}css代码
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}注：混合在没有参数的情况下，小括号可以省略，但是不建议这样使用；
(2). 含参数
传入参数，如果不传，则走默认值，这里的参数必须用@符号开头。
.box_border(@borderWidth: 5px, @borderColor: purple) {
border: @borderWidth solid @borderColor;
}
.box2 {
width: 150px;
background-color: #0f0;
.box_border(10px, orange);
}
5. 映射（Maps）
可以理解成获取一个对象中的某个属性，通常和混合一起使用。
注：弥补less中不能自定义函数的缺陷
.box_size {
width: 200px;
height: 100px;
}
.box1 {
width: .box_size()[width]; //可以看做先获取这个对象，然后根据key获取内容 结果：200px
background-color: #f00;
}注：当没有参数的时候，也可以写成： width: .box_size[width]; 但不建议省略
下面的#号，代表id选择器
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
6. extend继承
用于复用代码； 和mixins相比，继承代码最终会转化成并集选择器。
less代码
.box_border {
border: 5px solid #f00;
}
.box {
width: 100px;
background-color: orange;
&:extend(.box_border);
}css代码
.box_border,.box {
border: 5px solid #f00;
}
.box {
width: 100px;
background-color: orange;
}
7. 内置函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。 详见官网
.box {
color: color(skyblue);
width: convert(100px, "in");
font-size: ceil(18.5px);
background-color: orange;
}
8. 作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
代码1：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}代码2：
@mainColor: #f00;
.box_mixin {
@mainColor: orange;
}
.box {
@mainColor: #0f0;
.item {
span {
color: @mainColor; //orange
.box_mixin();
}
}
}
9. 注释（Comments）
块注释和行注释都可以使用：
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;
10. 导入
导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
四. Scss简介
五. Scss核心用法
(参考文档：https://www.sass.hk/guide/ https://www.runoob.com/sass/sass-variables.html https://sass-lang.com/documentation/ )
1. 嵌套
同Less用法， 也可以使用 & 符号，表示当前选择器对应的名称。
2. 变量
使用 $ 符号 进行声明。
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
3. 混合器 (@mixin 与 @include)
@mixin ： 用来声明混合器 @include： 用来调用混合器
(1). 声明和调用-不含参数
声明
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}调用
.danger {
@include important-text;
background-color: green;
}(2). 声明和调用-含参数
注：这里的参数必须以$符号开头。
声明
/* 混入接收两个参数 */
@mixin bordered($color, $width) {
border: $width solid $color;
}调用
.myArticle {
@include bordered(blue, 1px); // 调用混入，并传递两个参数
}
.myNotes {
@include bordered(red, 2px); // 调用混入，并传递两个参数
}(3). 声明和调用-含参数和默认值
声明
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}调用
.myArticle {
@include bordered(blue); // 调用混入，第二个参数走默认值
}
.myNotes {
@include bordered(); // 调用混入，两个参数都走默认值
}
4. extend继承
作用和效果 与 less中的完全相同，但是写法不一样。
scss代码
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}css代码
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}说明：
使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。
@extend 很好的体现了代码的复用。
5. 一些控制指令
详见文档：https://www.sass.hk/docs/
(1). @for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。
scss代码
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}css代码
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
注： 还有很多，详见文档，这里不一 一列出了。
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
