Vue进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus_scss stylus(2)

本文链接：https://blog.youkuaiyun.com/2401_84619287/article/details/138962279

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在这里插入图片描述

nav{
  color: #000;
  font-size: 16px;
}
nav a{
  color: #0000cc;
  font-size: 18px; 
}
nav a.first{
 color:red
}

/\*Scss、less、Stylus的嵌套,伪类嵌套都是使用&\*/
nav {
  color: #000;
  font-size: 16px;
  a {
    color: #0000cc;
    font-size: 18px;
    &.first {
      color: red;
    }
  }
}

/\*Stylus的嵌套还可以这样写\*/
nav 
  color #000
  font-size 16px
  a 
    color #0000cc
    font-size 18px
    &.first 
      color red

六、Mixin混合

Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。

平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

CSS预编译工具允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上。如：

/\*Scss、less混合语法\*/
.circle{
  border-radius: 100%;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  .circle
}
.big-circle{
  width: 100px;
  height: 100px;
  .circle
}
/\*Stylus Mixin混合语法\*/
circle{
  border-radius: 100%;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  circle
}
.big-circle{
  width: 100px;
  height: 100px;
  circle
}

6.1 混入可以传递参数

/\* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle
 \*/
.circle($radius){
  border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  .circle(5px)
}

6.2 混入可带默认值

/\* 这是scss样例
1. 改成less,只需要变$为@
2. 改成Stylus,只需要.circle变为circle，：改为=
 \*/
.circle($radius:5px){
  border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  .circle
}
/\* 这是Stylus样例 \*/
circle($radius=5px){
  border-radius: $radius;
  background: #ccc;
}
.small-circle{
  width: 50px;
  height: 50px;
  circle
}

七、运算

/\* 这是Scss样例 \*/
$test:300px;
.test\_01{
  width: $test  +  20px;//
  height: $test*2 ;
  color: #ccc - 10;
}

/\* 这是Less样例 \*/
@test:300px;
.test\_01{
  width: @test + 20px;//
  height: @test\*2 ;
  color: #ccc - 10;
}

/\* 这是Stylus样例 \*/
test=300px
.test\_01{
  width: test  +  20px;//
  height: test*2 ;
  color: #ccc - 10;
}

八、作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。

8.1 Sass 作用域

Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：

/\*Sass样式\*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

先看转译出来的CSS样式：

.scoped {
  color:white;/\*是白色\*/
  background-color:blue;
}
.unscoped {
  color:white;/\*白色（无全局变量概念）\*/
}

示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

8.2 LESS 作用域

LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

/\*LESS样式\*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

转译出来的CSS样式：

.scoped {
  color:white;/\*白色（调用了局部变量）\*/
  background-color:blue;
}
.unscoped {
  color:black;/\*黑色（调用了全局变量）\*/
}

8.3 Stylus 作用域

Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局部变量。会向上冒泡查找，直到根为止。

九、函数

Sass、Less和Stylus都提供了丰富的内置函数，Stylus更允许自定义函数，使用的时候自行查询吧。

十、导入

几种CSS预编译语言的导入语法是相同的。与css3的@import看起来写法也相同，但css3的@import会引起异步加载。并不是我们期望的。

CSS预编译器 @import解决了这个问题，它能将多个样式文件合并为一个，本质上是方便前端管理代码，并不会异步加载。

@import 'reset.scss' //scss中导入样式
@import "reset";      // less导入默认导入为less文件
@import "reset.css"  // Stylus导入默认导入为css文件

十一、循环语句

Sass（Scss），Stylus支持循环语句

十二、分支语句

Sass（Scss），Stylus支持条件语句

十三、拓展阅读

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总