关键词:
参考链接:预处器的对比——Sass、LESS和Stylus http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html
因为在vue.js项目(高仿饿了么app)中会用到stylus,所以本文重点关注stylus的用法
1.语法
Stylus的语法花样多一些,它使用“.styl”的扩展名,Stylus也接受标准的CSS语法,但是他也接受不带花括号和分号的语法,如下所示:
/* style.styl */ h1 { color: #0982C1; } /* 省略花括号 */ h1 color: #0982C1; /* 省略花括号和分号 */ h1 color #0982C1
2.变量
你可以在CSS预处理器中声明变量,并在整个样式表中使用。CSS预处理器支持任何变量(例如:颜色、数值(不管是否包括单位)、文本)。然后你可以在任意地方引用变量。
Stylus声明变量没有任何限定,你可以使用"$"符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。有一点需要注意的是,如果我们使用"@"符号开头来声明(0.22.4)变量,Stylus会进行编译,但其对应的值并不会赋值给变量。换句话说,在Stylus中不要使用“@”符号开头声明变量。
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
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名,然后在定义参数和默认值之间用等号(=)来连接。
/* Stylus 定义了一个名叫error的mixin,这个error设置了一个参数“$borderWidth”,在没特别定义外,这个参数的值是默认值2px */ error(borderWidth= 2px) { border: borderWidth solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; error(); /* 调用error mixins */ } .login-error { left: 12px; position: absolute; top: 20px; error(5px); /* 调用error mixins,并将参数$borderWidth的值指定为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; /* 继承.block所有样式 */ border: 1px solid #EEE; } ul, ol { @extend .block; /* 继承.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中,并不喜欢用@import来导入样式,因为这样的做法会增加HTTP的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同,它只是在语义上导入不同的文件,但最终结果是生成一个CSS文件。如果你是通过“@import ‘file.css‘”导入“file.css”样式文件,那效果跟普通CSS导入样式文件一样。注意:导入文件中定义了变量、混合等信息也将会被引入到主样式文件中,因此需要避免他们的相互冲突。
/* file.{type} */ body { background: #EEE; }
@import "reset.css"; @import "file.{type}"; p { background: #0982C1; }
转译后
@import "reset.css"; body { background: #EEE; } p { background: #0982C1; }
7.颜色函数
颜色函数是CSS预处里器中内置的颜色函数功能,这些功能可以对颜色值进行处理,例如颜色的变亮、变暗、渐变颜色等处理十分的方便。
lighten(color, 10%); /* 返回的颜色在‘color‘基础上变亮10% */ darken(color, 10%); /* 返回的颜色在‘color‘基础上变暗10% */ saturate(color, 10%); /* 返回的颜色在‘color‘基础上饱和度增加10% */ desaturate(color, 10%); /* 返回的颜色在‘color‘基础上饱和度降低10% */
下面是Stylus颜色函数的一个简单实例
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
8.运算符
body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10; }
实际运用
属性前缀
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的属性有并不是所有浏览器都支持属性的标准语法,因此在实际运用中时,不得不加上各浏览器的前缀来识别。
css-stylus
1.stylus对定义CSS的方式进行了改变,允许我们简化CSS的书写格式,同时允许我们定义变量、定义函数来操作CSSCSS处理器类型:sass/less/stylusstylus结构1.1用法<stylelang="stylus">/*引入外部css文件*/@import‘assets/css/reset.css‘/*定义变量... 查看详情
sass,less,stylus(代码片段)
sass,less,stylus三者的用法sasslessstylussasscss编程语言变量,控制,函数创建a.scss在父文件夹下开启这个$a:50px;/*变量*/divwidth:$a;height:50px;background-color:aqua;&:hoverbackground-color:yellow;有以下特点 查看详情
stylus
stylus介绍是个什么鬼?对于开发来说,CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具,LESS,SASS都在这方面做了一些贡献。Stylus是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预... 查看详情
stylus在静态页面上的使用经验
前段时间做vue项目,用到了css的提升开发效率的工具stylus,感觉很好用。现在又开始写静态页面了,于是将强大的stylus拿过来继续用。于是就写了这篇使用经验,算是自己总结一下。stylus的安装使用前,我们需要在终端里面进行... 查看详情
stylus项目知识点
1、在项目中,引入.sty文件的时候,用来下面方式1@import"~common/stylus/variable.styl"~是stylus的写法,参考https://github.com/shama/stylus-loader~common表示相对common,然后我们在webpack配置了common的alias,就能找到了它的路径了 查看详情
css预处器的对比——sassless和stylus
预处器的对比——Sass、LESS和Stylus转载:英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout中文译文:http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocesso 查看详情
npm安装stylus和stylus-loader
在package.json dependencies添加如下代码"stylus-loader":"^3.0.1","stylus":"0.52.4",后面对应的是版本号,可以在npm官网上搜索然后在命令行执行(也可以用淘宝镜像cnpm)npminstall同理可以安装其他依赖,比如less,sass等 查看详情
css预处理器stylus分享
CSS预处理器Stylus分享ps:为了分享,内容东拼西凑,并非原创,很多参考了张鑫旭大大翻译的中文文档。这里放上两个不错的stylus链接:https://github.com/leeseean/stylus-style-guide githubstylus语法规范http://blog.hooperui.com/561-2/ 预处理... 查看详情
stylus基本使用(代码片段)
...开始一顿搜索。发现文件后缀是.styl的这个哥们儿学名叫stylus,是CSS的预处理框架。CSS预处理,顾名思义,预先处理CSS。那stylus咋预先处理呢?stylus给CSS添加了可编程的特性,也就是说,在stylus中可以使用变量、函数、判断、循... 查看详情
vue和stylus在subline中显示高亮
...两个插件 VueSyntaxHighlight 和 stylus1.按住ctrl+shift+p2.输入:installPackage3.输入:VueSyntaxHighlight / 输入: stylus4.重新打开.vue的文件就可以了 安装完毕后:这里还有一个小点要注意,我... 查看详情
stylus安装使用图解
Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。比较年轻,其本质上做的事情与 SASS/LESS... 查看详情
在vue中使用stylus
概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个CSS预处理器(框架):Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了,总的来说,CSS预处理器... 查看详情
在vue中使用stylus
概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个CSS预处理器(框架):Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了,总的来说,CSS预处理器... 查看详情
phpstorm使用stylus回车自动缩进的问题
如图所示,取消勾选即可换行自动缩进,不用再一个个打空格了! 查看详情
vue--stylus入门使用方法
sizes()15px10pxsizes()[0]//=>15px stylus介绍是个什么鬼?对于开发来说,CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具,LESS, SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架,2010年产生,来自... 查看详情
(转)预处器的对比——sassless和stylus
英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout原文链接:http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html介绍CSS预处理器是一种 查看详情
stylus(css预编译器)
推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/安装 npminstall-gstylus自动编译 $stylus-wdemo.styl-odist/ demo.styl是styl文件,dist是要生成样式的目录文件名,-w是自动监视文件,-o是将编译后的CSS文件输出到指定... 查看详情
Bootstrap/Stylus - 使表格列尽可能小
】Bootstrap/Stylus-使表格列尽可能小【英文标题】:Bootstrap/Stylus-MakeTableColumnassmallaspossible【发布时间】:2014-04-0217:26:28【问题描述】:我正在练习使用Bootstrap来让我的表格在我正在创建的搜索列表上做出响应,问题是我希望我的两... 查看详情