隆海文档库

暗黑模式

1.1 SASS 的概念 ​

1.1.1 预处理简介 ​

  • SASS 是一种 CSS“预处理器”
  • CSS 预处理器是用一种专门的编程语言，为 CSS 增加了编程的特性
  • CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让 CSS 更加简洁、提高代码复用性、逻辑分明等等
  • 常见的 CSS 预处理器，SASS，less,stylus

1.2 SASS 和 sCSS 的关系 ​

  • SASS 老版本，sCSS 新版本
  • SASS 编写严格不被广泛接受
  • sCSS 与 CSS 规范一致，更容易接受

1.3 依赖 ruby 安装 SASS ​

  • 依赖 ruby
    • 下载 rudy，下载地址https://share.weiyun.com/XgGOlJvQ里面的软件
    • 查看自己电脑是 32 位还是 64 位，按照实际情况安装 x86 或者 x64
    • 查看 ruby 是否安装成功，打开cmd,输入ruby -v
  • 安装 SASS
    • mac：sudo gem install SASS
    • windows:gem install SASS
    • 安装完之后在cmd中检查 sCSS -v出现版本号就可以了
  • 文件编译和监听
    • 使用终端或 vscode 终端在要编译的文件夹下打开，注意路径
    • 文件夹监听SASS --watch sCSS:CSS
    • 文件监听SASS --watch 1.sCSS:1.CSS
    • 可以使用简写SASS -w sCSS:CSS

1.4 使用 npm 安装 SASS ​

  • 查看是否安装 npm，打开cmd,输入npm -v
  • 打开cmd,输入npm install -g SASS，安装成功后检查SASS -v
  • 如果上面的方法因为网的问题没有安装成功，可以使用淘宝镜像
    • 打开cmd,输入$ npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 再使用 cnpm 安装 SASS$ cnpm install SASS
  • 文件编译和监听
    • 使用终端或 vscode 终端在要编译的文件夹下打开，注意路径
    • 文件夹监听SASS --watch sCSS:CSS
    • 文件监听SASS --watch 1.sCSS:1.CSS
    • 可以使用简写SASS -w sCSS:CSS

1.5 拷贝文件【不建议】 ​

  • 以下适用于 windows
  • 检查 node 版本,在终端输入node -v
  • 重要辅助文件>SASS 安装
  • node12 版本以上，解压node版本12以上用这个-SASS.zip
  • 检查自己的操作系统，64 位解压SASS64bit
  • 检查自己的操作系统，64 位解压SASS32bit
  • 找到 nodejs 安装路径，拷贝解压后文件夹内部的所有文件
  • node_modules文件夹看看里面是否有文件，单独将准备好到node_modules里到 SASS 拷贝到原有文件夹内
  • 其他文件拷贝到nodejs文件夹中
  • 实在出现问题，查看《SASS 安装须知》

二、嵌套与书写 ​

2.1 嵌套的规则 ​

  • 按照 html 标签结构嵌套书写
  • 将子元素的选择器和样式列表直接包裹在父元素的样式列表中 例子：
div {
  width: 200px;
  height: 200px;
  background-color: red;
  p {
    color: white;
    font-size: 20px;
    a {
      text-decoration: none;
    }
  }
}

2.2 父选择器& ​

例子：

div {
  width: 200px;
  height: 200px;
  background-color: red;
  p {
    color: white;
    font-size: 20px;
    a {
      text-decoration: none;
    }
    &:hover {
      color: blue;
    }
  }
}
<div>
  <p>请访问<a href="#">这里</a></p>
</div>
  • 父选择器&的使用是代表当前作用域所有的结构集合
  • 如果需要使用伪类，必须使用&进行占位

2.3 @import 导入方式 ​

SASS 的 @import ，允许其导入 SCSS 或 SASS 文件。被导入的文件将合并编译到同一个 CSS 文件中。相当于将一个 SASS 导入到另一个 SASS 中用

例子：创建两个文件 import1.sCSS 和 import2.sCSS，2 需要引入 1，使用中的样式

//import1.sCSS 这是一个简单的CSS reset
* {margin: 0;padding: 0;}
a {text-decoration: none;}
//import2.sCSS
@import "./import1.sCSS";
a {
  color: red;
  font-size: 50px;
}
  • @import "需要被引入的文件.sCSS";
  • 将@import 指令写到需要引入的 sCSS 文件中

三、变量的使用 ​

SASSScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样

例子:

$myColor:#25aab2;
$myHeight:50px;
$blue:blue;
$bgColor:$blue;
div{
  $jbwidth:200px;
  width:$jbwidth;
  height: $myHeight;
  background-color: $myColor;
}

3.1 创建变量 ​

  • $变量名:值;创建一个变量名
  • 变量可以承接长度单位、值、颜色，以及其他变量
  • 变量名尽量见名之意 例子：
$myColor:#25aab2;
$myHeight:50px;
$borderStyle:1px solid red;

3.2 变量的调用 ​

  • 变量的调用，如：height: $myHeight;
  • 变量也可以调用其他变量 例子：
$myHeight:50px;
$blue:blue;
div{
  width:200px;
  height: $myHeight;
  $blue:blue;
  $bgColor:$blue;
  background-color: $bgColor;
}

3.3 局部变量 ​

  • 可以创建局部变量，作用在{}以内的范围
  • 注意全局变量的名称尽量不要和局部变量名称重复，以免出错 例子：
$blue:blue;
$bgColor:$blue;
div{
  $jbwidth:200px;
  width:$jbwidth;
  height: $myHeight;
}

四、混合指令 ​

混合指令（Mixin）用于定义可“重复使用的样式”，比如 .float-left。比如之前的兼容，浏览器的内核很多种一起写的时候可以使用混合指令写在一个混合指令里，完成所有的兼容，这样比较清晰

4.1 定义混合指令 @mixin ​

  • @mixin后添加名称与样式@mixin name {样式列表}
  • 混合也需要包含选择器和属性，甚至可以用 & 引用父选择器
  • 混合指令的名称可以自定义，但不要使用数字开头，按照 CSS 要求的命名标准

例子 1：自定义一个按钮的圆角和阴影，所有按钮都可以使用

@mixin btn-style {
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0 #666;
}

例子 2:清除浮动

@mixin clearfix {
  &::after {
    content: "\\200B";
    display: block;
    height: 0;
    clear: both;
  }
  *zoom: 1;
}
.list {
  background-color: red;
  list-style: none;
  li {
    width: 100px;
    height: 100px;
    float: left;
    font-size: 20px;
    border: 1px solid #000;
    background-color: yellow;
  }
  & {
    @include clearfix;
  }
}

4.2 引用混合样式 @include ​

定义了混合指令就要用，需要在哪个地方用就使用 @include来引用@mixin的指令名

例子 1：基本使用方式，写两个 div 当按钮

@mixin btn-style {
  text-align: center;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0 #666;
}
.block-btn {
  @include btn-style;
  // 根据需要自定义的样式
  width: 150px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  background-color: rgb(18, 182, 247);
}
.a-btn {
  @include btn-style;
  // 根据需要自定义的样式
  display: block;
  text-decoration: none;
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-color: rgb(18, 182, 247);
}
<div class="block-btn">用div做的按钮</div>
<a href="#" class="a-btn">用a做的按钮</a>
  • 使用 @include 指令引用混合样式，格式是在其后添加混合名称 @include name;
  • 将@include 指令和调用混合名称直接放在需要的样式列表中

4.3 参数 ​

例子 1：传递参数

@mixin btn-style($w, $h) {
  //共有样式
  text-align: center;
  display: block;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0 #666;
  background-color: rgb(18, 182, 247);
  text-decoration: none;
  color: #fff;
  //特有样式
  width: $w;
  height: $h;
  line-height: $h;
}
.block-btn {@include btn-style(150px,50px);}
.a-btn {@include btn-style(120px,40px);}

例子 2:有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 ‘shadow’ 会被用到。

@mixin mybox-shadow($s...){
  box-shadow: $s;
}
.box {
  width: 100px;
  height: 100px;
  background-color: yellow;
  // 增加删除参数的数量
  @include mybox-shadow(0 0 20px 5px green);
}
  • 可以传递参数（可选）@include name(30px);也可以配合变量使用@include name($变量);
  • 接收形式参数需要@mixin name($x){样式列表}格式
  • 参数变量 @mixin name($x...){样式列表}

test-1

@mixin box-center($w,$h) {
  width: $w;
  height: $h;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -($h)/2;
  margin-left: -($w)/2;
}
.baba {
  width: 400px;
  height: 400px;
  background-color: red;
  .erzi {
    @include box-center(100px,200px);
    background-color: yellow;
  }
  & {position: relative;}
}

五、继承 ​

5.1 @extend ​

例子：

.btn {
  width: 150px;
  height: 50px;
  border-radius: 10px;
}
.btn1 {
  background-color: red;
  @extend .btn;
}
.btn2 {
  box-shadow: 5px 5px 5px black;
  @extend .btn1;
}

