11day-nvm、node、sass安装、sass写法

安装nvm

前提条件：如果电脑已经安装过node，需要先卸载

卸载node

打开控制面板–程序与功能–搜索node–右键卸载
为了保证卸载的干净，c:\user\用户名 查看有没有 .npmrc或者yarnrc这些文件，有的话就删掉
到环境变量查看是否存在与node相关的环境变量 删除

window + r — cmd — node -v — npm -v

安装nvm

找到nvm安装路径 -》settings.txt文件 -》 配置下载源

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

通过nvm安装node

安装指定版本的node

nvm install 14.18.0

# 查看所有可下载的node版本
nvm list available

使用下载的node版本

nvm use 14.18.0

通过 node-v npm -v

查看以安装的所有node版本

nvm list

通过nvm安装8版本以上的node 不会自动安装npm
所以可以通过去官网下载指定版本的zip文件，之后将它解压到nvm的文件中
将文件名称改为对应下载的版本号即可。

sass安装

通过npm下载

npm install -g sass

---

---

sass

scss其实和sass是一样的，只不过scss是sass的第三代语法。

在学习css过程中我们清除的发现，css如它的概念一样；并不是一门编程语言。在书写样式的过程中，没有涉及到变量、条件语句、函数等等。这就导致在实现某些重复度较高的样式时，仍然需要一行行单纯的去描述，这是一件很繁琐的事情。
于是，就有人开始为css加入一些编程元素，这些工具被叫做css预处理器。

它的基本思想是用一种专门的编程语言，进行网页样式的开发，然后在编译成正常的css文件。

文件编译

一般直接进入到项目的根目录，然后开启终端来启动编译，分为单文件编译和多文件编译

单文件编译

sass --watch index.scss:index.css

该命令的意思是，sass会自动监听当前文件夹下的index.scss，并自动编译为index.css，然后将编译完的文件保存在当前目录下

也可以以下这种写法

sass --watch scss/index.scss:css/index.css

以上命令的意思是，将scss文件夹下的index.scss文件编译到css文件夹下的index.css中。

多文件编译

sass --watch scss:css

将当前目录下的scss文件夹中所有的scss文件编程到css文件夹下并生成css文件。

导入其他的样式文件

在开发过程中，多个页面之间可能存在重复的样式代码片段，这时可以将它单独抽离出来作为一个公共的样式文件。之后通过@import ‘文件名’;引入到需要的页面样式文件中即可。

@import './reset.scss';

忽略编译（局部文件）

xxxxxxxxxx1 1npm install -g sassbase

语法：在需要忽略编译的文件名称前加上一个下划线 _。

scss五大基础语法

scss嵌套规则（语法规则）

在scss中允许我们在书写样式时，可以像写结构一样进行嵌套

示例：
有如下结构

<div class="wrap">
      <header>
        <nav>
          <div class="logo">
            <img src="../day10/作业/images/logo.png" alt="">
          </div>
          <ul>
            <li>集团简介</li>
            <li>集团简介</li>
            <li>集团简介</li>
            <li>集团简介</li>
            <li>集团简介</li>
          </ul>
        </nav>
      </header>
    </div>

css样式写法

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

a {
  color: #000;
}

.wrap {
  width: 100%;
}
.wrap header nav {
  display: flex;
  background-color: #f9f9f9;
  height: 70px;
  align-items: center;
}
.wrap header nav .logo {
  height: 50px;
  padding: 0 40px;
}
.wrap header nav .logo img {
  height: 100%;
  display: block;
}
.wrap header nav ul {
  display: flex;
}
.wrap header nav ul li {
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  line-height: 70px;
  padding: 0 20px;
  border-right: 1px solid #000;
}
.wrap header nav ul li:hover {
  background-color: red;
}

scss写法

@import "./reset.scss";

.wrap {
  width: 100%;
  header{
    nav{
      display: flex;
      background-color: #f9f9f9;
      height: 70px;
      align-items: center;
      .logo{
        height: 50px;
        padding: 0 40px;
        img{
          height: 100%;
          display: block;
        }
      }
      ul{
        display: flex;
        li{
          font: {
            size: 20px;
            weight:900;
            style:italic;
          };
          line-height: 70px;
          padding: 0 20px;
          border-right: 1px solid #000;
          // font-size: 20px;
          // font-weight: 900;
          // font-style: italic;


          &:hover{
            background-color: red;
          }
        }
      }
    }
  }
}

父选择器 &

在scss嵌套规则中，在花括号内书写表示选择到当前的元素为其设置样式

li{
          font: {
            size: 20px;
            weight:900;
            style:italic;
          };
          line-height: 70px;
          padding: 0 20px;
          border-right: 1px solid #000;
          &:hover{
            background-color: red;
          }
        }

