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

最新推荐文章于 2024-09-28 19:02:04 发布

2401_84619287

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量330

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619287/article/details/138962309

版权

程序员专栏收录该内容

98 篇文章 0 订阅

订阅专栏

JavaScript

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
JS代码调试
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
运算
导入 (Import)
函数

三、语法

CSS预编译语言的语法都非常简单，如果你的编辑器给力的话，file watching会自动找出语法错误。

语法上Sass3、Scss和Less非常相似，旧版Sass和Stylus特殊一些，旧版Sass我们就了解一下，Stylus的语法更加灵活一些,功能也更强大一些。

例如
1、Sass

/\*旧版sass语法\*/
h1
  color: #000
  font-size: 24px

2、SCSS

/\*scss语法\*/
h1{
  color: #000;
  font-size: 24px;
}

3、LESS

/\*less语法\*/
h1{
  color: #000;
  font-size: 24px;
}

4、Stylus

/\*Stylus语法的多样式\*/
h1{
  color: #000;
  font-size: 24px;
}
h1
  color: #000
  font-size: 24px
h1
  color #fff
  font-size 24px

四、变量

/\* 1、Scss的变量必须是$开始\*/
$mainColor: #000;
h1{
  color: $mainColor;
}

/\* 2、Less 的变量名使用 @ 符号开始\*/
@mainColor: #000;
h1{
  color: @mainColor;
}

/\* 4、Stylus 的变量名不要用 @ 开头， =赋值 \*/
mainColor = #000;
h1{
  color: mainColor;
}

五、嵌套

如果你需要在CSS中相同的parent引用多个元素，你需要一遍一遍的去写parent。用CSS预处理器，就可以少些很多单词，而且父节点关系一目了然。

下面将不再介绍老版sass的写法，直接介绍scss写法。

同样生成

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;


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。