Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性_stylus sass(1)

2301_82244279

于 2024-05-16 15:05:43 发布

阅读量398

点赞数 5

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

本文链接：https://blog.csdn.net/2301_82244279/article/details/138962130

版权

程序员专栏收录该内容

112 篇文章 0 订阅

订阅专栏

Vue

什么是MVVM？
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
组件之间的传值？
Vue 双向绑定原理
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
虚拟 DOM 实现原理
Vue 中 key 值的作用？
Vue 的生命周期
Vue 组件间通信有哪些方式?
vue 中怎么重置 data?
组件中写 name 选项有什么作用？
Vue 的 nextTick 的原理是什么？
Vuex 有哪几种属性?

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

border: 1px solid #eee
}
ul,ol {
color:#333;
text-transform:uppercase;
}


#### 3.2 LESS继承


`LESS`支持的继承和`Sass`与`Stylus`不一样，他不是在选择器上继承，而是将`Mixins`中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
ul,ol {
.block; /*继承.block选择器下所有样式*/
color: #333;
text-transform: uppercase;
}


转译出来的`CSS`代码：

.block {
margin: 10px 5px;
padding:2px;
}
p {
margin: 10px 5px;
padding:2px;
border: 1px solid #eee
}
ul,ol {
margin: 10px 5px;
padding:2px;
color:#333;
text-transform:uppercase;
}


正如所看到的，上面的代码“`.block`”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。


### 四、运算符（Operations）


`CSS预处理器`语言还具有运算的特性，其简单的讲，就是对数值型的`Value`（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在`CSS`样式中是想都不敢想的，但在`CSS预处理器`语言中对样式做一些运算一点问题都没有了，例如：

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;


上面代码是`LESS`的运算示例，声明一下，在取得“`@quarter_page`”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”。在复合型运算中，小括号也是很有必要的，例如：

border: (@width / 2) solid #000;


`Sass`在数字运算上要比`LESS`更专业，他可以直接换算单位了。`Sass`可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明`W3C`作出的一些改变。


`Stylus`的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。


### 五、颜色函数


颜色函数是`CSS预处理器`语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。


#### 5.1 Sass 颜色函数

lighten( $/\* 返回的颜色在$ color基础上变亮10% */
darken( $/\* 返回的颜色在$ color基础上变暗10% */
saturate( $/\* 返回的颜色在$ color基础上饱和度增加10% */
desaturate( $/\* 返回的颜色在$ color基础上饱和度减少10% */
grayscale( $KaTeX parse error: Undefined control sequence: \* at position 11: color); /\̲*̲ 返回$ color的灰度色*/
complement( $KaTeX parse error: Undefined control sequence: \* at position 10: color); /\̲*̲ 返回$ color的补色 */
invert( $KaTeX parse error: Undefined control sequence: \* at position 14: color); /\̲*̲ 返回$ color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/


这只是`Sass`中颜色函数的一个简单列表，更多详细的介绍可以阅读`Sass文档`。


颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：

$color: #0982C1;
h1 {
background: $co l or; b or d er : 3 p x so l i dd a r k e n ($ color, 50%);/*边框颜色在$color的基础上变暗50%*/
}


#### 5.2 LESS 颜色函数

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%); /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%); /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10); /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */


`LESS`的完整颜色函数功能，请阅读`LESS文档`。


下面是`LESS`中如何使用一个颜色函数的简单例子：

@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}


#### 5.3 Stylus 颜色函数

lighten(color, 10%); /* 返回的颜色在’color’基础上变亮10% */
darken(color, 10%); /* 返回的颜色在’color’基础上变暗10% */
saturate(color, 10%); /* 返回的颜色在’color’基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在’color’基础上饱和度降低10% */


有关于`Stylus`的颜色函数介绍，请阅读`Stylus文档`。


下面是`Stylus`颜色函数的一个简单实例：

color = #0982C1
h1
background color
border 3px solid darken(color, 50%)


从上面展示的部分颜色函数可以告诉我们，`Sass`、`LESS`和`Stylus`都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。


### 六、导入（Import）


在`CSS`中，并不喜欢用`@import`来导入样式，因为这样的做法会增加`http`的请求。但是在`CSS预处理器`中的导入(`@import`)规则和`CSS`的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个`CSS`文件。


