css基础知识二十:说说对Css预编语言的理解?有哪些区别?

news2024/11/20 20:43:12

在这里插入图片描述
一、是什么

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

.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';

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/755607.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[java安全]CommonsCollections3.1

文章目录 【java安全】CommonsCollections3.1InvokerTransformerConstantTransformerChainedTransformerTransformedMap如何触发checkSetValue()方法?AnnotationInvocationHandlerpoc利用链 【java安全】CommonsCollections3.1 java开发过程中经常会用到一些库。Ap…

【Python 基础篇】Python环境搭建

文章目录 一、Python环境的下载二、Python环境变量的安装及配置三、Python编译器的选择一、Python环境的下载 Python官方网站:www.python.org 这个是Python的官方网站,Python下载以及相关文档都能在里面找到 如果下载慢的话,可以在各大电脑应用市场下载(自己是在联想应用商…

【分布式任务调度】XXL-JOB调度中心集群部署配置(一)

文章目录 1.概述2.代码编译2.1.代码下载2.2.初始化与编译 3.集群部署3.1.服务启动3.2.反向代理 4.结语 1.概述 XXL-JOB是一款轻量级的分布式任务调度中间件,默认支持6000个定时任务,如果生产环境的任务数量在这个范围内,可以选择使用 XXL-JO…

【手撕C语言基础】联合体与枚举

(꒪ꇴ꒪ ),hello我是祐言博客主页:C语言基础,Linux基础,软件配置领域博主🌍快上🚘,一起学习!送给读者的一句鸡汤🤔:集中起来的意志可以击穿顽石!作者水平很有限,如果发现错误&#x…

九五从零开始的运维之路(其二十)

[TOC](文章目录) 文章目录 前言一、LAMP是什么二、配置环境及安装1.配置yum源2.关闭防火墙、网络图形化工具及SElinux3.安装软件包 三、配置apache服务器内容四、启动服务五、访问验证总结 前言 本篇将简述的内容:Linux系统下的LAMP平台部署 基于discuz框架的论坛搭…

StartAllBack| Win11 更新系统后闪屏

解决方法:安装最新版 StartAllBack 中文官网:http://www.startallback.cn 激活方式: ① 点击下载好的 .exe 文件安装 StartAllBack ② 打开 StartAllBack 的安装目录 为我安装的路径:C:\Users\你的用户名\AppData\Local\Start…

opencv 基础学习08-图像通道操作

opencv 基础学习08-图像通道操作 什么是图像通道?通道操作:**1 通过索引拆分**2 通过opencv 函数拆分通道合并 什么是图像通道? OpenCV的通道拆分功能可用于将多通道图像拆分成单独的通道,这在图像处理和计算机视觉任务中具有许多…

[MySQL]MySQL内外连接

[MySQL]MySQL内外连接 文章目录 [MySQL]MySQL内外连接1. 内连接2. 外连接2.1 左外连接2.2 右外连接 3. 简单练习 1. 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选,也是在开发过程中使用的最多的连接查询。 语法: SELECT ... FR…

【USRP X310】如何将你的X310转化为USRP RIO 可以用于FPGA编程

X310 转化为USRP RIO X310产品X310和NI-USRP对应关系 简介第一步原理解释打开工具运行 Initialize Flash.vi可以去选择设备类型Hardware Current Version 如何选择 第二步创建工程运行校准程序 附录:射频子板的IDWBXSBXCBXUBXTwinRX X310产品 X310和NI-USRP对应关系…

【Android知识笔记】应用进程(一)

应用进程的启动流程 冷启动与热启动 冷启动与热启动相比:冷启动除了要启动目标进程的入口Activity外,还需要通过AMS向Zygote申请启动目标应用进程,而热启动由于目标进程已经启动,只需直接打开目标进程的入口Activity即可。 AMS冷启动大概流程: 应用进程是在什么时机被启…

网络数据安全风险评估实施指引(二)

评估手段是多种多样的。信息安全风险评估可以用各种不同的方式识别资产脆弱性和攻击路径,数据安全风险评估也包含但不限于以下措施: 人员访谈:对相关人员进行访谈,核查制度规章、防护措施、安全责任落实情况; 文档查…

HTTP、HTTPS协议详解

文章目录 HTTP是什么报文结构请求头部响应头部 工作原理用户点击一个URL链接后,浏览器和web服务器会执行什么http的版本持久连接和非持久连接无状态与有状态Cookie和Sessionhttp方法:get和post的区别 状态码 HTTPS是什么ssl如何搞到证书nginx中的部署 加…

C#使用Chart进行统计,切换不同的图表类型

WindowsForm应用程序中Chart图表控件所属的命名空间: Chart 命名空间: System.Windows.Forms.DataVisualization.Charting 对应的dll路径: C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.6.1\Syst…

链表的头指针、头节点和首元节点

链表的头指针、头节点和首元节点 头节点(哑结点) 有时,在链表的第一个节点之前会额外增设一个节点,该节点的数据域一般不存放数据(有些情况下也可以存放链表的长度等信息),此节点被称为头节点。 若链表中存在头节点&…

[每周一更]-(第54期):Go的多版本管理工具

参考 https://zhuanlan.zhihu.com/p/611253641https://learnku.com/articles/78326 前文概要 Go语言从开始使用从1.13起步,随着泛型的支持,带领团队在转型Go的时候,做基础组件架构选型使用1.18,但是Go版本不断迭代想使用最新版本…

Java的日期时间API

目录 JDK8之前的日期时间API java.lang.System类 java.util.Date类 java.text.SimpleDateFormat类 java.util.Calendar(日历)类 java.util.GregorianCalendar类 JDK8中新日期时间API LocalDate、LocalTime、LocalDateTime 类 Instant类 java.time.format.DateTimeFor…

SCA Sentinel分布式系统的流量防卫兵

Sentinel官网:https://sentinelguard.io/zh-cn Sentinel:Sentinel是面向分布式、多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量控制、流量路由、熔断降级、系统自适应保护等多个维度来帮助用户 保障微服务的稳定性 Sentinel与Hystrix对…

http连接处理(下)(四)

1.结合代码分析请求报文响应 下面我们将介绍服务器如何响应请求报文,并将该报文发送给浏览器端。首先介绍一些基础API,然后结合流程图和代码对服务器响应请求报文进行详解。 基础API部分,介绍stat、mmap、iovec、writev。 流程图部分&…

NodeJS 后端通过Http获取Base64格式数据显示图片 ②〇

文章目录 前言BASE64前端开发后端开发异步代码效果总结 ⡖⠒⠒⠒⠤⢄⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸ ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀…

Rust操作MySQL

查询 本部分是对 「Rust入门系列」Rust 中使用 MySQL[1]的学习与记录 经常使用的时间处理库: chrono 流式查询使用: query_iter 输出到Vec使用: query 映射到结构体使用: query_map 获取单条数据使用: query_first 命名…