1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进  -->   'indent': 0 B. 不检测 函数的 space --> 'space-before-function-paren': 0 2. vue 的 sass 调用 mixin 函数 需要添加 @mixin .

前端开发whqet,csdn,王海庆,whqet,前端开发专家 前期以前给大家介绍过一个使用google font的mixin(详见<Google Fonts Sass Mixin>),今天我们再进一步给大家推荐个使用web font的mixin. 使用web font,我们须要使用@font-face导入字体文件,然后才干够使用,@font-face的使用格式例如以下 @font-face { font-family: <YourWebFontName>; src: <so

前言 最近参加若川的源码共度活动,第 24 期 vue2 源码工具函数,最开始: var emptyObject = Object.freeze({}); 之前知道 Object.freeze() 是冻结,可是具体是什么呢,错过了就错过了,要不看看吧,那就看看吧,嗯,我这种读源码的方式比较低效,但是还是得看看,不然后面的都不易于理解,就暂且打打基础. 然后就看了MDN Web Docs Object.freeze() Object.freeze() Try it Object.freeze()

阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在最初使用Sass的时候,用的最多的颜色函数就是lighten($color, $amount)和darken($color, $amount),对于其他的函数,少之又少,真是弱爆了,有木有. 切图的时候,我的颜色全部是通过PS的吸管工具获取的,之后复制粘贴即可.如果我们熟悉了颜色标准,那以后我们对颜

1.先创建一个 _theme.scss文件 作为各类主题颜色的整理 $themes: ( light: ( //字体 font_color1: #414141, font_color2: white, $color-yellow: rgb(238, 255, 0), //背景 background_color1: $color-red, background_color2: #f0f2f5, background_color3: red, background_color4: #2674e7,

虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码: return createElement('h1', this.blogTitle) createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素.它更准确的名字可能是createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,及其

sass中有些非常实用的颜色处理函数,总结如下 1.颜色加深或变浅 lighten($color,$amount) //颜色变浅 darken($color,$amount) //颜色加深 例如: lighten(#f36,50%) //把#f36颜色亮度提高50% #ffffff darken(#f36,50%) //把#f36颜色亮度降低50% #33000d 2.rgb和十六进制转换 rgb($red, $green, $blue) //根据RGB中的三个值计算出一个颜色: rgba($r

map-remove($map,$key) map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map.其返回的值还是一个 map.他并不能直接从一个 map 中删除另一个 map,仅能通过删除 map 中的某个 key 得到新 map.如: $map:map-remove($social-colors,dribble); 返回的是一个新 map: $map:( facebook: #3b5998, github: #171515,

map-keys($map) 函数将会返回 $map 中的所有 key.这些值赋予给一个变量,那他就是一个列表.如: map-keys($social-colors); 其返回的值为: "dribble","facebook","github","google","twitter" 换句话说: $list: map-keys($social-colors); 相当于: $list:"dribble

map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值.但对于开发人员,并看不到任何提示信息.如果使用 map-has-key($map,$key) 函数就可以改变这一状态.我们来看一个简单的示例. @if map-has-key($social-colors,facebook){ .

map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值.如果 $key 不存在 $map中,将返回 null 值.此函数包括两个参数: $map:定义好的 map. $key:需要遍历的 key. 来看一个简单的示例,假设定义了一个 $social-colors 的 map: $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, goo

最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3); background-color: $linkColor; } 生成的 CSS 代码 .box{ box-shadow:0 2px 6px 0 rgba(32,160,255,.3)

以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 768px){ background: url($path + '@1x.' + $ext) no-repeat center; } @media screen and (min-device-width: 768px){ background: url($path + '@2x.' + $ext) n

列表生成式:是代码更简洁. 也可以是函数,比如func(i) 生成器:generator 列表生成式,是中括号,改成小括号,就是生成器: 如果你用列表生成式,生成一亿个数据:这里会卡好久,会生成一亿个数据到内存里去. 而用生成器,立马会得到生成器的内存地址,不需要等待: 但是要注意,生成器c不允许使用下标的方式,进行取值.因为循环还没计算到这个值. 生成器只有在调用时才会生成相应的数据: 生成器有一种方法c.__next__(),来取下一个值,只有下一个next,没办法返回上一个值.它每次只保留

To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #000, $fillColor:#fff) {    width: 0;     height: 0;    position: relative;    z-index: 0;    border-left: #{setTriangleSize($direction, "left", $s

控制多行显示省略号... //文字溢出省略号@mixin coveText($num:1){ @if $num == 1{ white-space: normal; overflow: hidden; text-overflow: ellipsis; } @else{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $num; overflow: hidden; } } 0.5像素border @mi

@mixin borderTop($size:1px,$type:solid,$color:red){ border-top:$size $type $color; } .border_top{ @include borderTop(1px,solid,#000000); } @include  borderTop(1px,solid,#000000); #000000 颜色必须是六位的 border-top:$size $type $color; 不能带逗号 @include  borderT

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with eac

Mix 函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色.其使用语法如下: mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要合并的颜色,颜色可以是任何表达式,也可以是颜色变量. $weight 为 合并的比例(选择权重),默认值为 50%,其取值范围是 0~1 之间.它是每个 RGB 的百分比来衡量,当然透明度也会有一定的权重.默认的比例是 50%,这意味着两个颜色各占一半,如果指定的比例是 25%,这意味着第一个颜色所

Red() 函数 red() 函数非常简单,其主要用来获取一个颜色当中的红色值.假设有一个 #f36 的颜色,如果你想得到 #f36 中的 red 值是多少,这个时候使用 red() 函数就能很简单获取. >> red(#f36) 255 得到的值是”255”. Green() 函数 green() 函数和 red() 函数一样,用来获取某一个颜色值中 green 的值.同样拿 ”#f36“ 颜色为例: >> green(#f36) 51 Blue() 函数 同理,blue() 函

map-values($map) map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表.而且,map-values($map) 中如果有相同的 value 也将会全部获取出来. 如前面的示例,使用: map-values($social-colors) 将会返回: #ea4c89,#3b5998,#171515,#db4437,#55acee 值与值之前同样用