样式属性嵌套

前提条件：有相同的属性前缀

li{
  font: {
    size: 20px;
    weight:900;
    style:italic;
  };
}

等价于

li{
  font-size:20px;
  font-style:italic;
  font-weight:900;
}

变量声明

作用：将一段高复用（例如十六进制颜色值或rgb颜色值等等或全局的统一字体）样式以一个变量名的方式存储起来。之后在scss中使用变量名即可调用对应的样式值。

基础语法：

$变量名:变量值

使用

$kernColor:#000;

        li{
          font: {
            size: 20px;
            weight:900;
            style:italic;
          };
          line-height: 70px;
          padding: 0 20px;
          border-right: 1px solid #000;
          &:hover{
            background-color: $kernColor;
          }
        }

全局变量、局部变量

• 全局变量：在最外层元素外面定义的变量就是全局变量
• 局部变量：在元素内部声明的变量就是局部变量

继承 @extend

作用：当有一段代码片段被大量重复使用，就可以通过@extend来继承使用，减少冗余代码。

它允许一个选择器继承另一个选择器的样式（不可以继承子代元素的样式）

{
  @extend 选择器名;
}

% 占位符

用于定义公共的被继承样式代码片段
特点：不被@extend调用就不会被编译，且不用担心于页面中的类名发生冲突。

%common {
    width: 100px;
    height: 200px;
    background-color: blueviolet;
  }

          .son2 {
            // background-color: red;
            @extend %common;
          }

mixin 混合器

基础语法：

// 通过@mixin定义代码块
@mixin gcolor{
  color:red;
  background:pink;
}

// 使用
// 通过@include 调用声明的代码块

button{
  @include gcolor;
}

向混合器传递参数

// 通过@mixin定义代码块

// 定义在@mixin这里的两个变量，我们叫做形参（形式参数），形式参数并没有具体的值，也就两个空变量
@mixin gcolor($c,$bgc){
  color:$c; // 所以现在我的color值为 $c 就是两个普通的字符没有东西
  background:$bgc;
}

// 使用
// 通过@include 调用声明的代码块

button{
  // 定义在@include小括号里的值，我们叫做实参（实际参数），这两个实际参数会按顺序 给到形式参数上，也就是让上面两个空变量拥有了值
  @include gcolor(red,pink);
}

// 需要注意，此时调用这个混合器，必须传递对应的参数过去，否则将会报错，传递的顺序与定义时一致。

还可以为形式参数定义默认值

// 通过@mixin定义代码块
// 此时为两个形式参数设置了默认的拥有值
@mixin gcolor($c:red,$bgc:pink){
  color:red;
  background:pink;
}

// 使用
// 通过@include 调用声明的代码块

button{
  // 此时调用这个混合器的时候可以不传递参数，也可以传递参数，如果不传递，那么参数的值将会值默认值，如果传递，则应用传递进去的值

  // 不传递
  @include gcolor;
  // 传递
  @include gcolor(green,skyblue);
}

还可以传入指定的对应值

// 通过@mixin定义代码块
@mixin gcolor($c:red,$bgc:pink){
  color:red;
  background:pink;
}

// 使用
// 通过@include 调用声明的代码块

button{
  // 此时，我不想改变文字颜色，只改变背景颜色
  // 通过指定形参的名字给到它对应的值，另一个则可以不传递（前提是形参有默认值，否则将会报错）。
  // 1、不用考虑传递顺序 2、不用担心漏掉参数
  @include gcolor($bgc:skyblue);
}

向混合器传递样式片段

// 定义
// 在定义mixin代码块时，可以在代码块内部添加 @content，之后在调用这个代码块时，传入对应的样式片段，传入的样式片段就会替代@content，出现在对应的位置
  @mixin gcolor($c:red,$bgc:pink) {
    color: $c;
    background: $bgc;
    @content;
  }

      .btn2{
      @include gcolor($bgc:skyblue){
        border: none;
        width: 400px;
        height: 50px;
        border-radius: 50px;
        font-size: 20px;
      };
    }

// 经过混合后，最终的css样式代码如下

.wrap header .btn2 {
  color: red;
  background: skyblue;
  border: none;
  width: 400px;
  height: 50px;
  border-radius: 50px;
  font-size: 20px;
}

自定义函数

允许用户自己编写自定义函数，可以将一些需要计算的值传递进去，然后经过运算后返回出一个结果值。

基础语法：

// 通过 @function 来声明一个函数 然后为这个函数自定义一个名称，再然后在小括号中写上自定义参数（形参），最后在函数内部通过 @return 来返回结果值
// 定义
@function sum($num1,$num2){
  @return $num1 + $num2;
}

// 使用
p{
  width:sum(10px,30px)
}