为了账号安全,请及时绑定邮箱和手机立即绑定
从0开始SCSS。了解原来有这么多预处理器,目前在开始接触SCSS,除了使用了层级嵌套的知识点。菜鸟记录,不喜勿喷
$w1:200px; $h1:300px; body{; width:$w1; height:$h1; }
$content: "Hello" + " " + "Sass!";
.box:before {
content: #{$content} ;
}

输出:
.box:before {
content: Hello Sass!;
}
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}

加减乘除运算的单位:如果两个数值单位不一致,会按照第一个数值的单位作为结果输出
这种覆盖方式和css本身不一致 css是在声明之后的会覆盖之前的
“ 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。”

摘抄自网络:连续声明两个default也是有效的,第一个default会被第二个default覆盖。第二个default会被没有声明default的变量覆盖,所以最终输出的是没有声明default的变量。
&挺好用的
例如,我们a标签,原来是red,点击后变成blue
html中
<body>
<div>
<a href="#">a</a>
</div>
</body>
在scss中
div{
a{
color:$color;
}
& .active{
color:blue;
}
}
这样&的作用就来,只需要点击为a标签加入class,只是自己的一点小小的体会。
用@的是刚学完less过来的吧?哈哈~?
@mixin box-shadow($shadow...){
@if length($shadow)<1
{
$shadow:0 0 2px rgba(#000,.4);
}
box-shadow:$shadow;
}
.box{
@include box-shadow(0 0 3px rgba(#fff,.4));
}
最上面的是直接定义的样式,其余的样式均是继承的来的
用phpstrom,配置下watcher就可以自动编译了。
为啥这一节看完了一直不显示完成,奇了怪了
第一:空格字符串拼接也要打出来,而且空多少格编译后就有多少格;
第二:对于有连字符'-'的属性值可以通过拆开连接。但要遵循的前提是,拆开后的词不能是关键词。
如:cursor:not -resize;会报错,因为not在sass有他的用途。
可以改成cursor:not- + resize;就不会报错了。
$box-width: 200px;
$box-height: 300px;
body {
width: $box-width;
height: $box-height;
}
课程须知
对CSS有一定的了解,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass是什么?他有什么功能? 2、Sass需要什么样的环境才能顺利运行 3、Sass语法格式和CSS有什么不一样? 4、Sass要如何编译 5、你要怎么调试Sass 6、Sass有哪些基本特性 7、Sass的控制命令能做些什么事情 8、Sass有哪些数据类型 9、Sass的函数功能

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消