您的位置：首页 > 其它

Sass vs Less vs Stylus

2017-07-13 16:21 435 查看
 LessSassStylus
安装npm install -g less,即可被编译成.css文件先安装ruby，再安装sass：gem install sass。

四种编译风格。

npm install stylus

变量使用@标识符，@border-color:#CCCCCC；
@border-color : #b5bcc7;

.mythemes tableBorder{
border : 1px solid @border-color;
}
作用域：Less有全局变量与局部变量		使用：$标识符。
$blue : #1875e7;　
div {
　color : $blue;
}
变量需要写在字符串中时，必须写在#{}中

全是全局变量，到那时可以通过!default来改变值

直接指定变量：font-size =
font-size = 14px

body
font font-size Arial, sans-seri

14px
插值无无通过使用{}字符包围表达式来插入值，其会变成标识符的一部分vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args

border-radius()
vendor('border-radius', arguments)

box-shadow()
vendor('box-shadow', arguments)

button
border-radius 1px 2px / 3px 4px

计算组织数值型value。提供加减乘除运算。
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
提供加减乘除运算。
body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

一元运算符

二元运算符

范围”..", "..."

指数：**

相等与关系运算

真假

逻辑运算

存在操作：in

嵌套
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
嵌套方式与html比较类似
在嵌套代码中，可以使用&引用父元素
a {
　　　　&:hover { color: #ffb3ff; }
　　}
 
注释“//”，单行注释，不能显示在编译后的css中；"/**/“多行注释“//”，单行注释，不能显示在编译后的css中；"/**/“多行注释//单行注释，
/*

              *多行注释

               */

/*!

              *多行缓冲注释

              */

Mixin在class中引入一个已经定义了的class，可带参数
// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
只需在classB中根据classA的命名使用。		使用@Mixin命令定义，使用@include命令调用
　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

div {
　　　　@include left;
　　}
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n

form input[type=button]
border-radius(5px)

继承无允许一个选择器集成另一个选择器

。.class1 {
　　　　border: 1px solid #ddd;
　　}
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}
父级引用：混合书写可以利用&继承
stripe(even = #fff, odd = #eee)
tr
background-color odd
&.even
&:nth-child(even)
background-color even

table
stripe()
td
padding 4px 10px

table#users
stripe(#303030, #494848)
td
color white
条件语句无if、if...else
switch
if、if...else
unless
negative
循环语句无for
while
each
for/in
Mixins使用循环
函数
if/unless
函数 
@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}
有自定义函数
add(a, b)
a + b
body
padding add(10px, 5)


实现方式基于javascript，客户端基于ruby，服务端 
stylus与前两个与处理语言最大的不同是不适用{}，而改成使用缩进。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  sass less stylus
相关文章推荐
新的分享
章节导航