古往今来,生产力的发展,推动着人类社会的进步。人类社会的进步,又主导了劳动工具的革新。
Css亦然,发展至今,Css3 已经普及,甚至Css 4 的规范,都已经在制定中。功能越来越强大,视觉越来越酷炫,但就开发者而言,开发维护的体验,却并未有明显提升。
这个时候,css 的各种劳动工具应运而生,Sass、Less、Stylus,像写 JQuery 一样 写样式,这大大的提升了开发速度,代码优雅干净,结构层次分明,维护起来也是 so easy,这对开发者而言,简直像荒漠里,遇到的一股清流。
注释
.list {
background: #fff; // 注释内容,不出现在生成的 css 文件中
border:1px solid #ddd; /* 注释内容,出现在生成的 css 文件中 */
}
文章样式都是基于 如下 Vue.js 页面演示
<!-- List.vue -->
<template>
<div class="list">
<p></p>
<div class="sass">
<h2>sass title</h2>
<p>sass text</p>
</div>
<div class="less">
<h2>less title</h2>
<p>less text</p>
</div>
<div class="stylus">
<h2>stylus title</h2>
<p>stylus text</p>
</div>
</div>
</template>
1、引用外部样式表
<!-- Sass -->
<style lang="scss">
@import "../assets/css/style.scss";
</style>
<!-- Less -->
<style lang="less">
@import "../assets/css/style.less";
</style>
<!-- stylus -->
<style lang="Stylus">
@import "../assets/css/style.styl"
</style>
2、选择器
<!-- Sass -->
<style lang="scss">
.sass h2,.sass p{
background: #ddd;
&:hover{
background:blue;
}
}
</style>
<!-- Less -->
<style lang="less">
.less h2,.less p{
background: #ddd;
&:hover{
background:blue;
}
}
</style>
<!-- Stylus -->
<style lang="Stylus">
.stylus h2
.stylus p
background #ddd
&:hover
background blue
</style>
3、变量
变量前面的标识符:
Sass 用的是跟 S 类似的美元符 $,
Less 用的 @,
Stylus 可以不用或者 $
<!-- Sass -->
<style lang="scss">
$tip:red;
.sass{
background: #fff;
color:$tip;
}
</style>
<!-- Less -->
<style lang="less">
@tip:blue;
.less{
background: #fff;
color:@tip;
}
</style>
<!-- Stylus -->
<style lang="Stylus">
tip = green /** $tip = green **/
.stylus
background #fff
color tip /** color $tip **/
</style>
4、继承
Sass 和 Stylus 都是: @extend .class ( Sass:又模仿我的脸! );
Less 这回走极简风,直接调用:.class
<!-- Sass -->
<style lang="scss">
.middle{
display: table;
margin:0 auto;
}
.sass{
background: #fff;
@extend .middle;
}
</style>
<!-- Less -->
<style lang="less">
.middle{
display: table;
margin:0 auto;
}
.less{
background: #fff;
.middle;
}
</style>
<!-- Stylus -->
<style lang="Stylus">
.middle
display table
margin 0 auto
.stylus
background #fff
@extend .middle
</style>
5.方法
Sass 是比较墨迹的 @mixin + @include,且括号内的参数,需加上美元符 $;
Less 参数同样需要加上 变量标识符 @;
需要注意,当设置默认参数,Sass、Less 是 冒号:$width:3px || @width:3px,Stylus 是 等号:width=3px
<!-- Sass -->
<style lang="scss">
@mixin border($width,$color){ /** 默认参数值: @mixin border($width:3px,$color:#f1f1f1){ **/
border:$width solid $color;
}
.sass{
background: #fff;
@include border(2px,red) /** @include border() **/
}
</style>
<!-- Less -->
<style lang="less">
.border(@width,@color){ /** 默认参数值:.border(@width:3px,@color:#f1f1f1){ **/
border:@width solid @color;
}
.less{
background: #fff;
.border(2px,red); /** .border(); **/
}
</style>
<!-- Stylus -->
<style lang="Stylus">
border(width,color) /** 默认参数值:border(width=3px,color=#f1f1f1) **/
border width solid color
.stylus
background #fff
border(2px,red) /** border() **/
</style>
未完待续。。。