scss基本用法总结
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
scss基本⽤法总结
⼯作的时候天天⽤，⾯试的时候却没了思路，这就是懒得下场。多总结，多整理，才是成长得王道啊。最近换⼯作，把以前该整理得⼯作梳理⼀遍。
⼀、定义变量与引⽤
$color: #f00;
$a-color: #ff0;
$b_color: #009;
.btn {
width: 30px;
height: 20px;
color: $color;
border-radius: 5px;
border: none;
display: inline-block;
}
⼆、嵌套css
伪类选择器嵌套需要注意
群组选择器的嵌套
同层相邻选择器
⼦元素 >
~ 同层全体组合选择器
.div {
color: #f8f8f8;
span {
display: block;
font-size: 14px;
}
a {
color: #ddd;
&:hover {
color: #f00;
}
}
h2,h3,h4 {
font-weight: normal;
}
}
三、注释⽅式
这个注释不会出现在css中，
//这是注释
这个注册会出现在css中
/* 这⾥是注释 */
四、混合器
混合器可以传递参数
@mixin rounded-corners($px) {
-moz-border-radius: $px;
-webkit-border-radius: $px;
border-radius: $px;
}
.div {
@include rounded-corners;
}
五、继承
a {
display: block;
}
.disabled {
color: gray;
@extend a;
}
六、计算
计算的使⽤，主要⽤在写移动端⾃适应的时候
1、⾸先计算移动客户端屏幕宽度，将document的font-size设置为px
(function init(){
var fontSize = document.documentElement.clientWidth;
document.body.parentNode.style.fontSize = fontSize +'px';
})()
2、利⽤1rem为html的fontsize的⼤⼩
// 设计图是750px的话
$basePx:750;
@function pxCount($px){
@return $px/$basePx+rem;
}
.div {
width: pxCount(18);
}
附：rem em px区别
rem em 常见于⾃适应页⾯的尺⼨，浏览器会根据页⾯转化成像素值；
1rem 为html中fontsize的值
em 它们是相对于使⽤em单位的元素的字体⼤⼩。由于继承的存在，em很多时候会显⽰成相对于⽗元素的⼤⼩。px 物理像素