支持属性嵌套
.home {
font: {
family: fantasy;
size: 30px;
weight: normal;
}
}
// 上述代码相当于css的如下代码
.home {
font-family: fantasy;
font-size: 30px;
font-weight: normal;
}
Sass支持一些类似js的语法,为我们提供了很多强大的功能。
变量
(1)声明变量
$nav-bgc: rgba(0, 0, 0, .2);
(2)引用变量
background: $nav-bgc;
(3)!default
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
$content: “First content”;
$content: “Second content?” !default;
$new_content: “First time reference” !default;
#main {
content: $content; // “First content”
new-content: $new_content; // “First time reference”
}
ps:变量是 null 空值时将视为未被 !default 赋值。如果第一个 c o n t e n t 的值是 n u l l ,那么将会取 content的值是null,那么将会取 content的值是null,那么将会取content: “Second content?” !default的值。
数据类型
SASS支持的数据类型主要有以下几种:
-
数字,1, 2, 13, 10px
-
字符串,有引号字符串与无引号字符串,“foo”, ‘bar’, baz
-
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
-
布尔型,true, false
-
空值,null
-
数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
-
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
支持运算符
运算规则与js类似,但有一些特别的地方,具体请参考SASS教程。
插值语法#{}
通过 #{} 插值语句可以在选择器或属性名或属性值中使用变量。
使用 #{} 可以避免 Sass 运行运算表达式,直接编译 CSS。比如下面用到的font写法。
$name: foo;
$attr: border;
$font-size: 12px;
$line-height: 30px;
p.#{$name} {
#{$attr}-color: blue;
font: #{KaTeX parse error: Expected 'EOF', got '}' at position 10: font-size}̲/#{line-height};
}
@extend
@extend可以实现继承,适用于一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。在不使用@extend时,我们完全可以定义两个class来实现,如:
// css部分
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
// html部分
但是使用@extend能为我们带来更多的好处,简洁易维护。
.seriousError {
border-width: 3px;
@extend .error;
}
控制指令
(1)@if
当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码
p {
@if true { border: 1px solid; }
}
@if后面可以接@else if和@else语句
(2)@for
这个指令包含两种格式:
@for $var from through
@for $var from to
区别在于 through 与 to 的含义:当使用 through 时,条件范围包含 与 的值,而使用 to 时条件范围只包含 的值不包含 的值。
(3)@each
// @each 遍历值数组中的每一项,然后输出结果
$var in {}
// @each 可遍历多维数组,如下所示
// a n i m a l 接收来自 ( p u m a , b l a c k , d e f a u l t ) 的数据, animal接收来自(puma, black, default)的数据, animal接收来自(puma,black,default)的数据,color接收来自(red, blue, green)的数据,依次类推。
@each $animal, $color, $cursor in (puma, black, default),
(red, blue, green),
(pointer, default, move) {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png’);
border: 2px solid $color;
cursor: $cursor;
}
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后写上我自己一直喜欢的一句名言:
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
最后写上我自己一直喜欢的一句名言:
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它