关于css:CSS预编译器

以后环境中，间接手写 css 的越来越少，次要是通过各种预编译器来做，次要起因会通过如下几点进行形容。

先看一下 css 的一些根底点，这里只说要害的，残缺的能够本人查看 css2.1标准。

css 根底知识点

css 盒模型

页面都是通过盒模型来拼凑的，首先须要晓得都有哪些块模型（也就是 display 的值）：

inline: 行内元素
inline-block: 行内块元素
block: 块元素
none: 不显示元素，不占地位
table 及其相干: 次要用于设置以表格的模式展现内容
flex 及其相干: 弹性布局
grid 及其相干: 网格布局

个别最罕用的 div 就 display: block 的通用块。

css 变量

定义语法 --* ，应用语法 var(--*)

* 示意变量名称，能够是数字字母下划线短横线 [0-9a-zA-Z_-] 进行组合。

无论变量定义还是应用都只能在申明块 {} 内：

/* 全局变量 */:root {  --theme: #f00;}/* 局部变量 */.side {  --color: #0f0;}.content {  color: var(--theme);}.footer {  color: var(--color);}

<div class="content">  <div class="body"></div>  <div class="side"></div>  <div class="footer"></div></div>

javascript 能够获取和设置 css 中的变量：

// 获取 css 变量值getComputedStyle(document.documentElement).getPropertyValue('--color')// 设置 css 变量值document.documentElement.style.setProperty('--color', '#' + Math.random().toString(16).slice(2,8))

例子：

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>css变量</title>  <style>    :root {      --color: #f00;    }    html,    body {      margin: 0;      height: 100%;    }    body {      display: flex;      flex-direction: column;    }    .header, .footer {      height: 30px;      color: var(--color);    }    .body {      --color: #00f;      flex: auto;      color: var(--color);    }  </style></head><body>  <div class="header">headerheaderheader</div>  <div class="body" id="body">    <button id="changeTheme">批改主题色</button>    <button id="changeBodyTheme">批改body主题色</button>    <div>bodybodybody</div>  </div>  <div class="footer">footerfooterfooter</div>  <script>    document.querySelector("#changeTheme").onclick = function(){      console.log(getComputedStyle(document.documentElement).getPropertyValue('--color').trim())      document.documentElement.style.setProperty('--color', '#' + Math.random().toString(16).slice(2,8))    }    document.querySelector("#changeBodyTheme").onclick = function(){      console.log(getComputedStyle(document.querySelector("#body")).getPropertyValue('--color').trim())      document.querySelector("#body").style.setProperty('--color', '#' + Math.random().toString(16).slice(2,8))    }  </script></body></html>

Less

参考链接：Less文档

Less 变量

@width: 10px;@height: @width + 10px;#header {  width: @width;  height: @height;}

编译后：

#header {  width: 10px;  height: 20px;}

Less 变量还能够用与以下几种状况：

选择器

@my-selector: banner;.@{my-selector} {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

编译后：

.banner {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

URLs

@images: "../img";body {  color: #444;  background: url("@{images}/white-sand.png");}

Import Statements

@themes: "../../src/themes";@import "@{themes}/tidal-wave.less";

Properties

@property: color;.widget {  @{property}: #0ee;  background-@{property}: #999;}

编译后：

.widget {  color: #0ee;  background-color: #999;}

Variable Variables

@primary:  green;@secondary: blue;.section {  @color: primary;  .element {    color: @@color;  }}

编译后：

.section .element {  color: green;}

Less 混合

Less 混合简略应用

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#menu a {  color: #111;  .bordered();}.post a {  color: red;  .bordered();}

编译后：

#menu a {  color: #111;  border-top: dotted 1px black;  border-bottom: solid 2px black;}.post a {  color: red;  border-top: dotted 1px black;  border-bottom: solid 2px black;}

Less 混合带参数混合

.border-radius(@radius) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}.button {  .border-radius(6px);}

Less 混合参数默认值混合

.border-radius(@radius: 5px) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}.button {  .border-radius();}#header {  .border-radius(4px);}

Less 嵌套

#header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;  }}

编译后：

#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}

留神：请勿过多的嵌套层。

在嵌套内能够应用 & 来指向父选择器

a {  color: blue;  &:hover {    color: green;  }}

编译后：

a {  color: blue;}a:hover {  color: green;}

Less 导入

@import "library.less";

Sass

参考链接：Sass文档

Sass 变量

$nav-color: #F90;nav {  $width: 100px;  width: $width;  color: $nav-color;}

编译后：

nav {  width: 100px;  color: #F90;}

默认变量值 !default ，如果这个变量被申明赋值了，那就用它申明的值，否则就用这个默认值。

$fancybox-width: 400px !default;.fancybox {  width: $fancybox-width;}

在上例中，如果成员在导入你的 sass 部分文件之前申明了一个 $fancybox-width 变量，那么你的部分文件中对 $fancybox-width 赋值 400px 的操作就有效。如果成员没有做这样的申明，则 $fancybox-width 将默认为 400px。

Element-ui 的 var.scss 文件中就应用的默认变量值。

Sass 变量值能够借助插值 #{} 能够利用到如下模式：

选择器

$name: foo;$attr: border;p.#{$name} {  #{$attr}-color: blue;}

编译后：

p.foo {  border-color: blue;}

属性值，不过通常间接应用变量更不便

p {  $font-size: 12px;  $line-height: 30px;  font: #{$font-size}/#{$line-height};}

编译后：

p {  font: 12px/30px;}

Sass 混合

Sass 混合简略应用

混合器应用 @mixin 标识符定义。

@mixin rounded-corners {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}

通过 @include 应用混合器。

.notice {  background-color: green;  border: 2px solid #00aa00;  @include rounded-corners;}//sass最终生成：.notice {  background-color: green;  border: 2px solid #00aa00;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}

Sass 混合器中的CSS规定

@mixin no-bullets {  list-style: none;  li {    list-style-image: none;    list-style-type: none;    margin-left: 0px;  }}ul.plain {  color: #444;  @include no-bullets;}

编译后：

ul.plain {  color: #444;  list-style: none;}ul.plain li {  list-style-image: none;  list-style-type: none;  margin-left: 0px;}

Sass 混合器传参

@mixin link-colors($normal, $hover, $visited) {  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}a {  @include link-colors(blue, red, green);}

编译后：

a { color: blue; }a:hover { color: red; }a:visited { color: green; }

传参的时候还能够通过 key:value ，这种形式不用在意参数程序：

a {  @include link-colors(    $normal: blue,    $visited: green,    $hover: red  );}

Sass 默认参数值

@mixin link-colors(    $normal,    $hover: $normal,    $visited: $normal  ){  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}a {  @include link-colors(blue); // 相当于 @include link-colors(blue, blue, blue)}

Sass 嵌套

#content {  article {    h1 { color: #333 }    p { margin-bottom: 1.4em }  }  aside { background-color: #EEE }}

编译后：

#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }

留神：请勿过多的嵌套层。

父选择器的标识符 `&`

article a {  color: blue;  &:hover { color: red }}

编译后：

article a { color: blue }article a:hover { color: red }

Sass 导入

@import "library.scss";

Sass 局部文件

定义：当通过 @import 把 sass 款式扩散到多个文件时，你通常只想生成少数几个 css 文件。那些专门为 @import 命令而编写的 sass 文件，并不需要生成对应的独立 css 文件，这样的 sass 文件称为部分文件。

sass 部分文件的文件名以下划线结尾。

应用能够参照 https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/mixins/_button.scss 。

Sass 嵌套导入

嵌套导入生成对应的 css 文件时，部分文件会被直接插入到 css 规定内导入它的中央。

例如有一个名为 _blue-theme.scss 的部分文件，内容如下：

aside {  background: blue;  color: white;}

.blue-theme {@import "blue-theme"}

生成的后果跟你间接在 .blue-theme 选择器内写 _blue-theme.scss 文件的内容齐全一样。

.blue-theme {  aside {    background: blue;    color: #fff;  }}

Sass 原生CSS的导入

通常在 sass 中应用 @import 时，sass 会尝试找到对应的 sass 文件并导入进来，但在下列三种状况下会生成原生的 CSS@import，只管这会造成浏览器解析 css 时的额定下载：

被导入文件的名字以 .css 结尾；
被导入文件的名字是一个URL地址（比方 http://www.sass.hk/css/css.css ），由此可用谷歌字体API提供的相应服务；
被导入文件的名字是 CSS 的url()值。

这就是说，你不能用 sass 的 @import 间接导入一个原始的 css 文件，因为 sass 会认为你想用 css 原生的 @import。然而，因为 sass 的语法齐全兼容 css，所以你能够把原始的 css 文件改名为 .scss 后缀，即可间接导入了。

Sass 静默正文

语法：

// 正文内容直到行末

静默正文的内容不会呈现在生成的 css 文件中。

Sass 选择器继承

//通过选择器继承继承款式.error {  border: 1px red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}

.seriousError 将会继承样式表中任何地位处为 .error 定义的所有款式。以 class="seriousError" 润饰的 html 元素最终的展现成果就如同是 class="seriousError error"。

.seriousError 不仅会继承 .error 本身的所有款式，任何跟 .error 无关的组合选择器款式也会被 .seriousError 以组合选择器的模式继承，如下代码:

//.seriousError从.error继承款式.error a{  //利用到.seriousError a  color: red;  font-weight: 100;}h1.error { //利用到hl.seriousError  font-size: 1.2rem;}

对于 @extend 有两个要点:

跟混合器相比，继承生成的 css 代码绝对更少。因为继承仅仅是反复选择器，而不会反复属性，所以应用继承往往比混合器生成的 css 体积更小。如果你十分关怀你站点的速度，请牢记这一点。
继承听从 css 层叠的规定。当两个不同的 css 规定利用到同一个 html 元素上时，并且这两个不同的 css 规定对同一属性的润饰存在不同的值，css 层叠规定会决定利用哪个款式。相当直观：通常权重更高的选择器胜出，如果权重雷同，定义在后边的规定胜出。

Sass 函数指令

$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;}

@function 用于定义函数。
@return 用于设置函数的返回值。

其余指令阐明

@at-root

@at-root 指令导致一个或多个规定被限定输入在文档的根层级上，而不是被嵌套在其父选择器下。它能够被用于繁多或内联选择器：

.parent {  ...  @at-root .child { ... }}

编译后：

.parent { ... }.child { ... }

@if

@if 指令须要一个 SassScript 表白和嵌套在它上面要应用的款式，如果表达式返回值不为 false 或者 null ，那么前面花括号中的内容就会返回：

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

编译后：

p {  border: 1px solid;}

@if 语句前面能够跟多个 @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;  }}

编译后：

p {  color: green;}

@for

@for 指令反复输入一组款式。对于每次反复，计数器变量用于调整输入后果。该指令有两种模式：@for $var from <start> through <end> 和 @for $var from <start> to <end>。留神关键字 through 和 to 的区别。$var 能够是任何变量名，比方 $i ; <start> 和 <end> 是应该返回整数的 SassScript 表达式。当 <start> 比 <end> 大的时候，计数器将递加，而不是增量。

@for 语句将设置 $var 为指定的范畴内每个间断的数值，并且每一次输入的嵌套款式中应用 $var 的值。对于 from ... through 的模式，范畴包含 <start> 和 <end> 的值，但 from ... to 的模式从 <start> 开始运行，但不包含 <end> 的值。

@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}@for $i from 4 to 6 {  .item-#{$i} { width: 2em * $i; }}

编译后：

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

疾速实现栅栏布局：https://github.com/jdf2e/nutui/blob/master/src/packages/col/col.scss 。

@each

@each 指令通常格局是 @each $var in <list or map>。$var 能够是任何变量名，像 $length 或者 $name，和<list or map>是一个返回列表（list）或 map 的 SassScript 表达式。

@each 规定将 $var 设置为列表（list）或 map 中的每个我的项目，输入款式中蕴含应用 $var 的值。

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

编译后：

.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');}

多重赋值:

list

@each $animal, $color, $cursor in (puma, black, default),                                  (sea-slug, blue, pointer),                                  (egret, white, move) {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');    border: 2px solid $color;    cursor: $cursor;  }}

编译后：

.puma-icon {  background-image: url('/images/puma.png');  border: 2px solid black;  cursor: default;}.sea-slug-icon {  background-image: url('/images/sea-slug.png');  border: 2px solid blue;  cursor: pointer;}.egret-icon {  background-image: url('/images/egret.png');  border: 2px solid white;  cursor: move;}

maps

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {  #{$header} {    font-size: $size;  }}

编译后：

h1 {  font-size: 2em;}h2 {  font-size: 1.5em;}h3 {  font-size: 1.2em;}

@while

@while 指令反复输入嵌套款式，直到SassScript表达式返回后果为 false 。这可用于实现比 @for 语句更简单的循环。

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

编译后：

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

Sass 举例

// 分明浮动@mixin utils-clearfix {  $selector: &;  @at-root {    #{$selector}::before,    #{$selector}::after {      display: table;      content: "";    }    #{$selector}::after {      clear: both    }  }}// 垂直居中@mixin utils-vertical-center {  $selector: &;  @at-root {    #{$selector}::after {      display: inline-block;      content: "";      height: 100%;      vertical-align: middle    }  }}// 超过...@mixin utils-ellipsis {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

Stylus

参考链接：Stylus文档

stylus 能够写成上面的样子：

body  color white

Stylus 变量

Stylus 变量采纳 key=value 来定义。

能够间接字符串定义：

font-size = 14pxbody {  font: font-size Arial, sans-serif;}

倡议增加标识符 $

$font-size = 14pxbody {  font: $font-size Arial, sans-serif;}

Stylus 属性查找

#logo {  position: absolute;  top: 50%;  left: 50%;  width: 150px;  height: 80px;  margin-left: -(@width / 2);  margin-top: -(@height / 2);}

Stylus 插值

Stylus反对通过应用 {} 字符突围表达式来插入值，其会变成标识符的一部分。

vendor(prop, args)  -webkit-{prop} args  -moz-{prop} args  {prop} argsborder-radius()  vendor('border-radius', arguments)box-shadow()  vendor('box-shadow', arguments)button  border-radius 1px 2px / 3px 4px

编译后：

button {  -webkit-border-radius: 1px 2px / 3px 4px;  -moz-border-radius: 1px 2px / 3px 4px;  border-radius: 1px 2px / 3px 4px;}

选择器插值

table  for row in 1 2 3 4 5    tr:nth-child({row})      height: 10px * row

编译后：

table tr:nth-child(1) {  height: 10px;}table tr:nth-child(2) {  height: 20px;}table tr:nth-child(3) {  height: 30px;}table tr:nth-child(4) {  height: 40px;}table tr:nth-child(5) {  height: 50px;}

Stylus 混合

Stylus 混入

border-radius(n)  -webkit-border-radius n  -moz-border-radius n  border-radius nform input[type=button]  border-radius(5px)

编译后：

form input[type=button] {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}

下面的例子也能够书写为：

border-radius(n)  -webkit-border-radius n  -moz-border-radius n  border-radius nform input[type=button]  border-radius 5px

这个时候是把 border-radius 当做公有属性来看待。

还能够应用 arguments 局部变量，传递蕴含多值的表达式：

border-radius()  -webkit-border-radius arguments  -moz-border-radius arguments  border-radius argumentsform input[type=button]  border-radius 1px 2px / 3px 4px

编译后：

form input[type=button] {  -webkit-border-radius: 1px 2px/3px 4px;  -moz-border-radius: 1px 2px/3px 4px;  border-radius: 1px 2px/3px 4px;}

Stylus 父级援用

父级援用字符 &

stripe(even = #fff, odd = #eee)  tr    background-color odd    &.even    &:nth-child(even)      background-color eventable  stripe()  td    padding 4px 10pxtable#users  stripe #303030 #494848  td    color white

编译后：

table tr {  background-color: #eee;}table tr.even,table tr:nth-child(even) {  background-color: #fff;}table td {  padding: 4px 10px;}table#users tr {  background-color: #494848;}table#users tr.even,table#users tr:nth-child(even) {  background-color: #303030;}table#users td {  color: #fff;}

Stylus 正文

Stylus反对三种正文，单行正文，多行正文，以及多行缓冲正文。

单行正文，双斜杠，CSS中不输入。
```
// 我是正文!body  padding 5px
```
多行正文
```
/*
```

*/add(a, b)  a + b```

多行缓冲正文
```
/*!
```

*/add(a, b)  a + b```

Stylus 导入

@import "library.styl";

Stylus 继承

Stylus 的 @extend 指令受 SASS 实现的启发，基本一致，除了些轻微差别。

css 根底知识点

css 盒模型

css 变量

Less

Less 变量

Less 混合

Less 混合 简略应用

Less 混合 带参数混合

Less 混合 参数默认值混合

Less 嵌套

Less 导入

Sass

Sass 变量

Sass 混合

Sass 混合 简略应用

Sass 混合器中的CSS规定

Sass 混合器传参

Sass 默认参数值

Sass 嵌套

父选择器的标识符 &

Sass 导入

Sass 局部文件

Sass 嵌套导入

Sass 原生CSS的导入

Sass 静默正文

Sass 选择器继承

Sass 函数指令

其余指令阐明

@at-root

@if

@for

@each

@while

Sass 举例

Stylus

Stylus 变量

Stylus 属性查找

Stylus 插值

选择器插值

Stylus 混合

Stylus 混入

Stylus 父级援用

Stylus 正文

Stylus 导入

Stylus 继承

Less 混合简略应用

Less 混合带参数混合

Less 混合参数默认值混合

Sass 混合简略应用

父选择器的标识符 `&`