身为切图界的一员,或者说在前端界打滚了一段日子的你。会慢慢地发现。如今的css编写已经不能满足自己的效率。

假设有更强大的框架,让你的css更灵活和更easy复用和维护,那该多好啊。非常明显,这个早已经不是什么新奇事,sass和less就是这么2个非常优秀的样式预处理器。能让你的效率高速提高。接下来就谈谈它们。

1.样式预处理器的定义

样式预处理器,简单地来概括就是技术大牛通过一门新的语言,让css的编写具备各种变量和属性,你依照它的语法写好后,就能编译,生成对应的css文件。

当然这些处理器能够让你的css更简洁,易懂,具备更强的可移植性和维护性。

前端界里面,譬如Sass、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等都是上面所说的样式预处理器。这里不一一介绍,我仅仅说一下比較优秀的sass和less。

2.sass和less这对好基友

2.1 sass的前世今生

SASS在07到08年就出现了,是对CSS3(层叠样式表)的语法的一种扩充。它能够使用巢状、混入、选择子继承等功能。能够更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览能够使用。也就是说它本身的语法并不太easy让浏览器识别(尽管它和CSS的语法很的像,差点儿一样),由于它不是标准的CSS格式。在它的语法内部能够使用动态变量等。所以它更像一种极简单的动态语言。

2.2 less的前世今生

度娘告诉我们,LESS是一种由Alexis Sellier设计的动态层叠样式表语言。
LESS是开源的,其第一个版本号由Ruby写成,但在兴许的版本号其中。Ruby逐渐被替换为JavaScript。受益于JavaScript。LESS能够在client上执行(IE6+、Webkit、Firefox),也能够在服务端执行(Node.js、Rhino)。
LESS与CSS较为接近,一个合法的CSS代码段本身也是一段合法的LESS代码段。

LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。


3.框架的对照

3.1 实现方式的不一样

LESS和Sass的主要不同就是他们的实现方式。LESS是基于JavaScript,是在client处理的。然而。Sass是基于Ruby的,是在server端处理的。

非常多开发人员不会选择LESS由于JavaScript引擎须要额外的时间来处理代码然后输出改动过的CSS到浏览器。

可是LESS环境较Sass简单。这也使得不少的童鞋选择LESS。

3.2 语法上的共性

Sass和LESS都使用的是标准的CSS语法。

Sass使用“.scss”扩展名,而LESS使用“.less”扩展名。

3.2.1 变量

Sass声明变量必须是“$”开头,后面紧跟变量名和变量值,并且变量名和变量值须要使用冒号(:)隔开。
$a: 14px;
$b: #000;
$C: solid
.btn{
width: $a;
border: 1px $C $b;
}

LESS声明变量和Sass声明变量差点儿相同。差别就是变量名前面使用是的“@”字符:

@a: 14px;
@b: #000;
@C: solid
.btn{
width: @a;
border: 1px @C @b;
}

3.2.2 嵌套(Class中嵌套class,从而降低反复的代码)

body {
padding: 5px;
.head{
height: 10px;
a {
color: #000;
&:hover {
text-decoration: underline;
}
}
}
}

SASS和LESS在嵌套语法上基本一样,简单快捷。

3.2.3 混入

在样式预处理器里面,你能够用一个变量。定义一段常常被用到的代码,然后供其它样式引用,方便快捷。这便是混入了。
在SASS里面。
@mixin aq($borderWidth: 1px) {
border: $borderWidth solid #F00;
}
.btn {
padding: 5px;
@include aq(2px);
}

在LESS里面。

.aq($borderWidth: 1px) {
border: $borderWidth solid #F00;
}
.btn {
padding: 5px;
.aq(2px);
}

3.2.4继承

继承和混入有点相似。
在SASS里面,
.a {
margin: 10px 5px;
padding: 2px;
}
.b{
@extend .a;
border: 1px solid #000;
}

在LESS里面,

.a {
margin: 10px 5px;
padding: 2px;
}
.b{
.a;
border: 1px solid #000;
}

3.2.5颜色函数

颜色函数是CSS预处里器中内置的颜色函数功能,这些功能能够对颜色值进行处理,对于颜色的变亮、变暗、渐变颜色等处理都挺好用的。
比如在SASS里面,
invert($color);     /* 返回$color的反相色 */
lighten($color, 50%); /* 返回的颜色在$color基础上变亮50% */
saturate($color, 50%); /* 返回的颜色在$color基础上饱和度添加50% */
desaturate($color, 50%); /* 返回的颜色在$color基础上饱和度降低50% */
grayscale($color); /* 返回$color的灰度色*/
darken($color, 50%); /* 返回的颜色在$color基础上变暗50% */


