今天小编跟大家讲解下有关Stylus基本使用_关于stylus的用法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Stylus基本使用_关于stylus的用法 的相关资料，希望小伙伴们看了有所帮助。
Stylus是一款富有表现力的、动态的、健壮的CS预处理 。css 预处理顾名思义，预先处理 css。那 stylus 咋预先处理呢？stylus 给 css 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 css 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 css 文件。
安装首先，安装 stylus（确保之前已经安装 nodejs ）。
$ npm install stylus安装之后，运行 stylus -h 可查看帮助。运行 stylus example.styl 可将 demo.styl 文件编译成 example.css 文件。
1.语法
Stylus的语法花样多一些，它使用“.styl”的扩展名，Stylus也接受标准的css语法，但是他也接受不带花括号和分号的语法，如下所示：
h1 { color: #0982C1;}h1 color: #0982C1;h1 color #0982C12.变量
你可以在css预处理器中声明变量,并在整个样式表中使用。css预处理器支持任何变量（例如：颜色、数值（不管是否包括单位）、文本）。然后你可以在任意地方引用变量。
Stylus声明变量没有任何限定,你可以使用"$"符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。有一点需要注意的是,如果我们使用"@"符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，[email protected]
mainColor = #0982c1siteWidth = 1024px$borderStyle = dottedbody color mainColor border 1px $borderStyle mainColor max-width siteWidth上面的代码都将转译成相同的css。你可以想像一下,变量的作用有多大。我们不需要为了修改一个颜色而输入许多次,也不需要为了修改一个宽度去到找寻找他.(我们只需要修改定义好的变量,修改一次就足够).下面是转译过来的CSS代码:
body { color: #0982c1; border: 1px dotted #0982c1; max-width: 1024px;}3.嵌套
如果我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素.
section { margin: 10px;}section nav { height: 25px;}section nav a { color: #0982C1;}section nav a:hover { text-decoration: underline;}相反，使用CSS预处理器，我们可以在父元素的花括号({})写这些元素。同时可以使用“&”符号来引用父选择器。
section { margin: 10px; nav { height: 25px; a { color: #0982C1; &:hover { text-decoration: underline; } } }}4.混合
Mixins是预处器中的函数。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处器中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方，直接调用你定义好的Mixin。这是一个非常有用的特性。Mixins是一个公认的选择器，还可以在Mixins中定义变量或者是默认参数。
可以不使用任何符号，就是直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接。
error(borderWidth= 2px) { border: borderWidth solid #F00; color: #F00;}.generic-error { padding: 20px; margin: 4px; error(); }.login-error { left: 12px; position: absolute; top: 20px; error(5px); }转译后：
.generic-error { padding: 20px; margin: 4px; border: 2px solid #f00; color: #f00;}.login-error { left: 12px; position: absolute; top: 20px; border: 5px solid #f00; color: #f00;}5.继承
在多个元素应用相同的样式时，我们在CSS通常都是这样写：
p,ul,ol { }这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，这样一回来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器可以从一个选择继承另一个选择器下的所有样式。
.block { margin: 10px 5px; padding: 2px;}p { @extend .block; border: 1px solid #EEE;}ul, ol { @extend .block; color: #333; text-transform: uppercase;}转译后：
.block, p, ul, ol { margin: 10px 5px; padding: 2px;}p { border: 1px solid #EEE;}ul, ol { color: #333; text-transform: uppercase;}6.导入
在CSS中，[email protected]，[email protected]��器中的导入（@import）规则和CSS的有所不同，它只是在语义上导入不同的文件，[email protected]mport 'file.css'”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。
body { background: #EEE;[email protected]"reset.css";@import"file.{type}";p { background: #0982C1;}转译后
@import"reset.css";body { background: #EEE;}p { background: #0982C1;}7.颜色函数
颜色函数是CSS预处里器中内置的颜色函数功能，这些功能可以对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。
lighten(color, 10%); darken(color, 10%); saturate(color, 10%); desaturate(color, 10%);下面是Stylus颜色函数的一个简单实例
color = #0982C1h1 background color border 3px solid darken(color, 50%)8.运算符
body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10;}9.属性前缀
border-radius(values) { -webkit-border-radius: values; -moz-border-radius: values; border-radius: values;}div { border-radius(10px);}转译后
div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}浏览器前缀的问题，主要是针对于CSS3属性的运用，众所周知，CSS3的属性有并不是所有浏览器都支持属性的标准语法，因此在实际运用中时，不得不加上各浏览器的前缀来识别。
来源：爱蒂网