例子 2:其他选择器也可以继承比如 hover

.item:hover {
  background-color: rgb(125, 186, 255);
}
.list{
  li:hover {
    @extend .item:hover;
  }
}

例子 3:多重延伸

.btn {
  width: 150px;
  height: 50px;
  border-radius: 10px;
}
.text {
  font-size: 30px;
  color: #fff;
}
.btn1 {
  background-color: red;
  @extend .btn;
}
.btn2 {
  box-shadow: 5px 5px 5px black;
  @extend .btn1;
  @extend .text;
}
  • 在样式列表中使用@extend 需要继承的选择器
  • 延伸复杂的选择器,允许延伸任何的选择器,如:hover@extend .item:hover;
  • 可以多重延伸 @extend .btn1;@extend .text;

5.2 占位符选择器 % ​

SASS 额外提供了一种特殊类型的选择器：占位符选择器，与 id,class 选择器写法相似，只是 # 或 . 替换成了 %。但必须通过 @extend 指令调用 使用

例子：

%aBtn{
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0 #666;
}
.btn {
  width: 200px;
  height: 50px;
  background-color: red;
  @extend %aBtn;
}
  • 占位符选择器%name与 id,class 选择器写法相似，只是 # 或 . 替换成了 %
  • 必须通过 @extend 指令调用@extend %name;
  • 占位符选择器,在编译后的 CSS 文件中不会出现

六、运算 ​

6.1 插值语句 ​

之前创建变量是用于样式中的值，但是选择器的名字不能使用变量，但可以使用插值#{}包裹变量后使用，而且 使用 #{} 可以避免 SASS 运行运算表达式，比如/除号，有时候不是要除号而是需要斜杠

  • 通过 #{} 插值语句可以在选择器或属性名中使用变量
  • 使用 #{} 可以避免 SASS 运行运算表达式，直接编译 CSS,如border-radius: #{$a}/#{$b};使用插值 / 可以不看作除号

6.2 数字运算 ​

例子：

$a: 100px;
$b: 50px;
$c: 20px;
.box {
  width: $a + $b;
  height: 10px * 10;
  margin-top: $a - $b;
  margin-left: $a/2;
   //变量和变量但除法会报错
  background-color: red;
}
  • SASS 脚本支持数字的加减乘除、取整等运算 (+, -, *, /, %)
  • 计算方式可以是值直接计算，如：10px * 10 => 100px
  • 计算方式可以是变量计算，如：width: $a+$b;
  • 变量和变量但除法会报错
  • 加法遇到字符串会拼接，但字符串要在前半部分"acb"+20px
  • 运算符于值之间尽量加空格，以免被认为是变量的一部分

6.3 颜色值运算 ​

例子：

