本文使用的 Vue 版本为 2.5.2,Vue-Cli 版本为 2.9.1。 1. 安装相关依赖 执行: npm install node-sass sass-loader style-loader --save-dev…
分类:scss
借用repeating-linear-gradient实现一把刻度尺(ruler)📏
像刻度这种东西都是重复性的,说到重复我就想到了repeating-linear-gradient,看名字就能知道是重复线性渐变,它能更方便的实现隔行变色的功能,如果你想画一个背景,它是重复、隔行的,那么用它就没错了; 效…
css掩人耳目式海浪动效🌊,这可能是最简单的实现方式了吧?
花里胡哨的canvas实现太过于繁琐,这就是本文存在的意义. 效果图 拆解 首先画一个简单的盒子:利用::before与::after画两个圆角值(radius)不同的不规则圆形:父元素设置overflow: hidde…
CSS 面试题: 手写 collapse(折叠) 的 css/html 部分
源码: https://github.com/any86/5a.c… 做一个组件库不难 其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是c…
细谈sass和less中的变量及其作用域
博客原文地址:Claiyre的个人博客 https://claiyre.github.io/博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载,请在文章开头注明原文地址̵…
引入stylelint对CSS/Sass做代码审查
规范越早引入越好,规范的约束永远不嫌多。 stylelint是什么? stylelint 是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是…
CSS外挂:Sass 之运算(加、减、乘、除)
学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的Operations也是重要的一部分。现在的前端各种工程化、模块化、面向工资编程,哦…不对,是面向对象编程。玩起来吧! 1. 加减法 加减法不是…
CSS外挂:Sass 之混合宏(@mixin)、继承(@extend)、占位符(%placeholder)
学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的@-Rules也是重要的一部分。普遍情况下这仨在实际项目中用得还是比较多的,玩起来吧! 1. 混合宏@mixin 如果你的代码块中涉及到变量,建议使用混合宏…