Vue.js 学习总结(6)—— Css 之预处理器 Sass(Scss)、Less 的区别与选择

前言

Sass(Scss)、Less 都是 CSS 预处理器,他们定义了一种新的语言,其基本思想是,用一种专门的编程语言为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。

为什么使用 CSS 预处理器

原因

  • CSS 仅仅是一个标记语言,不可以自定义变量,不可以引用。
  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器。
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

CSS 预处理器的好处

  • 提供 CSS 层缺失的样式层复用机制
  • 减少冗余代码
  • 提高样式代码的可维护性

CSS 预处理器的缺点

  • 开发工作流中多了一个环节,调试也变得更麻烦。
  • 预编译很容易造成后代选择器的滥用

何时使用 CSS 预处理器

  • 系统级框架开发或者比较大型复杂的样式设计时
  • 持续维护集成时
  • 复用型组件开发时

Sass/Scss 与 Less 对比

Sass/Scss

Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是一种动态样式语言,Sass 语法属于缩排语法,比 CSS 多出变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等功能,更容易阅读。在开发最初版本之后,Weizenbaum 和 Chris Eppstein 继续通过 SassScript 来继续扩充 Sass 的功能。SassScript 是一个在 Sass 文件中使用的小型脚本语言。Sass 是一个将脚本解析成 CSS 的脚本语言,即 SassScript。Sass 的缩排语法,对于写惯 CSS 前端的 Web 开发者来说很不直观,也不能将 CSS 代码加入到 Sass 里面,因此 Sass 语法进行了改良,Sass3 就变成了 Scss(Sassy CSS) 。与原来的语法兼容,只是用 {} 取代了原来的缩进。所以 Sass 包括两套语法,通常情况下,这两套语法通过 .sass 和 .scss 两个文件扩展名区分开。

Less

Less 是 CSS 预处理器,也是一种动态样式语言,它为 CSS 增加了变量、嵌套、运算、混入(Mixin)、函数等功能,让 CSS 更易维护、方便制作主题与扩充。Less 可以运行在 Node.js、浏览器(支持 IE6+、Webkit、Firefox)和 Rhino 平台上,网上有很多第三方工具帮助你编译 Less 源码。本质上,Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。Less 并没有丢掉 CSS 原有的语法与特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入动态语言的特性。
Less 以 CSS 语法为基础,又借用了很多我们熟知编程式语言的特性,这对于我们开发人员来讲学习成本几乎可以忽略,它在保留 CSS 语法的基础上扩展了更多实用的功能,为我们提供了一种新的编写样式表的方法,我们可以根据我们的项目特性选择使用 Less 的部分特性,我们只需用很少的成本就可以换了很大的回报。一句话说就是 Less is more,借助 Less 可以更便捷的进行 Web 开发,Write more!

相同之处

  • 都属于 CSS 预处理器
  • 目的是使得 CSS 开发更灵活和更强大
  • 扩展的 CSS 功能特性基本相同

不同之处

  • Sass 是在服务端处理的,以前是 Ruby,现在是 Dart-Sass 或 Node-Sass,而 Less 是在客户端处理的,需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器,也可以在开发服务器将 Less 语法编译成 CSS 文件,输出 CSS 文件到生产包目录,有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具,也有在线编译地址。
  • 变量符不一样,Less 是 @,而 Sass 是 $。
  • Sass 的功能比 Less 强大,基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器,为 CSS 加入动态语言的特性。
  • Less 相对 Sass 清晰明了,安装便捷,易于上手,对编译环境要求比较宽松,适合小型项目。Sass 更适用于复杂或大型项目。
  • 输出设置,Less 没有输出设置,Sass 提供 4 种输出选项:nested/compact/compressed/expanded,输出样式的风格可以有 4 种选择,默认为 nested。
  • Sass 支持条件语句,可以使用 if...else.../for...while...each循环等,Less 不支持。
  • Sass 引用的外部文件命名必须以 _ 开头,Sass 会认为以 _ 文件是一个引用文件,不会将其编译为 CSS 文件。Less 引用外部文件和 CSS 中的 @import 没什么差异。
  • Less 中的变量运算可以带或不带单位,Sass 需要带单位。
  • Sass 有工具库 Compass,简单说,Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系,Compass 是 Sass 的工具库。在它的基础上,封装了一系列有用的模块和模板,补充强化了 Sass 的功能。Less 有 UI 组件库 Bootstrap,Bootstrap 是 Web 前端开发中一个比较有名的前端 UI 组件库,Bootstrap 的样式文件部分源码就是采用 Less 语法编写。

选择与比较

类别

Sass/Scss

Less

环境

Dart/其他

JavaScript

使用

复杂

