Less和Sass的原理和用法

一、原理

1.1 Less定义:是一种动态的样式语言,使CSS变成一种动态的语言特性,如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)


1.2 SaSS定义:是一种动态样式语言,SaSS里面的语法属于缩排语法,对于之前的css相比,多出了很多功能,更容易阅读


1.3 预处理器。Less和SaSS都属于预处理器,它会定义一种新的语言,其总体思想是为CSS增加一些编程的特性,将 CSS 作为目标生成文件,之后开发者就只要使用这种语言进行CSS的编码工作。

二、两者区别

  2.1 Less和Sass处理机制不一样

  • 前者是通过客户端处理的,后者是通过服务端处理,相比较之下前者解析会比后者慢一点。

  2.2 变量符:

  •   Less是@
  •  Sass是$

    2.3 输出设置
           Less没有输出设置,而Sass有4种输出选项,如下
               nested:嵌套缩进的css代码
               expanded:展开的多行css代码
               compact:简洁格式的css代码
                compressed:压缩后的css代码


2.4 Sass支持条件语句,可以使用if{}else{},for{}循环等等,而Less不支持

2.5 Sass功能较Less强大

  • sass有变量和作用域
  • sass有函数的概念
  • 进程控制
  • 数据结构

三、总体优点

3.1 提供CSS缺失的样式层复用机制
3.2 减少冗余代码
3.3 提高样式代码的可维护性
3.4 结构清晰,便于扩展可以方便的屏蔽浏览器私有的语法差异
3.5 轻松实现多重继承,完全兼容了CSS代码,提高了开发效率。

四、为什么选择使用Sass而不是Less

  • Sass有更成熟的框架,比如说Compass,而且有很多框架也使用Sass,比如说Foundation;
  • bootstrap(Web框架)最新推出的版本4,使用的就是Sass,可以看出sass有更多市场价值。
  • 就国外讨论的热度来说,Sass绝对优于less;
  • 在国内less集中的教程是less中文官网,而Sass的中文教程,在国内较为普遍;
  • sass也是成熟的CSS预处理器之一,而且有一个稳定,强大的团队在维护;
  • scss对sass语法进行了改良,sass 3变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进;

原文链接:面试题之Less和SaSS的原理和用法_less和sass的区别面试题_雨落听风清的博客-CSDN博客

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

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

相关文章

开发过程中遇到的问题以及解决方法

巩固基础,砥砺前行 。 只有不断重复,才能做到超越自己。 能坚持把简单的事情做到极致,也是不容易的。 开发过程中遇到的问题以及解决方法 简单易用的git命令 git命令: 查看有几个分支:git branch -a 切换分支&#…

Azure创建第一个虚拟机

