guess是什么意思,scss常用语法

  guess是什么意思,scss常用语法

  这篇文章主要为大家详细介绍了某视频剪辑软件中半导体色敏传感器语法的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  

目录

   vue之半导体色敏传感器语法使用引入半导体色敏传感器文件css/test.scsshome.vuescss定义一个变量半导体色敏传感器里面使用算法*/定义混入类函数使用占位符填充边距等继承@entend XX总结

  

vue之scss语法使用

  

引入scss文件

  

css / test.scss

  $testColor:红色;

  

home.vue

  !-

  描述:

  作者:xzl

  时间:03月30日190506

  -

  模板

  div class=Home

  主页

  测试测试/div

  div class=小标题小标题/div

  /div

  /模板

  脚本

  导出默认值{

  姓名:家,

  组件:{},

  data() {

  返回{}

  },

  方法:{}

  }

  /脚本

  样式lang=scss 范围

  @import ./CSS/test。scss’;

  $titleColor:红色;

  $小标题颜色:# a22。主页{。测试{

  颜色:$测试色;

  }。小标题{

  颜色:$小标题色;

  }

  }

  /风格

  效果

  

scss定义一个变量

  !-

  描述:

  作者:xzl

  时间:03月30日190506

  -

  模板

  div class=Home

  主页

  测试测试/div

  div class=小标题小标题/div

  /div

  /模板

  脚本

  导出默认值{

  姓名:家,

  组件:{},

  data() {

  返回{}

  },

  方法:{}

  }

  /脚本

  样式lang=scss 范围

  $titleColor:红色;

  $小标题颜色:# a22。主页{。测试{

  颜色:$ titleColor

  }。小标题{

  颜色:$小标题色;

  }

  }

  /风格

  效果

  

scss里面使用算法 */

  。测试{

  宽度:50px * 2;

  高度:calc(90px/3);

  边框:1px纯色# ccc

  }

  效果

  

定义mixin函数

  @ mixin text-overflow($ width:100%,$display: block) {

  宽度:$宽度

  显示:$显示

  空白:nowrap

  -ms-text-溢出:省略号;

  文本溢出:省略号;

  溢出:隐藏;

  }。主页{。测试{

  宽度:50px * 2;

  高度:calc(90px/3);

  边框:1px纯色# ccc

  @ include text-overflow(100px);

  }。小标题{

  宽度:80px

  @包含文本-溢出(80px);

  }

  }

  效果

  

使用占位符 padding margin等

  !-

  描述:

  作者:xzl

  时间:03月30日190506

  -

  模板

  div class=Home

  主页

  测试我就是一个/div

  div class=小标题我是小白兔/div

  /div

  /模板

  样式lang=scss 范围

  %pt5 {

  垫顶:5px

  }

  %mt10 {

  页边距-顶部:10px

  }。主页{。测试{

  @扩展% mt10

  宽度:50px * 2;

  高度:calc(90px/3);

  边框:1px纯色# ccc

  }。小标题{

  @扩展% pt5

  宽度:80px

  }

  }

  /风格

  效果

  

继承 @entend XX

  !-

  描述:

  作者:xzl

  时间:03月30日190506

  -

  模板

  div class=Home

  div class=caiji 我是菜鸡/div

  /div

  /模板

  样式lang=scss 范围

  %pt5 {

  垫顶:5px

  }。测试类{

  字体大小:30px

  颜色:# ff0

  }。主页{。蔡记

  @扩展% pt5

  @延伸testClass

  }

  }

  /风格

  效果

  

总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: