.scss后缀文件
.header{
font-size: 12px;
.main:active{
background-color: #f40;;
}
// &代表外层父级
&:hover{
color: #000;
}
}
//定义变量,一定义要写在执行之前
$text-color:#444;
//使用变量
color:$text-color;
//lighten颜色变浅
color:lighten($text-color,20%);
//darken颜色变深
color:darken($text-color,20%);
//引入scss文件(拆分)(下划线)
@import './style';
@import 'header';
//mixin混入(可以共用的代码)
//一个文件里面
@mixin box($width){ //传入变量
width:$width;
height:100px;
}
div{
@include box(100px);
color:#f40;
background:#aaa;
}
//单个文件引入
@import 'mixin';
div{
@include box(100px);
color:#f40;
background:#aaa;
}
//@content(和插值差不多)
@mixin ipad{
@media screen and (min-width:768px){
@content;
}
}
@include ipad{
width:500px
}
.sass后缀文件（不常见）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/4872.html
