css-stylus

发布日期:2018-03-13    浏览次数:493

1.stylus

    对定义CSS的方式进行了改变,允许我们简化CSS的书写格式,同时允许我们定义变量、定义函数来操作CSS

    CSS处理器类型:
        sass/less/stylus

        stylus结构

1.1用法

<style lang="stylus">
  /*引入外部css文件*/
  @import 'assets/css/reset.css'  
  /*定义变量 这个颜色的值不能加引号*/
  $bgColor = #ccc;
  body
    background:$bgColor;
.header
  weight:100%;
  height:50px;
  background:#1c6132;
  display:flex;
  justify-content:center;
  align-items:center;
  /*img是.header的子级,直接缩进写*/
  img
    height:40px;
  /*.title是.header的子级,和img同级,并且写*/
  .title
    color:#fff
    margin-left: 10px
    /*&:hover是.title的鼠标悬浮  &表示一个引用,引用自身*/
    &:hover
      color:yellow
</style>

注意:

&:hover 在pc端是鼠标悬浮,在移动端变成点击

0

上一篇: css

下一篇: HTML条件注释

本文网址:https://www.wyxxw.cn/blog-detail-1-3-1138.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:https://www.cnblogs.com/luxiaoyao/p/8536106.html 。 转载人:momo