简单(相对而言)

功能

复杂

简单(相对而言)

处理

服务端

可以在 Node.js 或浏览器(客户端)运行

后缀

.sass/.scss

.less

目前大部分的实现都是随着前端项目一起打包构建,只在学习或演示的时候才区分使用环境,所以不用在意处理机制,以上只是单纯的对比两者本身。Sass/Scss 与 Less 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS,都具有变量、混入、嵌套、函数等特性,最终目的都是方便 CSS 的书写及维护。Less 和 Sass/Scss 互相促进互相影响,只是相比之下 Less 更接近 CSS 语法且更容易使用上手。因此对于我个人来说,在实际开发中更倾向于选择 Less。

Sass/Scss、Less 使用与语法

变量

// Less
@width: 10px;
@height: @width + 10px;
@test: left;
#header {width: @width;height: @height;margin-@{test}: 5px;
}/* ------------------------------ */// Sass (老版本 Sass 使用 !,不是 $。)
$blue: #1875e7; 
div {color: $blue;
}$side: left;
$my-radius: 5px;
.rounded {border-#{$side}-radius: $my-radius;
}

运算

// Less
// 所有操作数被转换成相同的单位(乘法和除法不作转换)
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%@base: 2cm * 3mm; // 结果是 6cm// 颜色运算
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355// 为了与 CSS 保持兼容,calc() 并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))/* ------------------------------ */// Sass
$var: 100px;
body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;
}

嵌套

css// Less
#header {color: black;width: 600px;.navigation {font-size: 12px;}.logo {width: 300px;}&:after {content: " ";display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}&-bottom {background-image: url("header-bottom.png");}@media (min-width: 1280px) {width: 800px;}
}/* ------------------------------ */// Sass
。。。跟上面大同小异。。。

注释

// Less
/* 一个块注释,源文件与编译后正常默认文件都保留。* style comment! */
@var: red;// 这一行被注释掉了,仅保留源文件中!
@var: white;/* ------------------------------ */// Sass
/* 一个块注释,源文件与编译后正常默认文件都保留。* style comment! */
$var: red;// 这一行被注释掉了,仅保留源文件中!
$var: white;/*!重要注释!压缩模式也会保留
*/

混入(Mixin)

// Less
// .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。
// 注意,你也可以使用 #ids 作为 mixin 使用。
.bordered {border-top: dotted 1px black;border-bottom: solid 2px black;
}
#menu a {color: #111;.bordered();
}
.post a {color: red;.bordered();
}/* ------------------------------ */// Sass
@mixin bordered {border-top: dotted 1px black;border-bottom: solid 2px black;
}
#menu a {color: #111;@include bordered;
}
.post a {color: red;@include bordered;
}

转义

// Less
@min768: ~"(min-width: 768px)"; // 从 Less 3.5 开始,可以简写为:@min768: (min-width: 768px);
.element {@media @min768 {font-size: 1.2rem;}
}// 编译后
@media (min-width: 768px) {.element {font-size: 1.2rem;}
}

函数

// Less
@base: #f04615;
@width: 0.5;
.class {width: percentage(@width); // returns `50%`color: saturate(@base, 5%);background-color: spin(lighten(@base, 25%), 8);
}// ui 给到的一般都是 px,可以使用此函数转换。
.rem(@name, @px) {@{name}: unit(@px / 100, rem);
}
.test(@a, @b) {@width: @a + @b;
}
@my-radius: 10px;
.border_radius(@v, @h, @radius: @my-radius){box-@{v}-@{h}-radius: @my-radius;
}
.good{.test(20px, 30px);.border_radius(top, left);.border_radius(bottom, right, 5px);width: @width; 
}/* ------------------------------ */// Sass
@function double($n) {@return $n * 2;
}
#sidebar {width: double(5px);
}

优雅的动态获取元素数据