首先,登录到 Azure 门户 (https://portal.azure.com/)。在 Azure 门户右上角,点击“虚拟机”按钮,并点击创建,创建Azure虚拟机。 在虚拟机创建页面中,选择所需的基本配置,包括虚拟机名称、操作系统类型和版…

【JVM】JVM 调优的参数都有哪些?

文章目录 1. 设置堆空间大小2. 虚拟机栈的设置3. 年轻代中Eden区和两个Survivor区的大小比例4. 年轻代晋升老年代阈值5. 设置垃圾回收收集器 1. 设置堆空间大小 设置堆的初始大小和最大大小,为了防止垃圾收集器在初始大小、最大大小之间收缩堆而产生额外的时间&…

python编程小游戏简单的,python小游戏编程100例

大家好,给大家分享一下python编程小游戏简单的,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 不会python就不能用python开发入门级的小游戏? 当然不是,我收集了十个python入门小游戏的源码和教程&#…

分支语句和循环语句(1)

这篇文章我们详细的把分支语句和循环语句给大家进行讲解。 分支语句: if switch 循环语句: while for do while goto语句: 1.什么是语句? C语句可分为以下五类: 1. 表达式语句 2. 函数调用语句 3. 控制…

qt自己实现方便的线程管理类

看本博客之前,可以先看看我这篇多线程博客:qt多线程使用方式_我是标同学的博客-CSDN博客

ORCA优化器浅析——CDXLOperator Base class for operators in a DXL tree

如上图所示,CDXLOperator作为Base class for operators in a DXL tree,其子类CDXLLogical、CDXLScalar、CDXLPhysical作为逻辑节点、物理节点和Scalar节点的DXL表示类,因此其包含了这些类的共同部分特性,比如获取其DXL节点表示的函…

Qt 文件对话框使用 Deepin风格

当你在Deepin或UOS 上开发 Qt 程序时,如果涉及到文件对话框功能,那么就会遇到调用原生窗口的问题。 如果你使用的是官方的Qt版本,那么在Deepin或者UOS系统上,弹出的文件对话框会是如下这样: 而Deepin或UOS系统提供的默…

可视化高级绘图技巧100篇-总论

前言 优秀的数据可视化作品可以用三个关键词概括:准确、清晰、优雅。 准确:精准地反馈数据的特征信息(既不遗漏也不冗余,不造成读者疏漏&误读细节) 清晰:获取图表特征信息的时间越短越好 优雅&…

Gitlab CI/CD笔记-第二天-主机套接字进行构建并push镜像。

一、安装gitlab-runner 1.可以是linux也可以是docker的 2.本文说的是docker安装部署的。 二、直接上.gitlab-ci.yml stages: # List of stages for jobs, and their order of execution - build-image build-image-job: stage: build-image image: harbor.com:543/docke…

企业计算机服务器中了360后缀勒索病毒怎么办,勒索病毒解密数据恢复

随着计算机技术的不断发展,企业的办公系统得到了很大提升,但是随之而来的网络安全威胁也不断增加,勒索病毒的攻击事件时有发生。近期,我们收到某地连锁超市的求助,企业的计算机服务器遭到了360后缀勒索病毒攻击&#x…

C#四个字节十六进制与单精度浮点数互转

C#四个字节十六进制与单精度浮点数互转可以使用自带的函数,也可以自己写 实例如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace floatDemo {class Program{//首先设置:项目->属性…

html练习

html练习 工具代码运行结果 工具 HBuilder X 代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>图灵之家</title></head><body><h1>图灵之家</h1><br><br><h2>我的…

Maxwell 数据同步使用教程

Maxwell 数据同步使用教程 Maxwell 是一个开源的 MySQL 数据同步工具&#xff0c;它可以提供可靠的、实时的数据复制服务。它的特点是将 MySQL 的 binlog 解析成易于理解、易于使用的 JSON 格式&#xff0c;并将其发送到 Kafka 或其他消息队列&#xff0c;方便消费者进行数据处…

使用几何和线性代数从单个图像进行 3D 重建

使用几何和线性代数从单个图像进行 3D 重建 萨蒂亚 一、说明 3D重构是一个挑战性题目&#xff0c;而且这个新颖的题目正处于启发和膨胀阶段&#xff1b;因此&#xff0c;各种各样的尝试层出不穷&#xff0c;本篇说明尝试的一种&#xff0c;至于其它更多的尝试&#xff0c;我们在…

nlohmann json:通过at读取及设置object和array

读取及设置: #include <iostream> #include <nlohmann/json.hpp> using namespace std; using json = nlohmann::json;int main() {json data = R"({"name": "xiaoming","age": 10, "parent": [{"father&qu…

RTT(RT-Thread)IO设备模型

目录 IO设备模型 模型框架原理 IO设备类型 创建和注册IO设备 RTT设备管理程序实现原理 访问IO设备 查找设备 初始化设备 打开设备 关闭设备 控制设备 读写设备 数据收发回调 数据接收回调 数据发送回调 设备模型实例 IO设备模型 RT-Thread 提供了一套简单的 I/O …

网络编程(TFTP协议实验)

#include <stdio.h> #include <string.h> #include <stdlib.h> #include <head.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <netinet/in.h>#define PORT 69 //端口号&#xf…

网络安全威胁与防御策略

第一章&#xff1a;引言 随着数字化时代的快速发展&#xff0c;网络已经成为人们生活和工作中不可或缺的一部分。然而&#xff0c;网络的广泛应用也引发了一系列严峻的网络安全威胁。恶意软件、网络攻击、数据泄露等问题层出不穷&#xff0c;给个人和企业带来了巨大的风险。本文…

mysql基础之触发器的简单使用

1.建立学生信息表 -- 触发器 -- 建立学生信息表 create table s1(id int unsigned auto_increment,name varchar(30),score tinyint unsigned,dept varchar(50),primary key(id) );2.建立学生补考信息表 -- 建立学生补考信息表 create table s2 like s1;3.建立触发器&#xf…