如果你是通过“`@import ‘file.css`’”导入“`file.css`”样式文件，那效果跟普通`CSS`导入样式文件一样。


**注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。**


`Sass`、`LESS`和`Stylus`三款`CSS预处理器`语言，导入样式的方法都是一样：


被导入文件的样式：

/* file.{type} */
body {
background: #EEE;
}


需要导入样式的文件：

@import “reset.css”;
@import “file.{type}”;
p {
background: #0982C1;
}


转译出来的CSS代码：

@import “reset.css”;
body {
background: #EEE;
}
p {
background: #0982C1;
}


### 七、注释（Comment）


`CSS预处理器`语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的`CSS`注释之外，还具有单行注释，只不过单行注释不会被转译出来。


#### 7.1 Sass、LESS和Stylus多行注释


多行注释和`CSS`的标准注释，他们可以输出到`CSS`样式中，但在`Stylus`转译时，只有在“`compress`”选项未启用的时候才会被输出来。

/*
*我是注释
*/
body
padding 5px


#### 7.2 Sass、LESS和Stylus单行注释


单行注释跟`JavaScript`语言中的注释一样，使用双斜杠（`//`），但单行注释不会输出到`CSS`中。

//我是注释
@mainColor：#369;//定义主体颜色


在`Stylus`中除了以上两种注释之外，他还有一种注释，叫作**多行缓冲注释**。这种注释跟多行注释类似，不同之处在于始的时候，这里是”`/*！`”。这个相当于告诉`Stylus`压缩的时候这段无视直接输出。

/*!
*给定数值合体
*/
add(a, b)
a + b


上面从九个常用的特性对`Sass`、`LESS`和`Stylus`三款`CSS预处理器`语言的使用做了对比，在某些特性上可以说是一模一样，而有一些特性上功能其实一样，只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里主要是从使用方法上做为一个比较，主要目的是让大家经过对比之后，使自己选择哪一款`CSS预处理器`语言有所方向和帮助。


### 八、CSS预处理器的高级应用


我们知道，`Sass`、`LESS`和`Stylus`都具有变量、混合、嵌套、函数和作用域等特性，但这些特性都是一些普通的特性。其实除了这些特性之外，他们还拥有一些很有趣的特性有助于我们的开发，例如条件语句、循环语句等。接下来，我们同样从使用上来对比一下这三款`CSS预处理器`语言在这方面应用又有何不同异同。


#### 8.1 条件语句


说到编程，对于编程基本控制流，大家并不会感到陌生，除了循环就是条件了。条件提供了语言的可控制，否则就是纯粹的静态语言。提供的条件有导入、混合、函数以及更多。在编程语言中常见的条件语句：

if/else if/else


`if`表达式满足（`true`）的时候执行后面语句块，否则，继续后面的`else if`或`else`。


在这三款`CSS3预处理器`语言中都具有这种思想，只不过`LESS`中表达的方式略有不同，接下来我们依次看看他们具体如何使用。


##### 8.1.1 Sass 条件语句


`Sass`样式中的条件语句和其他编程语言的条件语句非常相似，在样式中可以使用“`@if`”来进行判断：

p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}


编译出来的CSS：

p {
border: 1px solid;
}


在`Sass`中条件语句还可以和`@else if`、`@else`配套使用：

$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}


转译出来的`CSS`：

p {color:green;}


##### 8.1.2 Stylus 条件语句


`Stylus`条件语句的使用和其他编程语言的条件语句使用基本类似，不同的是他可以在样式省略大括号（`｛｝`）：

box(x, y, margin = false)
padding y x
if margin
margin y x
body
box(5px, 10px, true)


`Stylus`同样可以和`else if`、`else`配套使用：

box(x, y, margin-only = false)
if margin-only
margin y x
else
padding y x


`Stylus`除了这种简单的条件语句应用之外，他还支持后缀条件语句。这就意味着`if`和`unless`（熟悉Ruby程序语言的用户应该都知道unless条件，其基本上与if相反，本质上是“`(!(expr))`”）当作操作符；当右边表达式为真的时候执行左边的操作对象。


例如，我们定义了`negative()`来执行一些基本的检查。下面我们使用块式条件：

negative(n)
unless n is a ‘unit’
error(‘无效数值’)
if n < 0
yes
else
no