// 除了以下方法可使用 less 的 plugin
// https://lesscss.org/features/#plugin-atrules-feature
// less 使用 js (未测试,纯百度到的栗子而已!)
.calcHeight() {// 3.5+ 可省略 ~@functions: ~`(function() { this.calcHeight = function() {return document.body.clientHeight - document.getElementById('test').height;};})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.calcHeight();
.test {width: `calcHeight()`;
}// 或者巧妙使用 css 的 var() 函数或者 attr() 函数
// var() 函数必须要获取内联属性,即必须要是在 style 中的属性,且必须要加上 -- 前缀来标明这是一个自定义属性,否则浏览器无法解析。
// attr() 函数需要获取的标签中的属性,也可以是自定义属性, 但是必须要是在标签中的属性。
// <div self-property="attr-value" style="--test: 'var-value'"></div>
// attr(self-property) 或 var(--test)// 所以我们就可以曲线救国,实现上面的需求。
// 先在 JS 代码中使用 [document.body.clientHeight - document.getElementById('test').height] 获取到数据,再填到页面中标签属性或 style 属性中。
// 在 CSS 中定义变量 $test: var(--参数名) 或 attr(参数名);
// 或 @test: var(--参数名) 或 attr(参数名);
// 最后直接使用
.test {width: @test; // Lesswidth: $test; // Sasswidth: calc(100% - #{$test}); // Sass
}

继承

// Less
nav ul {&:extend(.inline);background: blue;
}
.inline {color: red;
}// OUTPUT
nav ul {background: blue;
}
.inline, nav ul {color: red;
}// https://lesscss.org/features/#extend-feature

命名空间和访问符

// Less (利用此特性也可变相实现继承)
#bundle() {.button {display: block;border: 1px solid black;background-color: grey;&:hover {background-color: white;}}.tab { ... }.citation { ... }
}
#header a {color: orange;#bundle.button();  // 还可以书写为 #bundle > .button 形式
}
// 注意:如果不希望它们出现在输出的 CSS 中,例如 #bundle .tab,请将 () 附加到命名空间后面(例如 #bundle().tab)。

映射

// Less
#colors() {primary: blue;secondary: green;
}
.button {color: #colors[primary];border: 1px solid #colors[secondary];
}
// OUTPUT
.button {color: blue;border: 1px solid green;
}@sizes: {mobile: 320px;tablet: 768px;desktop: 1024px;
}
.navbar {display: block;@media (min-width: @sizes[tablet]) {display: inline-block;}
}

作用域

// Less
@var: red;
#page {@var: white;#header {color: @var; // white}
}@var: red;
#page {#header {color: @var; // white}@var: white;
}

导入

// Less
@import "library"; // .less 可以省略后缀
@import "test.css";

Sass if-else

$color: red;
p {color: $color;@if $color == red {background-color: #000;} @else {background-color: #fff;}
}

Sass for/while/each

@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}$i: 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");}
}

Sass 继承

.class1 {border: 1px solid #ddd;
}.class-sub {@extend .class1;font-size: 120%;
}

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

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

相关文章

vscode配置node.js调试环境

node.js基于VSCode的开发环境的搭建非常简单。 说明&#xff1a;本文的前置条件是已安装好node.js(具体安装不再赘述&#xff0c;如有需要可评论区留言)。 阅读本文可掌握&#xff1a; 方便地进行js单步调试&#xff1b;方便地查看内置的对象或属性&#xff1b; 安装插件 C…

java:获取线程的Id

JDK 19及以后版本&#xff0c;使用Thread的threadId()方法获取当前线程的Id&#xff08;identifier &#xff09;。这个Id是一个正的长整型&#xff0c;在线程创建的时候产生。这个Id是唯一的&#xff0c;并且在线程的生命周期期间保持不变。 JDK 19以前的版本&#xff0c;使用…

html css背景图片透明文字不透明

思路&#xff1a;在::before中设置background-image和opacity 代码如下&#xff1a; <template><div class"login_box"><form method"post"><input type"text" name"nickname"><br><input type&qu…

Unity中Shader平移矩阵

文章目录 前言方式一&#xff1a;对顶点本地空间下的坐标进行相加平移1、在属性面板定义一个四维变量记录在 xyz 上平移多少。2、在常量缓冲区进行申明3、在顶点着色器中&#xff0c;在进行其他坐标转化之前&#xff0c;对模型顶点本地空间下的坐标进行转化4、我们来看看效果 方…

Java:将字符串重复多次串接起来输出

String的函数public String repeat(int count)&#xff0c;可以将当前字符串重复count次串接起来输出。 如果字符串是空的&#xff0c;或者count的值是0&#xff0c;那么返回空字符串。 代码示例1&#xff1a; package com.thb;public class Test5 {public static void main(…

CVE-2022-22978 Spring Security越权访问漏洞

简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。 Spring Security底层实现为一条过滤器链&#xff0c;就是用户请求进来&#xff0c;判断有没有请求的权限&#xff0c;抛出异常&#xff0c;重定向跳转。 影响版本 S…

【教程】cocos2dx资源加密混淆方案详解

1,加密,采用blowfish或其他 2,自定是32个字符的混淆code 3,对文件做blowfish加密,入口文件加密前将混淆code按约定格式(自定义的文件头或文件尾部)写入到文件 4,遍历资源目录,对每个文件做md5混淆,混淆原始串“相对路径”“文件名”混淆code, 文件改名并且移动到资源目录根…

C#线程的定义和使用方法

