less+sass区别及sass语法

最新推荐文章于 2024-03-25 09:02:39 发布

小叮当仁不让

最新推荐文章于 2024-03-25 09:02:39 发布

阅读量363

点赞数

分类专栏： sass less 文章标签： less sass 前端

本文链接：https://blog.csdn.net/qq_44971069/article/details/109630284

版权

本文详细对比了Sass和Less两种预处理器的语法特性，包括变量声明（Sass的默认变量、全局变量和特殊变量）、选择器和属性嵌套、混入（mixin）以及继承。Sass支持属性嵌套，而Less有命名空间功能。两者都提供了运算符、函数、条件语句、循环以及导入功能，但具体实现和细节有所不同。

摘要由CSDN通过智能技术生成

sass语法

7.1声明变量

普通变量-默认变量-特殊变量-全局变量
定义变量的语法：
在这里插入图片描述 !

普通变量
定义之后可以在全局范围内使用。
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots font-size:$ fontSize;
}

默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。
$baseLineHeight:1.5 !default;
body{
line-height: $baseLineHeight;
}
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要重新声明下变量即可。

全局变量——在变量的后面加上[!global]即可声明全局变量。sass 规划是 3.4 以后的版本中就会增加这个功能。

在这里插入图片描述

特殊变量：一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作
为属性或者其他的特殊情况下，必须使用#{ $KaTeX parse error: Expected 'EOF', got '}' at position 9: variable}̲的形式进行调用。 #{$ variable} 就是取值的一种特殊形式，符合特殊用法。
在这里插入图片描述

7.2sass嵌套-选择器嵌套

SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选

择器嵌套方案
【注】在嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性
在这里插入图片描述

7.3sass嵌套-属性嵌套

嵌套属性——不常用
所谓属性嵌套，是指某些属性拥有同样的单词开头，如：wborder-color
都是以 border 开头的，所以就出现了属性嵌套语法

在这里插入图片描述

7.4sass混合-Mixin

sass 中可以通过@mixin 声明混合，可以传递参数，参数名称以$开始，多个参数之间使用
逗号分隔，@mixin 的混合代码块由@include 来调用

无参数混合

在这里插入图片描述

7.5sass继承拓展-@extend

在 SASS 中，通过继承/扩展来减少重复代码，可以让一个选择器去继承另一个选择中所有
的样式。
继承某个样式的同时，也会继承样式的扩展。
在这里插入图片描述

7.6Partitials和@import

Partials 是用来定义公共样式或者组件的样式的，专门用于被其他的 scss 文件 import
进行使用的
在 SCSS 文件中引入指令@import 在引入 Partials 文件时，不需要添加下划线。详细参
考案例代码。

声明公共样式，公共样式文件要以 _
在这里插入图片描述

7.7sass注释

SASS 中提供了三种注释
多行注释在编译输出的 css 文件中会保留，压缩输出格式中不会保留 --style compressed
/*

多行注释
*/

单行注释在输出 css 文件时不保留
// 单行注释

强制注释在多行注释的开头，添加感叹号！表示强制保留
/*!

强制注释
*/

7.8sass数据类型

Sass 支持7种主要的数据类型

数字(例如： 1.2, 13, 10px)
字符串(例如：“foo”, ‘bar’, baz)
颜色(例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
布尔值(例如： true, false)
空值(例如： null)
列表(list)，用空格或逗号分隔 (例如：c 1.5em 1em 0 2em, Helvetica, Arial,
sans-serif)
映射(例如： (key1: value1, key2: value2)) map映射键->值

7.9数字&数字函数

在 SASS 中可以对数字进行运算
同时 SASS 支持数字函数的运算

在这里插入图片描述

7.10sass字符串

SASS 支持字符串的操作
同时 SASS 对字符串的操作有一些封装的函数的支持，方便快捷的处理字符串操作。
更多操作请参考官方文档。 http://sass.bootcss.com/docs/sass-reference/

在这里插入图片描述

7.11sass颜色

颜色的表示有很多种

十六进制 Hex：#ff0000 等等
RGB:rgb(255, 0, 0)等等
字符串：red, blue, green 等等
等等… …
【注】SASS 支持所有这些颜色的表示方式相信大家对这些颜色的表示方式应该非常熟悉了
颜色函数——rgb & rgba
通过 rgb()的形式进行颜色的控制【红、绿、蓝】

7.12sass列表-list

list 表示列表类型的值
在 CSS 中就是表示属性的一串值
列表中的值可以使用空格或者逗号分隔，如

border:#ccc solid 1px; 值就是列表
font-family:Courier, “Lucida Console”, monospace; 值也是列表
列表中可以包含其他的列表，如：
padding:10px 5px, 5px 5px; 值的列表中有两个列表，用逗号分隔
padding:(10px 5px) (5px 5px);可以用括号分开，编译成 css 时会去掉这些括号

列表函数

SASS 中的列表相当于其他语言中的数组，SASS 也提供了一些函数方便列表的操作
length:获取列表长度
nth:获取指定位置的列表项
index:获取某个元素在列表中的位置，如果没有查询到返回 null
append:给指定的第一个列表添加一个列表项
join:合并列表
在这里插入图片描述