学习Stylus

cncoder 发布于2019-08-29 16:57 / 2081人阅读

摘要：函数这段代码声明了函数，并且接收了参数在使用时只需要像上面的代码那样输入函数名称和参数就可以设置属性。选择器这段代码被编译成在元素里面写样式的时候是使用一个键缩进来体现是属于该元素的样式。

关于stylus

stylus是css的预处理框架，是以.styl为后缀的文件，可以创建健壮的，动态的富有表现的css。它用来为css增加一些编程的特性，比如在css中可以使用变量，函数等编程语言的特性，从而是css更加的简洁，适应性更强，代码也更加的直观易懂。

在写代码的时候发现stylus有个特点，代码风格有点像python，特别简洁不需要大括号，分号什么的并且也是用空格来规范格式。

安装

使用stylus首先需要安装，当然这也是一个比较简单的事情，安装stylus只需要一个简单的命令nmp install -g stylus（这是在你安装好了nodejs并且配置好了环境变量情况下，安装和配置nodejs可以去网上查找一下，很简单这里就不多讲）。安装好了后使用stylus --version查看是否安装成功。

简单的使用stylus

首先创建style.styl文件编写一段简单的stylus的代码

bgc = red
$border-radius(arg)
    -webkit-border-radius: arg
    -moz-border-radius: arg
    border-radius: arg
*
    margin 0
    padding 0

.box
    height 100
    width 100
    background-color bgc
    border-radius(2px)
    .content
        background-color bgc
        h1
            color white
            &:hover
                color green

使用命令stylus -w style.styl -o style.css将文件style.styl文件编译成并输出成css文件，编译后生成的css代码如下

* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100;
  width: 100;
  background-color: #f00;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.box .content {
  background-color: #f00;
}
.box .content h1 {
  color: #fff;
}
.box .content h1:hover {
  color: #008000;
}

是不是感觉写css简单了许多，写一个styl文件再编译生成的css文件效率高多了。
下面我们在来分析一下这段代码

变量

bgc = red
background-color bgc

这段代码声明了变量bgc，并且为变量赋值为red。在需要用到相同颜色的地方可以
直接使用这个变量.
前面有两处背景颜色为red，直接使用变量，当需要改变颜色时不需要一个个的改，
只需要改变变量的值就可以了。

函数

$border-radius(arg)
    -webkit-border-radius: arg
    -moz-border-radius: arg
    border-radius: arg
 $border-radiius(2px)

这段代码声明了函数，并且接收了参数arg.在使用时只需要像上面的代码那样输入函数名称
和参数就可以设置css属性。参数不一定要传入的，根据代码的情况跟其他语言都差不多。

选择器

.box
    height 100
    width 100
    background-color bgc
    border-radius(2px)
    .content
        background-color bgc
        h1
            color white
            &:hover
                color green

这段代码被编译成

.box {
  height: 100;
  width: 100;
  background-color: #f00;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.box .content {
  background-color: #f00;
}
.box .content h1 {
  color: #fff;
}
.box .content h1:hover {
  color: #008000;
}

在元素里面写样式的时候是使用一个tab键缩进来体现是属于该元素的样式。写.box 的子元素.content的样式不需要在像写css那样重新去写，只需要在.box下使用缩进来体现元素.content是.box的子元素然后在写.content的样式就可以。是不是感觉喜欢上了stylus了。

在上面的这段stylus的代码使用了一个&符号，这个&符号根据编译出来的代码可以很容易理解，它会指向最近的父级元素并且与他连接。

@规则

@import导入文件.styl，任何.css扩展文件将作为字面量,stylus样式作为动态导入的。

@import "reset.css"

@css{} {}里面的不会被编译
@block{} 作为一个块赋值给一个变量
@media 和在css使用的方法相同
@keyframe 编译的时候转换成@-webkit-keyframes,可以通变量来添加前缀

虽然文章写得没有那么详细，涉及的一些细节并没有讲到可以去看一些相关文档，这些主要的会了去学习一些细节还是很快的，很多东西跟编程语言还是差不多的，毕竟stylus就是来方便我们的。

服务器托管私有云 stylus 学习机器学习学习机器学习学习深度学习学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114010.html

stylus入门使用方法

摘要：默认使用的作为文件扩展名，支持多样性的语法。功能上更为强壮，和联系更加紧密。所以我选择，玩儿过一段时间，主要是这玩意依赖运行，所以我放弃使用了。这样就算是安装完了，也可以正常使用。用于保存项目元数据。 stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。 Stylus 是一个CSS的预...

LiuZh 2019-08-28 18:09 评论0 收藏0
大话css预编译处理（一）通读介绍篇

摘要：使用预编译处理的优势使用预处理器，可以提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。一、什么是css预编译处理？ CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。...

Backache 2019-08-30 15:55 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

Shonim 2019-08-02 16:11 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

zhkai 2019-08-23 16:47 评论0 收藏0
react学习日记第一记-webpack配置

摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。由于之前的项目一直都是在使用vue，对于vue的webpa...

MAX_zuo 2019-08-05 16:41 评论0 收藏0