乐趣区

关于css:CSS预编译器

jiezi

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

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

css 根底知识点

css 盒模型

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

  1. inline: 行内元素
  2. inline-block: 行内块元素
  3. block: 块元素
  4. none: 不显示元素，不占地位
  5. table 及其相干: 次要用于设置以表格的模式展现内容
  6. flex 及其相干: 弹性布局
  7. 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 变量还能够用与以下几种状况：

  1. 选择器

    @my-selector: banner;

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

    编译后：

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

  2. URLs

    @images: "../img";

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

  3. Import Statements

    @themes: "../../src/themes";

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

  4. Properties

    @property: color;

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

    编译后：

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

  5. 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 变量值能够借助插值 #{} 能够利用到如下模式：

  1. 选择器

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

    编译后：

    p.foo {border-color: blue;}

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

    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 时的额定下载：

  1. 被导入文件的名字以 .css 结尾；
  2. 被导入文件的名字是一个 URL 地址（比方 http://www.sass.hk/css/css.css），由此可用谷歌字体 API 提供的相应服务；
  3. 被导入文件的名字是 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 有两个要点:

  1. 跟混合器相比，继承生成的 css 代码绝对更少。因为继承仅仅是反复选择器，而不会反复属性，所以应用继承往往比混合器生成的 css 体积更小。如果你十分关怀你站点的速度，请牢记这一点。
  2. 继承听从 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');
}

多重赋值:

  1. 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;
}

  2. 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 = 14px

body {font: font-size Arial, sans-serif;}

倡议增加标识符 $

$font-size = 14px

body {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} args

border-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 n

form 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 n

form input[type=button]
  border-radius 5px

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

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

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

form 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 even

table
  stripe()
  td
    padding 4px 10px

table#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 反对三种正文，单行正文，多行正文，以及多行缓冲正文。

  1. 单行正文，双斜杠，CSS 中不输入。

    // 我是正文!
body
  padding 5px

  2. 多行正文

    /*
*/

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

  1. 多行缓冲正文

    /*!
*/

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

Stylus 导入

@import "library.styl";

Stylus 继承

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

退出移动版