对比学习sass和stylus的常用功能
在众多的css
预处理器语言中,sass
和stylus
算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言。
本文涉及到的sass
部分,均来自于阮一峰老师的SASS用法指南
。同时不会对sass
和stylus
的具体用法做十分细致的介绍,感兴趣的同学可参考如下资料进行系统的学习。
sass中文官网
sass用法指南
stylus官网
stylus中文文档
下面就对二者的常用功能做一个简单的对比
1、安装
sass
时基于Ruby
语言写的,所以安装sass
之前,需要先安装Ruby
。假设你已经安装了Ruby
,在命令行直接运行。
gem install sass
安装成功之后,就可以使用了。
stylus
是nodejs
的一个模块,安装之前,请确保安装了nodejs
。然后直接在命令行中运行。
npm install stylus
然后,npm
就会为你下载最新包到当前目录的node_modules
目录中
2、使用
sass
就是普通的文本文件,里面可以是css
语法,根据后缀名的不同(sas
s的后缀名可以是.sass
或.scss
)书写格式不同,具体的sass
语法见阮一峰老师的文章。
stylus
也是普通的文本文件,里面也可以是css
语法,stylus
文件的后缀名一般是.styl
。
两者都提供了基本的命令行语法,所以我们可以直接在命令行中使用命令对sass
文件或者style
文件进行编译。但相对来说stylus
的命令行操作更为强大。
下面的命令可以直接在屏幕上显示.scss
文件转化后的css
代码(假设文件的名称就是test)
sass test.scss
对应的stylus
的操作就是:
stylus test.styl
但是stylus
的编译结果不会再屏幕上输出,而是生成同名的css
文件。
如果要将显示结果保存成文件,sass
需要在后面再跟一个.css
文件名。
sass test.scss test.css
stylus
则直接如下,就生成了一个同名的文件。
stylus test.styl
sass
提供了四种编译风格:
nested
:嵌套缩进的css代码,它是默认值。expanded
:没有缩进的、扩展的css代码。compact
:简洁格式的css代码。compressed
:压缩后的css代码。
sass
的编译选项的使用,需要使用--style
来指定:
sass --style compressed test.sass test.css
style
提供了--compress
来压缩编译结果:
stylus --compress test.styl
sass
可以监听某个文件或者目录,一旦源文件改变,就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
stylus
也是通过--watch
的选项来监听源文件的变动,改变和自动编译。
stylus --watch test.styl
除此,stylus
的命令行工具还提供了一些其它基本的功能:
1. repl
环境
在命令行中直接输入stylus
就得到了stylus
的repl
环境,我们可以直接在命令行中书写stylus
的内容:
bodycolor: red
然后按下ctrl+d
键,就直接在命令行中输出编译结果。
2. stylus可以直接将css编译成stylus格式
stylus --css test.css
3、变量
sass
允许使用变量,所有的变量以$
开头。
$blue: #1875e7;
div {color: $blue}
stylus
也允许使用变量,变量名的$
是可选的,变量值可以是表达式。
color = blue 或者 $color = blue
divcolor: color
如果变量需要镶嵌在字符串中,sass
需要写在#{}
之中。
$side: left;
.rounded {border-#{$side}-radius: 5px;
}
stylus
则需要使用{}
side = 5px
.roundeed border-{side}-radius: 5px
4、计算功能
sass
允许在代码中使用算式:
body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;}
stylus
同样也支持在代码中使用算式:
bodymargin: (14px/2)top: 50px + 100pxright: var * 10%
注意%
也是stylus
的一个运算符,所以上面的right
实际的计算结果是var * 10 % === var * 10
。
stylus
的运算十分强大,给予了css
的编程能力。有兴趣的同学可以张鑫旭大神翻译的stylus文档。
除此,stylus
有一个更为强大的地方就是,stylus
可以直接进行属性查找,使用@
符号查找属性。如一个常见的垂直居中的例子:
divwidth: 100pxheight: 100pxposition: absolutetop: 50%left: 50%margin-left: -(@width / 2)margin-top: -(@width / 2)
5、嵌套
sass
允许选择器嵌套。比如下面的css
代码:
div h1 {color: red}
可以写成:
div {h1{color: red}}
stylus
同样支持选择器嵌套,上面的代码可以写成:
divh1color: red
sass
也支持属性嵌套,比如border-color
属性可以写成:
p{border: {color: red;}}
border
后面需要添加冒号。
stylus
对这个功能没有提供支持
在嵌套的代码块内,两者都可以通过&
引用父元素。比如a:hover
伪类,可以写成:
a{&:hover {color: #ffb3ff}
}
a&:hovercolor: #ffb3ff
6、注释
sass
提供了三种风格的注释:
标准的
css
注释 /* comment */,会保留到编译后的文件中。单行注释
// comment
,只保留在sass源文件中。编译后省略。在
/*!
后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*! 重要注释 */
stylus
也提供了上述三种注释:
//
单行注释,css
不输出/* 多行注释只在compress选项未启用的时候输出到编译后的文件中 */
/*! 多行注释,任何情况都输出到编译后的文件中 */
7、继承
sass
允许一个选择器,继承另一个选择器。比如,现在class1
:
.class1 {border: 1px solid #ddd}
class2
要继承class1
,就要使用@extend
命令。
.class2 {@extend .class1font-size: 120%}
stylus
的继承方式和sass
基本一致,但有一些稍微的不同。
stylus
实现继承:
.class1border: 1px solid #ddd
class2
继承class1
.class2@extend .class1font-size: 120%
两者的区别主要在于--sass
不允许@extend
嵌套选择器:
如下面的样式:
divh1color: red
在sass
中,如果按照下面这样写就会直接编译错误。
.div2 {@extend div h1}
而在stylus
中却可以成功编译,因为stylus
中,只要选择器匹配,继承就会生效。
.div2@extend div h1
8、Mixin
sass
使用@mixin
命令,定义一个代码块。
@mixin left {float: left;margin-left: 10px;}
使用@include
命令,调用这个mixin
。
div{@include left;}
stylus
中的mixin
和其函数的书写形式是一样的。但是应用却很大的不同!书写形式如下:
left()float: leftmargin-left: 10px
调用的时候直接通过名称调用:
divleft()
sass
中的mixin
可以传递参数,同时还可以为参数提供默认值。如下面是一个mixin
实例,用来生成浏览器的前缀。
@mixin rounded($vert, $horz, $radius: 10px){border-#{$vert}-#{$horz}-radius: $radius;-moz-border-radius-#{$vert}-#{$horz}: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;}
使用的时候可以像下面这样调用:
#navbar li {@include rounded(top, left)}
stylus
也允许给mixin
提供参数并提供默认值,所以上面的形式在stylus
中的书写是这样的:
rounded(vert, horz, radius = 10px)border-{vert}-{horz}-radius: radius-moz-border-radius-{vert}{horz}: radius;-webkit-border-{vert}-{horz}-radius: radius;
按照如下方式使用:
#navbarli rounded(top, left)
除此,stylus
的mixin
还提供了一些其他的很强大的功能:
1、arguments
变量
这个变量更合理的解释是定义的mixin
当作函数调用的时候(二者的定义是相同的)存在的局部变量。我们可以这样使用:
radius()border-radius: arguments
调用:
divradius(5px 10px/5px 5px)
2、父级引用
我们同样可以在stylus
的mixin
中使用父级引用操作符:&
hover()a&:hovercolor: red
9、颜色函数
sass
提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
在stylus
中也提供了内置的颜色函数,使用也十分简单。如:
red(#c00) //返回颜色的r色值
image-size(path) //获取指定path图片的width和height
更多的方法,请参考stylus内置方法
10、插入文件
sass
的@import
命令,用于插入外部的文件。
@import "path/filename.scss";
如果是css
文件,则等同于css
的import
命令。
@import "foo.css";
stylus
也提供了@import
命令用于插入外部的文件,和sass
的用法基本一致,如下:
@import "reset.css"
@import "reset.styl"
除了@import
命令,stylus
也提供了其他的几个比较实用的命令。
1、@media
工作原理和css
中常规的媒体查询一样,实用stylus
的书写形式:
@media print#header#footerdisplay: none
2、@font-face
用法和常规css
用法一致,同样使用stylus
的格式书写:
@font-facefont-family Geofont-style normalsrc url(fonts/geo_sans_light/GensansLight.ttf)
3、@keyframes
写法和常规的css
一致,但会默认编译成@-webkit-keyframes
,即:
@keyframes0%color: red100%color: green
会变编译成:
@-webkit-keyframes{0%{color: red}100%{color: green}}
我们可以全局指定vendors
变量进行标准解析:
vendors = official
@keyframes0%color: red100%color: green
会编译成:
@keyframes{0%{color: red}100%{color: green}}
11、条件语句
sass
中使用@if
可以用来做判断,如下:
p {@if 1 + 1 == 2 {border: 1px solid;}@if 5 < 3 {border: 2px dotted;}}
stylus
中可以直接使用if
关键字,级上面的写法在stylus
中的书写方式如下:
pif 1 + 1 == 2border: 1px solidif 5 < 3border: 2px dotted
sass
中也提供了@else
关键字和@if
搭配:
@if lightness($color) > 30% {background-color: #000;
} @else {background-color: #fff;
}
stylus
则可以直接在if
语句后面跟上else
语句:
if red(color) > 50 {} else {}
除此,stylus
也提供了unless
关键字,同时支持条件后置语法,具体参考stylus条件
12、循环语句
sass
支持for
循环:
@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}
也支持while
循环:
$i: 6;@while $i > 0 {.item-#{$i} { width: 2em $i; }$i: $i - 2;
}
也可以使用@each
命令进行循环:
@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");}
}
stylus
只提供了一个for/in
进行循环:
for i in 1 2 3 4 5 6 7 8 9.border-{i}border: solid blue unit(i, 'px')
13、自定义函数
sass
允许用户编写自己的函数:
@function double($n) {@return $n * 2;
}
#sidebar {width: double(5px);
}
stylus
也允许用户编写自己的函数,函数的定义方式和mixin
定义方式一样:
double(n)n * 2
#sidebarwidth: double(5px)
除了可以给函数赋予默认参数之外,stylus
的函数是允许返回多个值的:
width()20px 10pxwidth()[0] // 20px
以上就是对sass和sylus常用功能的简单介绍,在对比中学习,相信读者会很快了解两者之间差异。大家只要掌握了以上提到的二者的常用功能,就能使用这两种预处理器应对日常的开发了。但这还有很多功能这里没有提到,尤其是stylus
作为nodejs
的一个模块,提供了强大的javascript
编程的能力,想了解更多内容的同学可以通过以上提供的链接进行学习。
原文地址:https://segmentfault.com/a/1190000008013566
转载于:https://www.cnblogs.com/lalalagq/p/9963731.html
对比学习sass和stylus的常用功能相关推荐
- 对比学习sass和stylus的常用功能 1
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- JavaSE学习总结(八)常用类(上)Object类==与equals方法的区别浅克隆的特点Scanner类String类String两种创建对象方式的区别String类的各种功能
JavaSE学习总结(八)常用类(上)/Object类/==与equals方法的区别/浅克隆的特点/Scanner类/String类/String两种创建对象方式的区别/String类的各种功能 常用 ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- WPF:从WPF Diagram Designer Part 4学习分组、对齐、排序、序列化和常用功能
在前面三篇文章中我们介绍了如何给图形设计器增加移动.选择.改变大小及面板.缩略图.框线选择和工具箱和连接等功能,本篇是这个图形设计器系列的最后一篇,将和大家一起来学习一下如何给图形设计器增加分组.对齐 ...
- jQuery框架学习第十天:实战jQueryUI常用功能
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
- android手机常用功能,Windows Phone 7/Android手机常用功能对比
据资讯网站Neowin报道,近日,微软发布了旗下手机操作系统平台WindowsPhone 7,智能手机领域的局势变得更加扑朔迷离.Neowin网站开辟专栏,就WP7和Android两大平台手机的诸多性 ...
- 微擎学习随记_常用功能实现
微擎学习随记_常用功能实现 消息通知: 代码位置: addons/项目名/core/model/notice.php(设置微信信息通知和微信模板消息通知) 需求: 店铺得到收益之后以消息的形式通知店铺 ...
最新文章
- C++和MATLAB混合编程-DLL篇
- Python实现线性回归2,梯度下降算法
- apk图标存放位置_安卓系统下安装完apk程序后,具体的文件夹位置在哪里呢?
- 用什么代码可以改变键盘_为什么我改变了对代码质量的看法
- TikZ学习笔记(三)图形的标记与交点
- WPF事件,路由事件
- 安装tomcat时出错:failed to install tomcat6 service问题的解决方法
- 数值分析——三角分解法(LU分解法)C++
- 笔记本连接无线蓝牙缺少驱动解决方法
- android京东流式布局,京东移动端首页流式布局
- 企业微信的一周小结是怎么统计的?
- 怎么才能够坚持做一件事并且把它做好?
- 支付宝当面付网站对接支付教程
- 编程序找出1000之内的所有完数
- 关于微信小程序开发注意
- 学习系列之天眼查爬虫
- [学习笔记] Python【第031讲:永久存储:腌制一缸美味的泡菜】总结
- 基于Oneplus 7 Pro的Flyme9&MIUI12.5刷机教程
- Linux文件与目录的默认权限与隐藏权限(chattr,lsattr)
- 专利权利要求的布局设计--原创文章,欢迎大家一起探讨