接下来，我们利用后缀条件让我们的方法简洁：

negative(n)
error(‘无效数值’) unless n is a ‘unit’
return yes if n < 0
no


当然，我们可以更进一步。如这个“`n < 0 ? yes : no`”可以用布尔代替：“`n < 0`”。后缀条件适合于大多数的单行语句。如“`@import,@charset`”混合书写等。当然，下面所示的属性也是可以的：

pad(types = margin padding, n = 5px)
padding unit(n, px) if padding in types
margin unit(n, px) if margin in types

body
pad()

body
pad(margin)

body
apply-mixins = true
pad(padding, 10) if apply-mixins


上面代码转译出来的`CSS`：

body {
padding: 5px;
margin: 5px;
}
body {
margin: 5px;
}
body {
padding: 10px;
}


##### 8.1.3 LESS 条件语句


`LESS`的条件语句使用有些另类，他不是我们常见的关键词`if`和`else if`之类，其实现方式是利用关键词“`when`”。

.mixin (@a) when (@a >= 10) {
background-color: black;
}
.mixin (@a) when (@a < 10) {
background-color: white;
}
.class1 { .mixin(12) }
.class2 { .mixin(6) }


转译出来的`CSS`：

.class1 {
background-color: black;
}
.class2 {
background-color: white;
}


利用`When`以及`<、>、=、<=、>=`是十分简单和方便的。`LESS`并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如：`iscolor`、`isnumber`、`isstring`、`iskeyword`、`isurl`等等。

.mixin (@a) when (iscolor(@a)) {
background-color: black;
}
.mixin (@a) when (isnumber(@a)) {
background-color: white;
}
.class1 { .mixin(red) }
.class2 { .mixin(6) }


转译出来的CSS

.class1 {
background-color: black;
}
.class2 {
background-color: white;
}


另外，`LESS`的条件表达式同样支持`AND`和`OR`以及`NOT`来组合条件表达式，这样可以组织成更为强大的条件表达式。需要特别指出的一点是，`OR`在`LESS`中并不是`or`关键词，而是用,来表示`or`的逻辑关系。

.smaller (@a, @b) when (@a > @b) {
background-color: black;
}
.math (@a) when (@a > 10) and (@a < 20) {
background-color: red;
}
.math (@a) when (@a < 10)，(@a > 20) {
background-color: blue;
}
.math (@a) when not (@a = 10) {
background-color: yellow;
}
.math (@a) when (@a = 10) {
background-color: green;
}

.testSmall {.smaller(30, 10) }
.testMath1 {.math(15)}
.testMath2 {.math(7)}
.testMath3 {.math(10)}


转译出来的CSS

.testSmall {
background-color: black;
}
.testMath1 {
background-color: red;
background-color: yellow;
}
.testMath2 {
background-color: blue;
background-color: yellow;
}
.testMath3 {
background-color: green;
}


#### 8.2 循环语句


`Sass`和`Stylus`还支持`for`循环语句，而`LESS`并没支持`for`循环语句，但值得庆幸的是，在`LESS`中可以使用`When`来模拟出`for`循环的特性。


##### 8.2.1 Sass 循环语句


`Sass`中使用`for`循环语句需要使用`@for`，并且配合“`from`”和“`through`”一起使用，其基本语法：

@for $var from through {语句块}


我们来看一个简单的例子：

@for $KaTeX parse error: Expected '}', got '#' at position 30: \dotsgh 3 { .item-#̲{$ i} { width: 2em * $i; }
}


转译出来的CSS代码：

.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }


在`Sass`中循环语句除了`@for`语句之外，还有`@each`语句和`@while`语句


`@each`循环语法：

@each $var in {语句块}




**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

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

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

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

2301_82244279

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性_stylus sass(1)

* 返回的颜色在@color基础上饱和度增加10% *//* 返回的颜色在’color’基础上饱和度增加10% *//* 返回的颜色在’color’基础上饱和度降低10% *//* 返回的颜色在@color基础上饱和度降低10%*//* 返回的颜色在@color基础上变亮10% *//* 返回的颜色在’color’基础上变亮10% *//* 返回的颜色在’color’基础上变暗10% *//* 返回的颜色在@color基础上变暗10%*//* 返回的颜色在@color基础上色调增加10 */
复制链接

扫一扫

专栏目录