CSS预编译器

零.CSS预编译器

CSS预处理器是指对生成CSS前的某一语法的处理。CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用

CSS预处理器为CSS增加一些编程的特性,如增加了规则、变量、混入、选择器、继承等等特性,无需考虑游览器的兼容性问题

 有助于更好地组织管理样式文件,以及更高效地开发项目

下面介绍主流的CSS预编译器三剑客:

一. CSS预编译器三剑客(Sass、Less、Stylus)

  SassSass包括两套语法。最开始的语法叫做”缩进语法”,使用缩进来区分代码块,并且用回车将不同规则分隔开(不使用{}和;)。

  而新的语法叫做“SCSS”,使用和CSS类似的块语法,使用大括号将不同的规则分开,分号将具体的样式分开。这两套语法通过.sass和.scss两个文件扩展名区分开

  1.使用:

    通过VSCode安装Live Sass Compiler插件等方法…

  2.CSS功能扩展:

2.1:嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

嵌套功能避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理,编译后:

#main {
  width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
      font-weight: bold; 
}
#main pre {
    font-size: 3em; 
}

2.2:父选择器&

在使用2.1嵌套规则时,有时也需要使用嵌套外层的父选择器,例如,给某个元素设定hover样式时

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译后:CSS 文件中&将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
    text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

#main {
  color: black; 
}
#main a {
    font-weight: bold; 
}
#main a:hover {
      color: red; 
}

2.3:属性嵌套

个别 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

  编译为:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

2.4:变量$

Sass最普遍的用法就是变量,以$开头,复制与css属性写法一样,直接调用即可 

$width: 100px


#main {
  width: $width;
}

变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用

(全局变量)

将局部变量转换为全局变量可以添加 !global 声明:

#main {
  $width: 5em !global;//局部变量转全局变量
  width: $width;
}

#sidebar {
  width: $width;
} 

编译为:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

2.5:运算

所有数据类型均支持 == 或 != ,此外,每种数据类型也有各自支持的运算方式

目前感觉这个运算用处不大,但今后遇到某个项目也可能会用到

2.6:@-Rules与指令

2.6.1:Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件,被导入的文件将合并编译到同一个 CSS 文件中,

另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import "foo.scss";

@import "foo";

都会导入文件foo.scss

如果需要导入SCSS或者Sass文件,但不希望编译成CSS文件,在文件名前添加下划线即可

例如,将文件命名为 _colors.scss,便不会编译成_colors.css 文件。

2.6.2:Sass 中 @media 指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套

如果 @media 嵌套在 CSS 规则内,编译时, @media 将被编译到文件的最外层,包含嵌套的父选择器

这个功能让 @media 用起来更方便,不需要重复使用选择器,也不会打乱 CSS 的书写流程

@media 可以使用 Sass(比如变量,函数,以及运算符)代替条件的名称或者值:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为:

.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    } 
}

2.6.3:@extend ,告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。 

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
} 

2.7:Mixin

Mixin用于定义可重复使用的样式,避免了使用无语意的 class,比如.float-left

混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式

混合样式中也可以包含其他混合样式

2.7.1:定义Mixin 

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

2.7.2:引用Mixin

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

2.7.3:Mixin参数 

@mixin sexy-border($color, $width:10px) { //默认值
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译后

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

@Mixin 可以用 = 表示,而 @include 可以用 + 表示

2.8:函数

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
#sidebar {width: 240px; } //编译结果

Less:Less是一门向后兼容的CSS扩展语言,语法上和Sass有很大的共性,它受Sass的影响,但对后来引入的SCSS格式有影响

Stylus:在 stylus 中同样可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,使用时需要Node.js

基本使用:

$background-color = lightblue
add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

编译后

.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

PostCSS一个用 JavaScript 工具和插件转换 CSS 代码的工具

特点:

    • 增加代码的可读性:可自动添加属性前缀
    • 可使用最新的CSS语法,如变量定义
    • 可模块化CSS,CSS Modules
    • 可检查CSS语法错误,避免出错
    • 强大的格子系统LostGrid

二.异同点

Less与Sass的异同

  异:

    • 混入(Mixins)——class中的class
    • 参数混入——可以传递参数的class,就像函数一样
    • 嵌套规则——Class中嵌套class,从而减少重复的代码
    • 运算——CSS中用上数学
    • 颜色功能——可以编辑颜色
    • 名字空间(namespace)——分组样式,从而可以被调用
    • 作用域——局部修改样式
    • JavaScript 赋值——在CSS中使用JavaScript表达式赋值

同:

    • Less是基于JavaScript,是在客户端处理的;Sass是基于Ruby(一种简单快捷的面向对象的脚本语言),是在服务器端处理的
    • 关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$
    • 输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded
    • Sass支持条件语句,可以使用if{}else{},for{}循环等等,而Less不支持

 三.总结

为CSS增加一些编程的特性,如规则、变量、混入、选择器、继承等等特性,上手都很简单

(CSS的调试,需要编译,文件过大都是预处理器的缺点)

 

参考:

  Stylus的基本使用

  Less与Sass的异同?

  什么是CSS预处理器?

  Sass中文网

    原文作者:Du9191
    原文地址: https://www.cnblogs.com/Du9191/p/16212530.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