css预处理器sass

最新推荐文章于 2024-05-13 08:28:35 发布

菜鸟张小花

最新推荐文章于 2024-05-13 08:28:35 发布

阅读量431

点赞数 1

文章标签： sass 前端 javascript

本文链接：https://blog.csdn.net/weixin_64289861/article/details/128440046

版权

一，sass（原版是英文）

sass是预处理针对css的强化处理工具----能更好的对css进行更好的维护（针对css的框架，有结构性便于查看）

针对css增加了变量，嵌套，混合，导入

提供控制指令（if for,each)等高级功能

1.1，语法格式

scss和sass（可以相互转换，推荐使用scss：对c3的语法上全部通用，支持大多数css写法以及浏览器的前缀写法。sass:被称为缩进格式使用缩进代替花括号，用换行代替分好哦的属性）

$ sass-contenvert style.sass style.scss
$ sass-contenvert style.scss style.sass

1.1.1变量

css引入了变量，可以反复使用css属性定义成变量，通过变量名来引用他们，sass使用$符号来定义变量

$with-color:pink
#div:frist-child{
    background-color:$with
}

可以在变量里面引用其他变量

$with-color:pink
$het-border:1px solid $with-color
#div:frist-child{
    background-color:$with-color;
    border：$het-border;
}

注意：中划线和下划线是一样的都兼容，可识别

1.2嵌套

父选择器标识符&（可以放在任何选择器出现的地方，当包含父选择器表情师傅嵌套规则被打开是，他不会像后代选择器拼接，而是&被父选择器直接替代，加了&表示它变成了父级）

1.2.1群组选择器的嵌套

#div.h1,#div.h2,#div.h3{
    background-color:gold;
 }
#div{
    .h1,.h2,.h3{background-color:gold};
}
#div.a,#div1.a{
    color:pink
}
#div,#div1{
    a{color:gold;}
}

1.2.2层次选择器（>子元素选择器,+相邻的兄弟元素，~同层全体选择器）

<style>
    #level{
    >div{
        color: skyblue;
    }
    .brother +button{
        list-style: none;
        border: 1px solid blue;
    }
    p~p{
        background-color: plum;
    }
}
</style>

<body>
    <div id="level">
        <div>子元素选择器</div>
        <div>子元素选择器</div>
        <button class="brother">相邻兄弟元素选择器</button>
        <button class="brother">相邻兄弟元素选择器</button>
        <button class="brother">相邻兄弟元素选择器</button>
        <p>同层次选择器</p>
        <p>同层次选择器</p>
        <p>同层次选择器</p>
    </div>
</body>

1.3属性嵌套

ul li{
    width：120px;
    height: 80px;
    font-size:20px;
    font-family:"幼圆";
    font-weight:800;
}
ul li{
    width：120px;
    height: 80px;
    font:{
        size:20px;
        family:"幼圆";
        weight:800;
    }
}