引言 在C#编程语言中&#xff0c;线程是一种并发执行的机制&#xff0c;允许程序同时执行多个任务。线程的使用使得我们能够利用计算机的多核处理器&#xff0c;实现程序的并行执行&#xff0c;提高系统的性能和响应能力。本文将详细介绍C#中线程的定义和使用方法&#xff0c;涵…

大数据可视化BI分析工具Apache Superset结合内网穿透实现远程访问

文章目录 前言1. 使用Docker部署Apache Superset1.1 第一步安装docker 、docker compose1.2 克隆superset代码到本地并使用docker compose启动 2. 安装cpolar内网穿透&#xff0c;实现公网访问3. 设置固定连接公网地址 前言 Superset是一款由中国知名科技公司开源的“现代化的…

Flask ImportError: DLL load failed: 找不到指定的模块。

一、anaconda环境 将anaconda3安装路径下DDL目录中的 libcrypto-1_1-x64.dll 和 libssl-1_1-x64.dll 拷贝到 虚拟环境目录下的DLL中 完美解决 成功了给个赞吧&#xff01;

智能客服:AI音频质检是怎么实现的?

AI音频质检是指使用人工智能技术&#xff0c;特别是自然语言处理&#xff08;NLP&#xff09;和机器学习&#xff08;ML&#xff09;算法&#xff0c;来自动分析和评估客服通话录音的质量。这项技术能够帮助企业确保客服遵守服务标准&#xff0c;提升客户体验&#xff0c;并从大…

三大主流前端框架介绍及选型

在前端项目中&#xff0c;可以借助某些框架&#xff08;如React、Vue、Angular等&#xff09;来实现组件化开发&#xff0c;使代码更容易复用。此时&#xff0c;一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成&#xff0c;而是按照组件的思想将网页划分成一个个组…

智能优化算法应用:基于未来搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于未来搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于未来搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.未来搜索算法4.实验参数设定5.算法结果6.…

Java:获取线程组的最大优先级

java.lang.ThreadGroup的getMaxPriority()函数返回该线程组的最大优先级。这个最大优先级就等于该线程组中新创建线程的最大优先级。 代码示例&#xff1a; package com.thb;public class Test5 {public static void main(String[] args) {ThreadGroup threadGroup Thread.c…

前端验证码计时器(短信验证登录倒计时)

button <el-button type"info" size"small" plain :disabled"countdown>0?true:false"click"sendYzm()">{{ countdown > 0 ? ${countdown} 秒后重新获取 : 获取验证码 }}</el-button> javascript export defau…

Unity | Shader基础知识(第八集:案例<漫反射材质球>)

目录 一、本节介绍 1 上集回顾 2 本节介绍 二、什么是漫反射材质球 三、 漫反射进化史 1 三种算法结果的区别 2 具体算法 2.1 兰伯特逐顶点算法 a.本小节使用的unity自带结构体。 b.兰伯特逐顶点算法公式 c.代码实现——兰伯特逐顶点算法 2.2 代码实现——兰伯特逐…

【C++】初识模板

本文目录 1. 泛型编程2. 函数模板2.1 函数模板概念2.2 函数模板格式2.3 函数模板的原理2.4 函数模板的实例化2.5 模板参数的匹配原则 3. 类模板3.1 类模板的定义格式3.2 类模板的实例化 1. 泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int& left, int&…

【控制器局域网】CAN报文学习笔记(四)之 字节排序、信号提取实例1

以下面的表格来表示字节顺序和位顺序&#xff0c;用红色表示高位MSB&#xff0c;蓝色表示低位LSB&#xff0c;绿色为LSB到MSB的过度 Bit oderMSB→→→→→→LSBByte oder\Bit7Bit6Bit5Bit4Bit3Bit2Bit1Bit0MSBByte076543210↓Byte115141312111098↓Byte22322212019181716↓By…

【Proteus/8086】swjtu西南交大微机与接口技术实验:计时器

实验内容: 计时器基本功能: 1)CPU必须用8086 2)计时器最小计时单位为秒。 3)以00:00格式显示计时,前2位表示分钟,后2位表示秒。 4)计时器是正计时方式 5)有暂停、继续计时功能 6&#xff09;有复位计时功能 7&#xff09;每次按下暂停键&#xff0c;能显示计时间隔时间 参考…

Vue 2.5 入门学习记录

Vue 2.5 入门学习记录 1. 基础知识Vue 是什么Vue引入方式Vue特点Vue实例中的数据事件方法Vue中的属性绑定和双向绑定Vue中的v-if、v-show、v-fortoDoList制作局部组件&全局组件 2. vue-cli工程3. 工程案例实践使用vue-cli实现todoList及删除某个元素全局样式与局部样式 4. …