在LESS里面,


invert(@color);     /* 返回@color的反相色 */
lighten(@color, 50%); /* 返回的颜色在@color基础上变亮50% */
saturate(@color, 50%); /* 返回的颜色在@color基础上饱和度添加50% */
desaturate(@color, 50%); /* 返回的颜色在@color基础上饱和度降低50% */
grayscale(@color); /* 返回@color的灰度色*/
darken(@color, 50%); /* 返回的颜色在@color基础上变暗50% */

3.2.6 运算

.a{
padding: (100px/2);
top: 10px + 100px;
left: 100px - 50px;
top: 10 * 10;
}

事实上还有非常多细节的东西,有空我再慢慢补充了。





Author: Alone

Antroduction: 高级前端开发project师

Sign: 人生没有失败,仅仅有没到的成功。


sass和less,优秀的前端样式预处理器的更多相关文章

  1. wepy中如何使用stylus等样式预处理器

    wepy中如何使用stylus等样式预处理器 一.如何在wepy中使用stylus 1.安装wepy-compiler-stylus(以及stylus, stylus-loader) npm inst ...

  2. vue使用stylus样式预处理器

    vue使用stylus样式预处理器,样式总是报错,需要从上一行的样式回车换行才不会报错 <style lang="stylus" scoped> .navbar mar ...

  3. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  4. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. 前端 CSS预处理器Less

    引文 Less是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(Mixins).操作(Operations)和功能(Functions)等等, ...

  6. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  7. CSS 预处理器框架

    CSS 预处理器框架 可以按照需求来使用别人的代码 1.sass (compass) 2.less (lesshat/EST) 3.提供现成的 mixin 4.类似 JS 类库 ,封装常用功能 css ...

  8. 前端知识体系之CSS及其预处理器SASS/LESS

    如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子: body ...

  9. 前端入门23-CSS预处理器(Less&Sass)

    声明 本篇内容梳理自以下几个来源: Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网 感谢大佬们的分享. 正文-CSS预处理(less&Sass) ...

随机推荐

  1. js中迭代的常用几种方法

    var arr = [1,3,2,5,3]; //forEach 两个参数,第一个为数组内容,第二个为数组下标arr.forEach(function(item,index) { console.lo ...

  2. 【Uva 307】Sticks

    [Link]: [Description] 给你最多n个棍子; (n< = 64) 每根棍子长度(1..50) 问你这n根棍子,可以是由多少根长度为x的棍子分割出来的; x要求最小 [Solut ...

  3. HDU 3714 Error Curves

    Error Curves 思路:这个题的思路和上一个题的思路一样,但是这个题目卡精度,要在计算时,卡到1e-9. #include<cstdio> #include<cstring& ...

  4. jmeter名词解释之聚合报告

    新浪围脖>@o蜗牛快跑o    温馨提示: 1. tps(吞吐量)表征系统性能,系统的好坏能够用这个评估 2. 90%Line是满足需求响应时间的重要指标,假设用户需求说是响应时间不小于5s,那 ...

  5. 使用bitmap处理海量数据

    bitmap是一个十分实用的结构.所谓的Bit-map就是用一个bit位来标记某个元素相应的Value, 而Key即是该元素.因为採用了Bit为单位来存储数据,因此在存储空间方面,能够大大节省.  适 ...

  6. JSONArray和JSONObject的简单使用

    一.为什么要使用JSONArray和JSONObject 1.后台 -->前台 能够把java对象和集合转化成json字符串格式,这样在前台的ajax方法中能够直接转化成json对象使用 ,从后 ...

  7. Android 经常使用的adb命令

    1.安装APK(假设加 -r 參数,保留已设定数据.又一次安装filename.apk) adb install xxx.apk adb install -r xxx.apk 2.卸载APK(假设加 ...

  8. Python: PS 滤镜特效 -- Marble Filter

    本文用 Python 实现 PS 滤镜特效,Marble Filter, 这种滤镜使图像产生不规则的扭曲,看起来像某种玻璃条纹, 具体的代码如下: import numpy as np import ...

  9. 69.nodejs对mongodb数据库的增删改查操作

    转自:https://www.cnblogs.com/sexintercourse/p/6485381.html 首先要确保mongodb的正确安装,安装参照:http://docs.mongodb. ...

  10. C# Unable to load DLL 'WzCanDll.dll':找不到指定的模块

    一.打开app无法加载DLL 我用C++编写的DLL,然后用C#写的界面APP,在自己的电脑上打开没有问题,放在其它电脑上就出现无法加载DLL库的问题,一连接APP就会出现问题,如下图所示: 二.解决 ...