Css预编语言及区别详解


Posted in HTML / CSS onApril 25, 2021

一、是什么

Css预编语言及区别详解

Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题

需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的  Css 代码

Css 预处理器便是针对上述问题的解决方案

预处理语言

扩充了 Css 语言,增加了诸如变量、混合(mixin)、函数等功能,让  Css 更易维护、方便

本质上,预处理是 Css 的超集

包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 Css 文件

二、有哪些

Css 预编译语言在前端里面有三大优秀的预编处理器,分别是:

  • sass
  • less
  • stylus

sass

2007 年诞生,最早也是最成熟的 Css 预处理器,拥有 Ruby 社区的支持和  Compass 这一最强大的  Css 框架,目前受  LESS 影响,已经进化到了全面兼容  Css 的  Scss

文件后缀名为 .sass 与 scss ,可以严格按照 sass 的缩进方式省去大括号和分号

less

2009年出现,受 SASS 的影响较大,但又使用  Css 的语法,让大部分开发者和设计师更容易上手,在  Ruby 社区之外支持者远超过  SASS

其缺点是比起 SASS 来,可编程功能不够,不过优点是简单和兼容  Css ,反过来也影响了  SASS 演变到了 Scss 的时代

stylus

Stylus 是一个 Css 的预处理框架,2010 年产生,来自  Node.js 社区,主要用来给  Node 项目进行  Css 预处理支持

所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的 Css 。比较年轻,其本质上做的事情与 SASS/LESS 等类似

三、区别

虽然各种预处理器功能强大,但使用最多的,还是以下特性:

  • 变量(variables)
  • 作用域(scope)
  • 代码混合( mixins)
  • 嵌套(nested rules)
  • 代码模块化(Modules)

因此,下面就展开这些方面的区别

基本使用

less和scss

.box {
  display: block;
}

sass
 

.box
  display: block

stylus

.box
  display: block

嵌套

三者的嵌套语法都是一致的,甚至连引用父级选择器的标记 & 也相同

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

less

.a {
  &.b {
    color: red;
  }
}

变量

变量无疑为 Css 增加了一种有效的复用方式,减少了原来在 Css 中无法避免的重复「硬编码」

less 声明的变量必须以 @ 开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号 : 分隔开

@red: #c00;

strong {
  color: @red;
}

sass 声明的变量跟 less 十分的相似,只是变量名前面使用 @ 开头

$red: #c00;

strong {
  color: $red;
}

stylus 声明的变量没有任何的限定,可以使用 $ 开头,结尾的分号 ; 可有可无,但变量与变量值之间需要使用 =

在 stylus 中我们不建议使用 @ 符号开头声明变量

red = #c00

strong
  color: red

作用域

Css 预编译器把变量赋予作用域,也就是存在生命周期。就像  js 一样,它会先从局部作用域查找变量,依次向上级作用域查找

sass 中不存在全局变量

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

编译后

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色(无全局变量概念)*/
}

所以,在 sass 中最好不要定义相同的变量名

less 与 stylus 的作用域跟 javascript 十分的相似,首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到根为止

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

编译后:

.scoped {
  color:white;/*白色(调用了局部变量)*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色(调用了全局变量)*/
}

混入

混入(mixin)应该说是预处理器最精髓的功能之一了,简单点来说, Mixins 可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用

可以在 Mixins 中定义变量或者默认参数

在 less 中,混合的用法是指将定义好的 ClassA 中引入另一个已经定义的 Class ,也能够传递参数,参数变量为 @ 声明

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

编译后

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sass 声明 mixins 时需要使用 @mixinn ,后面紧跟 mixin 的名,也可以设置参数,参数名为变量 $ 声明的形式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylus 中的混合和前两款 Css 预处理器语言的混合略有不同,他可以不使用任何符号,就是直接声明 Mixins 名,然后在定义参数和默认值之间用等号(=)来连接

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 */
}

代码模块化

模块化就是将 Css 代码分成一个个模块

scss 、 less 、 stylus 三者的使用方法都如下所示

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

参考文献

https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA

到此这篇关于Css预编语言及区别详解的文章就介绍到这了,更多相关Css预编语言内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
CSS预处理框架——Stylus
Apr 21 #HTML / CSS
You might like
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python创建和删除目录的方法
2015/04/29 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
python主要用于哪些方向
2020/07/05 Python
Python logging模块原理解析及应用
2020/08/13 Python
Flask处理Web表单的实现方法
2021/01/31 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
美容师的职业规划书
2013/12/27 职场文书
校本教研工作制度
2014/01/22 职场文书
高中学校对照检查材料
2014/08/31 职场文书
对照检查剖析材料
2014/09/30 职场文书
员工辞职信范文大全
2015/05/12 职场文书
教务处教学工作总结
2015/08/10 职场文书
django上传文件的三种方式
2021/04/29 Python
详细介绍python操作RabbitMq
2022/04/12 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
python实现学员管理系统(面向对象版)
2022/06/05 Python