vue中scss语法的使用你了解吗

目录

• vue之scss语法使用
• 引入scss文件
• css / test.scss
• home.vue
•  scss定义一个变量
•  scss里面使用算法 ±*/
•  定义mixin函数
•  使用占位符 padding margin等
•  继承 @entend XX
• 总结

vue之scss语法使用

引入scss文件

css / test.scss

$testColor:red;

home.vue

效果

 scss定义一个变量

效果

 scss里面使用算法 ±*/

  .test {
    width: 50px * 2;
    height: calc(90px / 3);
    border: 1px solid #ccc;
  }

效果

 定义mixin函数

@mixin text-overflow($width: 100%, $display: 'block') {
  width: $width;
  display: $display;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Home {
  .test {
    width: 50px * 2;
    height: calc(90px / 3);
    border: 1px solid #ccc;
    @include text-overflow(100px);
  }
  .small-title {
    width: 80px;
    @include text-overflow(80px);
  }
}

效果

 使用占位符 padding margin等

效果

 继承 @entend XX

效果

总结

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