学习Stylus

2018-10-12 admin

关于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就是来方便我们的。

原文链接:https://segmentfault.com/a/1190000016656804

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42494.html

文章标题:学习Stylus

相关文章
JavaScript学习笔记之DOM基础 2.4
DOM的发展,与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑,DOM才能正确地发挥其功用。如今,正确的语义结构、表现与内容分离等要求,都已经成为网页设计中的基本要求。因此,在网页前端开发中,DOM的存在,无疑是为表现层、行为层甚至内...
2017-03-29
AngularJS基础学习笔记之指令
AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性。 ng-app指令用来初始化AngularJS application。 ng-init指令用来初始化a...
2017-03-23
AngularJS基础学习笔记之表达式
AngularJS通过表达式将数据绑定到HTML。 AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}。 AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。 Angular...
2017-03-23
AngularJS学习第一篇 AngularJS基础知识
AngularJS学习第一篇,了解指令、过滤器等相关内容。 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 1、 ng-app: 定义了 AngularJS 应用程序的根元素; ng-app 指令在网页加载完毕时会...
2017-03-17
Nodejs学习笔记之入门篇
分享第一篇,关于 NodeJS —— Javascript 的常用知识以及如何从 Javascript 开发者过渡到 NodeJS 开发者(不会介绍具体的框架)。在读本文前,希望你对 javascript 有一些初步的认识。 Javascr...
2017-03-22
AngularJS学习第二篇 AngularJS依赖注入
简介: 首先我们需要理解什么是依赖注入? 控制反转和依赖注入有什么区别? 假定:应用程序A,需要访问外部资源C。这里使用了容器B(是指用来实现 IOC/DI 功能的一个框架程序)。 A需要访问C B获取C然后返回给A IOC inversi...
2017-03-17
Bootstrap缩略图与警告框学习使用
本文实例为大家分享了Bootstrap缩略图与警告框的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta...
2017-03-20
Bootstrap进度条学习使用
本文实例为大家分享了Bootstrap进度条的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8...
2017-03-20
EsLint入门学习教程
介绍 ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可扩...
2017-03-16
Bootstrap选项卡学习笔记分享
本文实例为大家分享了Bootstrap选项卡的学习笔记,供大家参考,具体内容如下 tab选项卡 <body> <div class="container"> <!-- tab选...
2017-03-14
回到顶部