p {
  计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09
  color: #010203 + #040506;
}
p {
  //01 * 2 = 02 02 * 2 = 04 03 * 2 = 06
  color: #010203 * 2;
}
p {
  // color: rgba(255, 255, 0, 0.75);
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

七、控制指令 ​

7.1 if ​

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。 @if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，SASS 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

例子：

$w: 300px;
$h: 100px;
.box {
  width: $w;
  height: $h;
  background-color: red;
  @if $w==100px {
    border: 10px solid black;
  } @else if $w==200px {
     border: 10px dotted black;
  }@else {
    border: 10px double black;
  };
}
  • @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码
  • @if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明
  • 条件局限性很强，单个判断可以如:a = = 100px,a>=200px

7.2 for ​

【讲解】之前我们想写一个元素中包裹多个子 div，每个 div 都有自己的颜色时需要单独每个都给，比较麻烦 可以使用 SASS 中的 for 指令。 先写以一个需要自己写的包裹关系，ul>li*3 每个 li 颜色自己写

例子：

@for $i from 1 through 6 {
 .list2>li:nth-child(#{$i}) { background-color: #333*$i; }
}
  • @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动
  • @for $var from 起始值 through 结束值 ,起始值和结束值必须是整数值

八、函数 ​

8.1 自定义函数 ​

例子：

//全局变量
$o-width:300px;
@function my-width($o){
  //局部变量
  $j-width:100px;
  //返回值
  @return ($o - $j-width);
}
//使用指令的函数
@function shadow($x...){
  @if length($x) >=1 {
    @return $x;
  }
  @else {
    @return (10px 10px 10px 0 #666);
  }
}
.box {
  width: my-width($o-width);
  height: 200px;
  background-color: black;
  //没传参数，用默认效果
  box-shadow: shadow();
  //传参数就有自己的效果
  box-shadow: shadow(30px 30px 10px 0 green);
}
  • 与 mixin 相同，也可以传递若干个全局变量给函数作为参数。
  • 一个函数可以含有多条语句，需要调用 @return 输出结果
  • 在自定义函数前添加前缀避免命名冲突
  • 自定义函数与 mixin 相同，都支持 variable arguments
  • length($list) 返回一个列表的长度值，属于列表函数

8.2 字符串函数 ​

8.2.1 删除字符串中的引号 ​

例子：

.demo1 { content: unquote('Hello SASS') ; }//Hello SASS
.demo2 { content: unquote("Hello SASS"); }//Hello SASS
  • 不管是双引号还是单引号包裹的字符串，引号皆被去掉；
  • 只能删除字符串最前边和最后边的引号，没法去掉中间的引号； #### (2)给字符串添加引号 例子：
.demo1 { content: unquote('Hello SASS');}//"Hello SASS"
.demo2 { content: unquote(HelloSASS);}//"HelloSASS"
  • 若字符串本身带有引号，就不添加；
  • 若字符串带有单引号，则跟换为双引号；

8.3 数字函数 ​

8.3.1 转换成百分比 ​

  • percentage($value) 将不带单位的数转换成百分比值
  • 也可以使用算式计算出结构再转为百分比

例子：

.demo {
  width : percentage(0.2);//20%
  height: percentage(2px / 10px);//20%
}

8.3.2 四舍五入 ​

  • round()将数值四舍五入，转换成一个最接近的整数
  • 两边单位不统一会报错
  • 可以使用算式计算结果够取整，以及百分比取整
  • 带单位 px 取整结果，单位被去掉
.demo {
  // 四舍五入，两边单位不统一会报错
  width: round(12.3px); //12px;
  height: round(2px / 3px);//1
  margin: round(2.2%);//2%
}

8.3.3 向上取整 ​

  • ceil($value) 向上取整
  • 可以使用算式计算结果够取整，以及百分比取整
  • 带单位 px 取整结果，单位被去掉
.demo {
  width: ceil(2.3px);//3px;
  height: ceil(2px / 3px);//1
  margin: ceil(2.8%);//3%
}

8.3.4 向下取整 ​

  • floor($value)向下取整
  • 可以使用算式计算结果够取整，以及百分比取整
  • 带单位 px 取整结果，单位被去掉
.demo {
  width: floor(2.3px);//2px
  height: floor(2px / 3px);//0
  margin: floor(2.8%);//2%;
}

8.3.5 最小值和最大值 ​

  • min($numbers…)找出几个数值之间的最小值
  • max($numbers…)找出几个数值之间的最大值
.demo {
  width: max(100px,200px);//200px
  height: min(50px,100px); //50px
}

8.3.6 随机数 ​

  • random()获取随机数
  • random($limit: 100)获取多少范围的整数
  • 随机数为无单位数字，若需要单位如：unquote(random($limit: 100)+“px”)
  • 看效果刷新页面无效，需要改变 SASS，才能重新编译

8.4 颜色函数 ​

8.4.1 rgb 和 rgba ​

【讲解】在 sCSS 中写的 rgb(255,10,210)会转为十六禁止，将十六进制放进 rgba 在加一个透明度会变味 rgba 颜色

例子：

//在sCSS中写的rgb(255,10,210)会转为十六禁止，将十六进制放进rgba在加一个透明度会变味rgba颜色
.color {
  background-color: rgb(255,10,210);
  color: rgba(#f9a4a2,0.4);
}
//在CSS文件中
.color {
  background-color: #ff0ad2;
  color: rgba(249, 164, 162, 0.4); }
  • 使用rgb()将颜色转为十六进制
  • 使用rgba()将十六进制转为rgba()颜色

8.4.2 hsl ​

hsl 和 hsla 在 CSS3 中也可以直接写，它代表饱和度，他分别代表，色相，饱和度，明度。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100%的数值。 明度（V），亮度（L），取 0-100%。 【ps】用 ps 选 hsl 颜色，可以用于选区网站系列色

  • hsl(色相,饱和度,亮度)转为十六进制颜色
  • H 色相：取值为：0 - 360，0 或 360 ～ 120 表示红色，120 ～ 240 表示绿色，240 ～ 360 表示蓝色
  • S 饱和度：取值为：0.0% - 100.0%
  • L 亮度：取值为：0.0% - 100.0%