![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
scss
文章平均质量分 65
左手喵子
这个作者很懒,什么都没留下…
展开
-
scss函数
SCSS允许我们自定义函数,语法如下:函数通过@function声明函数形参可以不传,可以传一个或多个,或者可变参数。函数必须通过@return返回,且必须要有返回值。我们可以将一些复杂逻辑定义为函数,来避免复杂逻辑的重复书写,而代替以函数调用。原创 2024-02-07 20:26:19 · 560 阅读 · 0 评论 -
scss--混入@mixin、@inclue、占位选择器 %、继承 @extend、插值语法 #{}、
mixin混入可以用于定义重复使用的样式,比如下面CSS代码我们可以发现,.header和.footer存在相同重复的样式定义,此时SCSS可以将这段重复样式提取到混入@mixin中,再在.header和.footer中通过@inclue引入混入样式。原创 2024-02-07 20:20:31 · 1160 阅读 · 0 评论 -
scss流程控制@if、@else if、@else、@for、@while、@each
两种方式都会从起始数值开始遍历,将遍历到的数值赋值给$i,区别在于,from...to不会遍历到结束数值,而只会遍历到结束数值前一个数,而from...through可以遍历到结束数值。从上面例子中,我们可以发现,from 1 to 3 实际只遍历了1,2;而from 1 through 3 遍历了 1,2,3。@while是另一种实现循环的方式,@while需要通过一个变量来控制循环次数,如下例中$count。@each用于遍历数组。原创 2024-02-07 19:37:11 · 340 阅读 · 0 评论 -
scss基础语法--嵌套语法、注释、变量
html {原创 2024-02-07 19:27:07 · 1370 阅读 · 0 评论 -
scss选择器
/之前的用法.cla {//新支持的用法(后面最好不要跟【标签】或【属性】名).cla {&1 {&2 {编译后.cla1 {.cla2 {原创 2024-02-07 18:48:20 · 245 阅读 · 0 评论 -
scss运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。原创 2024-02-07 18:44:18 · 1235 阅读 · 0 评论 -
uniapp引入外部sccs文件
这里我们在index.vue页面中引入了styles.scss文件,并在页面中使用了.btn样式。注意,我们可以在页面的SCSS样式中定义新的样式规则并使用已定义的样式。要在uni-app中引入外部SCSS文件,需要使用@import指令。3. 在需要引入的页面中,使用@import指令来引入该文件。1. 创建一个.scss文件,例如styles.scss。这样就可以成功引入外部的SCSS文件啦!2. 在该文件中编写SCSS代码。4. 在页面中使用已定义的样式。原创 2024-02-07 09:42:47 · 564 阅读 · 0 评论