当前位置: 首页 > 文档资料 > Stylus 中文文档 >

Stylus 概述

优质
小牛编辑
121浏览
2023-12-01

CSS需要有个巴神

下面中规中矩的CSS代码是否看得眼睛生茧了?

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

如果我们让花括号卖锅

body
  font: 12px Helvetica, Arial, sans-serif;
  
a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

又或者是分号酱油

body
  font: 12px Helvetica, Arial, sans-serif
  
a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

冒号,你妈看你回家吃饭

body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  -webkit-border-radius 5px
  -moz-border-radius 5px
  border-radius 5px

来点干货

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
  
body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  border-radius(5px)

明显的混合书写又如何?

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
  
body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  border-radius 5px

创建与分享

@import 'vendor'

body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  border-radius 5px

甚至是语言函数

sum(nums...)
  sum = 0
  sum += n for n in nums
  
sum(1 2 3 4)
// => 10

如果所有都是可选的又将怎样?

fonts = helvetica, arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

Stylus获取、安装

Stylus安装如下,先去nodejs官方下载页面下载安装nodejs,支持window系统,直接双击安装。然后,安装stylus包,如下代码:

$ npm install stylus

然后,就会自动下载安装最新的stylus库。

关于stylus更多信息(如文档以及使用示例打包下载-英文)可以去GitHub查看。

Stylus的特征

  • 冒号可选
  • 分号可选
  • 逗号可选
  • 括号可选
  • 变量
  • 插值
  • 混合书写
  • 算术
  • 强制类型转换
  • 动态导入
  • 条件
  • 迭代
  • 嵌套选择
  • 父级参考
  • 变量函数调用
  • 词法作用域
  • 内置函数(>25)
  • 内部语言函数
  • 压缩可选
  • 图像内联可选
  • 可执行Stylus
  • 健壮的错误报告
  • 单行和多行注释
  • CSS字面量
  • 字符转义
  • TextMate捆绑
  • 以及其他更多

最后更新:

类似资料

  • 概述 国际化和本地化的目的就是让一个网站应用能做到根据用户语种和指定格式的不同而提供不同的内容。 Django 对文本翻译, 日期、时间和数字的格式化,以及时区提供了完善的支持。 实际上,Django做了两件事: 由开发者和模板作者指定应用的哪些部分应该翻译,或是根据本地语种和文化进行相应的格式化。 根据用户的偏好设置,使用钩子将web应用本地化。 很显然,翻译取决于用户所选语言,而格式化通常取决

  • 虽然Django 满满的便捷性让Web 开发人员活得轻松一些,但是如果不能轻松地部署你的网站,这些工具还是没有什么用处。Django 起初,易于部署就是一个主要的目标。有许多优秀的方法可以轻松地来部署Django: 如何使用WSGI 部署 部署的检查清单 FastCGI 的支持已经废弃并将在Django 1.9 中删除。 如何使用FastCGI、SCGI 和AJP 部署Django 如果你是部署D

  • 本书概述 进程的概念大家都很熟悉,但你是否能准确说出僵尸进程的含义呢?还有 COW(Copy On Write)、Flock(File Lock)、Epoll 和 Namespace 的概念又是否了解过呢? 本书汇集了进程方方面面的基础知识,加上编程实例,保证阅读后能自如地回答以上问题,在项目开发中对进程的优化也有更深的理解。 本书架构 本书按循序渐进的方式介绍进程的基础概念和拓展知识,主要涵盖以

  • Docker在1.12.0和以上版本中增加了swarm模式。通过swarm模式管理的Docker Engines集群称之为“Swarm”。并可以通过Docker CLI来创建Swarm,在Swarm中部署应用服务,以及管理Swarm。 功能特点 在Docker Engines中集成了集群管理功能:通过Docker CLI可以创建一个用来发布应用services的swarm,而不需要安装其他任何额外

  • 这是 Elasticsearch 官方的 PHP 客户端。我们把 Elasticsearch-PHP 设计成低级客户端(低级设计模式),使用时不会偏离 REST API 的用法。 客户端所有方法几乎都与 REST API 对应,而且也与其他编程语言的客户端(如 ruby, python 等)方法结构相似。我们希望这种对应方式可以方便开发者更加容易上手客户端,且以最小的代价快速从一种编程语言转换到另

  • 特点 为什么用 Groovy?