css中的&
发表于|更新于
|浏览量:
要在座的人都停止了说话的时候,有了机会,方才可以谦逊地把问题提出,向人学习。—— 约翰·洛克
今天看到一种css写法:
1 | /deep/ .message-list { |
/deep/我们之前博客提过了,嵌套写法很简单,今天聊聊&这个父选择器
sass中文文档提到了这个父选择器
上方的&-text其实就表示.message-item-text
1 | .message-item { |
编译后为:
1 | .message-item { |
相关推荐
2022-08-21
webpack
细砂般数不尽的星,有颗向我眨眼睛。——芥川龙之介《侏儒的话》 摘自芥川龙之介的《侏儒的话》。 首先是官方文档:https://webpack.docschina.org/ 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。 接下来我们跟着快速上手一下,将一个普通的html文件使用webpack改造 https://webpack.docschina.org/guides/getting-started 创建目录,安装依赖 1234mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev 新建index.html 1234567891011<!DOCTYPE html><html&...
2022-10-08
vue-cropper
青春是一种持续的陶醉,是理智的狂热。——拉罗什富科 分享一个vue图片裁剪组件 官网:https://github.xyxiao.cn/vue-cropper/ 演示demo:http://github.xyxiao.cn/vue-cropper/example/ 还是很不错的 1. 安装1234# npm 安装npm install vue-cropper# yarn 安装yarn add vue-cropper 如果你没有使用 npm 在线例子vue-cropper + vue.2x 在线例子vue-cropper@next + vue.3x 服务器渲染 nuxt 解决方案 设置为 ssr: false 1234567891011module.exports = { ... build: { vendor: [ 'vue-cropper ... plugins: [ { src: '~/plugins/vue-cropper', ssr: false } ...
2021-05-01
js find函数
人的一生是短的,但如果卑劣地过这一生,就太长了——莎士比亚 在前端开发中,可能会有“需要从数组里取出符合条件的某条数据”这个需求 我们可以使用find函数 123var list = [1,4,3,2,5];console.log(list.find(n=>n===4)) // 输出结果4,取出满足条件的值var index = list.findIndex(n=>n===4) // index = 1,取出满足条件的值的下标 这样就从我们的list数组中取出了满足n===4这个条件的值
2022-01-27
js数组去重
最大的挑战和突破在于用人,而用人最大的突破在于信任人。——马云 我们使用数组解构+Set去重: 12let list = [1,1,2,3]list = [...new Set(list)] 这里set是一个不重复的集合类,构造函数中我们传入了另一个list 如果是两个数组去重 123let list = [1,2,3]let array = [2,3]list = [...new Set([...list,...array])] 写法如下:
2022-08-07
拖动滑块验证
有事情是要说出来的,不要等着对方去领悟,因为对方不是你,不知道你想要什么,等到最后只能是伤心和失望。尤其是感情。——《麦兜》 效果: 源码: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2026-03-12
register
今天应做的事没有做,明天再早也是耽误了。——裴斯泰洛齐 is-a.dev is-a.dev is a service that allows developers to get a sweet-looking .is-a.dev subdomain for their personal websites. 让你的个人站点,穿上一件“甜甜的”马甲:is-a.dev 的自我介绍如果域名会说话,那 is-a.dev 一定是那种一开口就让人觉得“哇,你好会取名”的角色。 它不想当一个高高在上的顶级域名,也不想当一个冷冰冰的 DNS 工具人——它更像一位热情的领路人,站在开发者的路口挥手: “嘿,开发者!来拿一个 sweet-looking 的 .is-a.dev 子域名吧,给你的个人网站一个更体面的门牌号。” 而这句自我介绍,正是它在仓库的 description 里写下的承诺: Grab your own sweet-looking ‘.is-a.dev’ subdomain. 它说到做到,而且把整个流程摊开在 GitH...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog