sass 运算符虽然没有像那些编程语言那么强大,但为了更灵活的输出css,也增强了一些运算符的功能,例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等,接下来就来详细介绍下这些运算符的基本使用
赋值运算符就是把一个值赋值给一个变量,通过冒号(:)的方式进行承接(很多编程语言是=),例如:
$font-size:16px;
也可以把一个变量赋值给另一个变量
$font-size:16px;
$h3:$font-size;
赋值的变量必须先有值
等号操作符用于比较两个表达式的值是否相等,所有数据类型都支持等号运算符:
符号 | 说明 |
---|---|
== | 等于 |
!= | 不等于 |
例1:数字比较:
$theme:1;
.container {
@if $theme==1 {
background-color: red;
}
@else {
background-color: blue;
}
}
例2:字符串比较:
$theme:"blue";
.container {
@if $theme !="blue" {
background-color: red;
}
@else {
background-color: blue;
}
}
所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式。
比较运算符主要用于两个数值(整数与小数)间的比较,操作符有
符号 | 说明 |
---|---|
< (lt) | 小于 |
> (gt) | 大于 |
<= (lte) | 小于等于 |
>= (gte) | 大于等于 |
例如
$theme:3;
.container {
@if $theme >= 5 {
background-color: red;
}
@else {
background-color: blue;
}
}
其它语言还有字符串的比较,但这里是不行的
逻辑运算符通常用于连接多个表达式,用下真判断条件是否成立,它们有and、or、not
符号 | 说明 |
---|---|
and | 逻辑与 |
or | 逻辑或 |
not | 逻辑非 |
例如
$width:100;
$height:200;
$last:false;
div {
@if $width>50 and $height<300 {
font-size: 16px;
}
@else {
font-size: 14px;
}
@if not $last {
border-color: red;
}
@else {
border-color: blue;
}
}
数字操作符通常是对数字(整数或小数)进行计算,但是某些操作符(/或+)会有特殊情况,后面分开详细讲解
符号 | 说明 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 取模 |
例如
/*
+、-、*、/、%
线数字、百分号、css部分单位(px、pt、in...)
+
线数字与百分号或单位运算时会自动转化成相应的百分比与单位值
*/
.container {
/* ==================+ 运算===================== */
width: 50 + 20;
width: 50 + 20%;
width: 50% + 20%;
width: 10px + 20px;
width: 10pt + 20px;
width: 10pt + 20;
width: 10px + 10;
/* ==================- 运算===================== */
height: 50 - 30;
height: 10 - 30%;
height: 60% - 30%;
height: 50px - 20px;
height: 50pt - 20px;
height: 50pt - 40;
/* ==================* 运算===================== */
height: 50 * 30;
height: 10 * 30%;
/* height: 60% * 30%; 出现了两个百分号*/
/* height: 50px * 20px; 出现了两个单位*/
height: 50 * 2px;
height: 50pt * 4;
/* ==================/运算 (除完后最多只能保留一种单位)===================== */
$width: 100px;
width: 10 / 5;
width: 10px / 5px;
width: 10px / 10 * 2;
width: 20px / 2px * 5%;
width: ($width/2); // 使用变量与括号
z-index: round(10)/2; // 使用了函数
height: (500px/2); // 使用了括号
/* ==================% 运算===================== */
width: 10 % 3;
width: 50 % 3px;
width: 50px % 4px;
width: 50px % 7;
width: 50% % 7;
width: 50% % 9%;
width: 50px % 10pt; // 50px % 13.33333px
width: 50px % 13.33333px;
width: 50px + 10pt;
/* width: 50px % 5%; 单位不统一*/
}
/ 在 CSS 中通常起到分隔数字的用途,SassScript 作为 CSS 语言的拓展当然也支持这个功能,同时也赋予了 / 除法运算的功能。也就是说,如果 / 在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。
例如
$width: 1000px;
div {
font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
width: ($width/2); // 使用变量与括号
z-index: round(10)/2; // 使用了函数
height: (500px/2); // 使用了括号
margin-left: 5px + 8px/2px; // 使用了+表达式
}
如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
+ 可用于连接字符串
注意:如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号。
有问题???? 如果有一个值是函数返回的,情况可能不一样
例如
.container {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言 ,除了Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。
Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)
本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。
webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包
很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:
项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less;你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。
sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用
我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性
这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?
Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!