随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

随笔分类 -  scss

1
uni-app UI库 u-view
摘要:问题描述 uniapp 引入 uview-ui 后 一顿操作,出现 Undefined variable: "$u-type-primary-light" 错误。 解决问题 第一步:确保 HBuilder X 是安装了 scss/sass 编译插件 第二步:确保在根目录下 uni.scss 文件中引 阅读全文
posted @ 2022-01-17 16:48 小虾米吖~ 阅读(861) 评论(0) 推荐(0) 编辑
css 少见属性合集
摘要:1、阴影可将页面的元素颜色加上高斯模糊效果:backdrop-filter: saturate(180%) blur(20px); 阅读全文
posted @ 2021-09-09 09:59 小虾米吖~ 阅读(36) 评论(0) 推荐(0) 编辑
vue使用ui框架element-ui版本兼容
摘要:vue安装sass对应的 node-sass 和 sass-loader 版本如下(使用最新的版本会编译不成功) 阅读全文
posted @ 2021-03-16 13:58 小虾米吖~ 阅读(485) 评论(0) 推荐(0) 编辑
瀑布流布局:从上往下布局方式(——)往同级元素中高度最低的元素后面排列
摘要:html: <div class="col-responsive-5"> <a href="javascript:void(0)" class="hy_hover"><img src="image/index_page/hy002.png"><span class="hy_info">重庆·22岁· 阅读全文
posted @ 2020-10-21 10:28 小虾米吖~ 阅读(228) 评论(0) 推荐(0) 编辑
sass动态实现颜色平铺显示
摘要:@function stripes($position,$colors) { $colors: if(type-of($colors)!='list', compact($colors), $colors); $gradient: compact(); $len: length($colors); 阅读全文
posted @ 2019-02-20 09:49 小虾米吖~ 阅读(269) 评论(0) 推荐(0) 编辑
sass创建web项目环境步骤
摘要:1)npm创建web前端项目环境步骤 1、新建文件夹,在该文件下进入cmd控制台2、输入命令 npm init 回车3、name:名字只支持小写,不支持大写,将大写的名字改为小写即可4、version:随便写一个5、description:描述6、entry point:index.html 之后可 阅读全文
posted @ 2019-02-19 11:50 小虾米吖~ 阅读(265) 评论(0) 推荐(0) 编辑
sass—使用自定义function和@each实现栅格布局
摘要:/*使用自定义function和@each实现栅格布局*/ @function buildLayout($num: 5){ $map: (defaultValue: 0); //不能直接生成col,需要设置一个默认值 $rate: percentage(1 / $num); //均分并取百分数 @f 阅读全文
posted @ 2019-02-18 17:10 小虾米吖~ 阅读(280) 评论(0) 推荐(0) 编辑
sass进阶—函数
摘要:/*内置函数*/ /*1)常规的rgb,rgba函数*/$color:rgb(255,255,162);body{ color: $color; background-color:rgba($color, 0.5); /*2)lighten,darken函数*/ span{ color: darke 阅读全文
posted @ 2019-02-18 16:42 小虾米吖~ 阅读(195) 评论(0) 推荐(0) 编辑
sass进阶—mixin的使用(浏览器兼容性调整)
摘要:@mixin content($color:red,$fontSize:14px){ color:$color; font-size: $fontSize;} /*调用含参数的mixin,使用更加灵活1、传递多个属性的参数时需要指定变量名,否则将无法找到是哪个属性2、一个参数需传递多个参数值时,需在 阅读全文
posted @ 2019-02-18 16:06 小虾米吖~ 阅读(527) 评论(0) 推荐(0) 编辑
sass进阶—变量运算
摘要:/*变量操作 (两个变量之间的运算符需要用空格隔开,否则会报错。)==,!= <,>,<=,>=+,-,*,/,% */ $width1:50px;$width2:100px;body{ width: $width1 + $width2; height: $width2 - $width1;} /* 阅读全文
posted @ 2019-02-18 15:37 小虾米吖~ 阅读(369) 评论(0) 推荐(0) 编辑
sass基础—继承及占位符
摘要:/*继承:@extend ,继承多个类时使用逗号隔开*/.alert{ color: #f00;}.info{ width: 100px;} .text-danger{ background-color: #f0f; @extend .alert,.info;} /*链式继承*/.one{ colo 阅读全文
posted @ 2019-02-18 14:36 小虾米吖~ 阅读(230) 评论(0) 推荐(0) 编辑
sass基础—属性嵌套以及跳出嵌套 @at-root
摘要:/*注意:定义的变量若是没有使用则不会编译到css文件中。*//*1)sass的局部变量*/$font:14px;//定义$font:12px !default; //没有default时是重新赋值,有了它则先取12再重新赋值为14$maps:(color:black,border-color: b 阅读全文
posted @ 2019-02-18 11:06 小虾米吖~ 阅读(492) 评论(0) 推荐(0) 编辑
sass在项目中的使用:借鉴其他博主
摘要:https://www.jianshu.com/p/29f552d634ff 阅读全文
posted @ 2019-02-15 17:53 小虾米吖~ 阅读(137) 评论(0) 推荐(0) 编辑
sass基础—具体编译步骤及对应命令:详细
摘要:/*基础语法*/h1{ color: red;} /*变量定义*/ $color: red; /*嵌套*/body{ header{ } footer{ }} /*mixin函数*/@mixin alert($color: blue){ color: $color;} /*继承*/.blcok{ w 阅读全文
posted @ 2019-02-15 17:28 小虾米吖~ 阅读(324) 评论(0) 推荐(0) 编辑
ruby安装sass和compass步骤
摘要:依赖ruby,所以需要安装Ruby 如何安装Ruby呢?在windows下通过RubyInstaller来安装,安装过程中需要选择第二项 1.ruby -v 2.gem install sass (如果这个步骤报错就运行以下) 3.gem sources --remove https://rubyg 阅读全文
posted @ 2019-02-15 10:11 小虾米吖~ 阅读(199) 评论(0) 推荐(0) 编辑
sass方式实现颜色平铺(红色--->紫色)
摘要:<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style/demo.css"></head><body><div class="test"> <div class="color1"></div> <div cla 阅读全文
posted @ 2018-08-13 15:56 小虾米吖~ 阅读(207) 评论(0) 推荐(0) 编辑
sass编写高质量的css---(基础语法结构)
摘要:一:基础1、Sass:最早也是最成熟的CSS预处理语言2、Less:兼容CSS的最流行的css预处理语言3、Stylus:主要用于node.js社区 二:scss写法1)混入@mixin alert($color:blue){ color:$color;} 2)继承(p继承block类的样式).bl 阅读全文
posted @ 2018-08-10 14:06 小虾米吖~ 阅读(305) 评论(0) 推荐(0) 编辑
关于Bootstrap自定义图标
摘要:1、网站:http://fontello.com/(可能是网站本身原因,总是加载很慢,需要等待一下) 2、eps格式即AI文件,所需画布大小是512*512的,且需要布满整个画布,否则存储出来的图标显示不全或者有重叠,不能正常使用。 3、自定义生成的图标库中,以.woff2为后缀名的文件需要删除。 阅读全文
posted @ 2018-06-22 08:55 小虾米吖~ 阅读(801) 评论(0) 推荐(0) 编辑
Bootstrap表格中,thead固定,tbody有垂直滚动条
摘要:1、html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"> <table class="table table-condensed no-margin"> <thead> <tr> < 阅读全文
posted @ 2018-06-20 14:50 小虾米吖~ 阅读(3699) 评论(0) 推荐(0) 编辑
Bootstrap案例中,登陆界面自适应
摘要:1、html布局源码: .login-bg{ background-size: cover;background-repeat: no-repeat; background-attachment:fixed; 这一条必须有,否则可能没有效果 第二层:.modal-dialog { display: 阅读全文
posted @ 2018-06-20 14:34 小虾米吖~ 阅读(1309) 评论(0) 推荐(0) 编辑

1

点击右上角即可分享
微信分享提示