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

2401_84411522

已于 2024-05-08 18:57:54 修改

阅读量730

点赞数 21

分类专栏：程序员文章标签： css vue.js sass

于 2024-05-08 18:57:53 首次发布

本文链接：https://blog.csdn.net/2401_84411522/article/details/138582727

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer，也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

}
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样例

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


#### 6.2 混入可带默认值

/* 这是scss样例

改成less,只需要变$为@
改成Stylus,只需要.circle变为circle，：改为=
*/
.circle($radius:5px){
border-radius: $KaTeX parse error: Expected 'EOF', got '#' at position 21: \dotss; background: #̲ccc; } .small-c\dots$ 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: $co l or; ba c k g ro u n d - co l or :$ 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`支持条件语句


### 十三、拓展阅读


* [Sass官网](https://bbs.csdn.net/topics/618166371)
* [LESS官网](https://bbs.csdn.net/topics/618166371)
* [Stylus官网](https://bbs.csdn.net/topics/618166371)
* 《[Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（幺柒柒）：Vue应用Sass、Scss、Less和Stylus](https://bbs.csdn.net/topics/618166371)》




## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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