在编写css时，是否会有这样的问题，每个地方的样式越写越多，导致我们要修改某一个样式的时候，往往要找很久才能锁定目标。在我们个人写的小demo中都会有这样的问题，当面对企业级的开发时，我们将怎么样从容应对呢？------今天让我们用Stylus，体验编程似的CSS。

一、Stylus的简介及安装

1、Stylus是一种CSS的预处理器，能够以简洁、动态、功能丰富的语法来编写CSS文件。支持变量 、嵌套规则 、运算符 、函数、继承等高级属性。

2、安装Node.js后，在终端输入npm install -g stylus

用stylus --version来检测是否安装成功。

二、Stylus的特性

1、Stylus可以省略分号和花括号，甚至可以做到不用冒号来分隔属性和值，让代码更加简洁。

编译前：
编译后：

2、强大的变量：Stylus的变量定义很灵活，不仅支持颜色、数字、字符串，还可以是列表、对象甚至是数组。

3、Stylus提供了if、else、for、while等控制流语句，增加了样式的逻辑性。

编译前:

编译后：

4、Stylus支持自定义函数，可以接收参数并返回值，同时支持模块化编程。编译前：

scss 复制代码

$theme = 'light'

// 使用 if...else 来根据主题改变文字颜色
body
  if $theme == 'light'
    color #333 // 浅色主题下的文字颜色
  else if $theme == 'dark'
    color #ddd // 深色主题下的文字颜色
  else
    color #666 // 默认主题的文字颜色

for i in 1..5
  .button-{i}
    background-color hsl(360 * i / 5, 50%, 50%) // 根据索引改变背景色
    padding 10px
    margin 5px
    border-radius 5px

// 定义一个函数来展示条件逻辑在函数中的应用
applyBorderStyle($type)
  if $type == 'dashed'
    border-style dashed
  else if $type == 'solid'
    border-style solid
  else
    border-style dotted

.card
  applyBorderStyle('solid') // 应用实线边框

编译后：

css 复制代码

body {
  color: #333;
}
.button-1 {
  background-color: #a6bf40;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.button-2 {
  background-color: #40bf73;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.button-3 {
  background-color: #4073bf;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.button-4 {
  background-color: #a640bf;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.button-5 {
  background-color: #bf4040;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}
.card {
  border-style: solid;
}

特别是模块性，使得我们在找对应的元素时，方便了许多

编译前：

css 复制代码

*
    margin 0
    padding 0
    box-sizing border-box

:root{
    --primary-color #aaa54b
    --secondary-color #373b69
    --white-color:#fff
    --placeholder-color:#7378c5
}

body
    background-color: var(--primary-color)
    font-family sans-serif

header
    padding 1rem
    display flex 
    justify-content flex-end
    align-items center
    // flex-direction column 改变主轴方向
    background-color var(--secondary-color)
    height 100px
    .search
        background-color transparent 
        border 2px solid var(--primary-color)
        border-radius 50px
        font-family inherit //继承父元素
        font-size 1rem
        padding 0.5rem 1rem
        color var(--white-color)
        &:placeholder
            color var(--placeholder-color)
        &:focus 
            outline: none
            background-color var(--primary-color)
main 
    display flex
    flex-wrap wrap 
    justify-content flex-start
    .col
        width 300px
        height 200px

可以将每一个大的容器下的所有容器的样式收在一起，这是CSS文件做不到的

用 <math xmlns="http://www.w3.org/1998/Math/MathML"> 来表示当前选择器的全名，主要用在嵌套规则中，在选择器内部使用来表示当前选择器的全名，主要用在嵌套规则中，在选择器内部使用 </math>来表示当前选择器的全名，主要用在嵌套规则中，在选择器内部使用时，Stylus会将其替换成外层选择器的完整路径（名称），使代码更加简洁、统一。

编译后：

css 复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --primary-color: #aaa54b;
  --secondary-color: #373b69;
  --white-color: #fff;
  --placeholder-color: #7378c5;
}
body {
  background-color: var(--primary-color);
  font-family: sans-serif;
}
header {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--secondary-color);
  height: 100px;
}
header .search {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  color: var(--white-color);
}
header .search:placeholder {
  color: var(--placeholder-color);
}
header .search:focus {
  outline: none;
  background-color: var(--primary-color);
}
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
main .col {
  width: 300px;
  height: 200px;
}

三、Node命令

1、指定文件名编译为CSS(通常Stylus文件命名为xxx.styl)

lua 复制代码

stylus input.styl -o output.css

2、Stylus文件发生改变时自动编译

lua 复制代码

stylus -w input.styl -o output.css

常用的只有以上两个命令，还是很容易上手的。

CSS的预处理器--Stylus,实现CSS的编程

一、Stylus的简介及安装

二、Stylus的特性

三、Node命令