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

最新推荐文章于 2024-06-18 23:19:05 发布

2401_84619245

最新推荐文章于 2024-06-18 23:19:05 发布

阅读量273

点赞数 4

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

本文链接：https://blog.csdn.net/2401_84619245/article/details/138962161

版权

程序员专栏收录该内容

98 篇文章 0 订阅

订阅专栏

对象篇

模块化编程-自研模块加载器

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

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

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

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

五、颜色函数

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

5.1 Sass 颜色函数

lighten($color, 10%); /\* 返回的颜色在$color基础上变亮10% \*/
darken($color, 10%);  /\* 返回的颜色在$color基础上变暗10% \*/
saturate($color, 10%);   /\* 返回的颜色在$color基础上饱和度增加10% \*/
desaturate($color, 10%); /\* 返回的颜色在$color基础上饱和度减少10% \*/
grayscale($color);  /\* 返回$color的灰度色\*/
complement($color); /\* 返回$color的补色 \*/
invert($color);     /\* 返回$color的反相色 \*/
mix($color1, $color2, 50%); /\* $color1 和 $color2 的 50% 混合色\*/

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

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

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($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 <start> through <end> {语句块}

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

@for $i from 1 through 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 <list>{语句块}

来看个简单的实例：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

转译出来的CSS

.puma-icon {  background-image: url('/images/puma.png'); }
.sea-slug-icon {  background-image: url('/images/sea-slug.png'); }
.egret-icon {  background-image: url('/images/egret.png'); }
.salamander-icon {  background-image: url('/images/salamander.png')	}

@while循环使用和其他编程语言类似：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

转译出来的CSS

.item-6 {  width: 12em; }
.item-4 {  width: 8em; }
.item-2 {  width: 4em; }

8.2.2 Stylus 循环语句

在Stylus样式中通过for/in对表达式进行循环，形式如下：

for <val-name> [, <key-name>] in <expression>

例如：

body
  for num in 1 2 3
    foo num

转译出来CSS



**对象篇**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWIxMTdmNzMyNDJlZjAyMDM?x-oss-process=image/format,png)

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWU5ZGY5NGRhODZhZGZjNjY?x-oss-process=image/format,png)

**模块化编程-自研模块加载器**



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWUyNWEzOGRhNTU1NTBmOGY?x-oss-process=image/format,png)

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

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LTQ5MGM2MTlhOTI5YjY3Y2U?x-oss-process=image/format,png)

2401_84619245

关注

4
点赞
踩
3

收藏

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

在数字运算上要比LESS更专业，他可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。
复制链接

扫一扫