![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工具
/*----无忧----*/
从事前端7年,一些粗鄙见识想和大家分享,如能帮助到初学者一二,深感荣幸
展开
-
MIME.json 文件请求 后缀/响应类型 对照表
{ “.323”:“text/h323” ,“.3gp”:“video/3gpp” ,“.aab”:“application/x-authoware-bin” ,“.aam”:“application/x-authoware-map” ,“.aas”:“application/x-authoware-seg” ,“.acx”:“application/internet-property-stream” ,“.ai”:“application/postscript” ,“.aif”:“audio原创 2020-12-08 17:45:42 · 687 阅读 · 0 评论 -
如何五分钟搞定Vue + Sass
首先,大家知道在网站开发项目的过程中,大家都普遍使用css预处理器了,也就是less,sass,stylus这三个东西,这三者的话也确实没有让大家失望,让我们的开发效率提升很多,里面有很多好用的功能,变量,嵌套,循环,继承,混合等等。不过这三者里面呢,less功能稍微欠缺了点,而stylus的话呢,由于写法比较新颖,我个人不太接受,所以今天要讲的还是sass 。其实早在2007年sass就...原创 2020-04-15 11:04:20 · 414 阅读 · 0 评论 -
Sass教程七:Sass知识点之——嵌套
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器, 考虑用css实现下面这个布局:那么用css 我们可能会这样写:nav { height: 40px; border-bottom: 1px solid #333; line-height: 40px;}nav ul { float: left; height: 100%...原创 2019-08-07 17:52:27 · 730 阅读 · 0 评论 -
Sass教程六:Sass知识点之——变量
变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念。由于变量让你能够把程序中准备使用的每一段数据都赋给一个简短、易于记忆的名字,因此它们十分有用。其实这东西就和我们的姓名一样,是一个代号,或者说就像我们在公司的职称当公司需要用你的时候,直接叫这个职称,那万一哪天你离职了,或者说公司发现你不合适这个岗位了,那再换一个人就好了,职称还是那个职称,只是人不一样了比如整个网站的背景颜...原创 2019-08-07 16:21:24 · 261 阅读 · 0 评论 -
Sass教程十一:Sass知识点之 —— 控制指令
Sass 提供了一些基础的控制指令,比如在满足一定条件时引用样式,或者设定范围重复输出格式。控制指令是一种高级功能,日常编写过程中并不常用到,主要与混合指令 (mixin) 配合使用@if@if用于定义一些条件,当输入的值满足条件时做对应的事情 当@if 的表达式成立时,输出 {} 内的代码:p{ @if 1 + 1 == 2 { width: 20px }}在这...原创 2019-08-09 17:10:25 · 321 阅读 · 0 评论 -
Sass教程五:koala 和在Vue里使用Sass
第三种,编译软件 Koala附上官网地址: http://koala-app.com/这是一个小软件,在官网上下载安装就可以了,官网可以自动分辨是windows系统还是Mac系统,所以直接点击下载就可以了。根据提示,直接把要编译的文件拖到软件里或者把整个文件夹拖到软件里就可以了点击某个文件,右边就会弹出来一个菜单,勾选最上面的 Auto Complie就可以自动监听啦,然后下面有...原创 2019-08-07 14:32:10 · 267 阅读 · 0 评论 -
Sass教程十:Sass知识点之 —— @import 、Partials 与 @media
@import 、Partials 与 @media说到这个,有同学可能有疑问,css本身也有@import属性,sass再提出来,会不会有所多余呢?我们来分析一下css的 @import它更多是用来做媒体查询的 它每引入一个文件,都会向服务器发送一次请求 它并不是把引入的文件和当前文件进行融合 引入文件中定义的变量不能在当前文件中使用Sass 拓展了 @import 的功能,允...原创 2019-08-09 14:06:14 · 539 阅读 · 0 评论 -
Sass教程四:webStorm编译Sass(编辑器)
相对于第一种编译方式来说,用编辑器来帮助我们编译则省去了我们在开发过程中的很多操作,比如用cd命令进入某个文件夹,退出文件夹之类的,并且不是所有人都熟悉命令操作方式的。这时候就显得这种编译方式可能会更加好用,我在工作过程中大多数也是用这种方式来进行编译的,来看具体操作吧:注意,用编辑器编译的基础也是安装Sass 所以Sass的安装过程是必不可少的!!!既然想要让编辑器帮助我们做事情,那么就...原创 2019-08-06 18:28:04 · 841 阅读 · 0 评论 -
Sass教程三:编译Sass(命令行)
sass编译有很多种方式,如命令行编译模式、编辑器自动编译、编译软件koala、sass-loader等。先来看第一种:命令行编译刚才我在test文件夹里面已经建立了一个style.scss文件,现在我需要把这个文件编译成css文件,那么我可以先用命令行工具进入这个文件夹 “cd”就是进入某个文件夹的命令,后面跟上你电脑上文件夹的路径就可以了:cd test进入文件夹之后再使用sa...原创 2019-08-06 18:24:04 · 1291 阅读 · 0 评论 -
Sass教程二:Sass的安装
前面已经提到了,Sass是用Ruby语言开发的,所以在安装Sass之前,需要先安装Ruby 这里要注意几点: Mac系统是自带Ruby的,所以就不需要再次安装啦,所以下面安装Ruby的方法也只适用于Windows系统。 一些基于插件的编辑器,比如vsCode,Atom之类的,不需要安装sass,直接安装插件就可以进行编译。 Windows下安装Sass首先需要安装Ruby, 先从官...原创 2019-08-06 18:22:43 · 369 阅读 · 0 评论 -
Sass教程一:Sass概况
今天来聊聊sass吧,之前用了很久的less,刚开始接触的时候感觉这东西就是个神器,写css时间长了自然就能发现css在书写的时候的不足之处,不能嵌套,没有变量,更加不能像js那样用循环自动生成之类的,这些问题全部都被less解决掉了less加入了变量,加入了嵌套式写法,还有一大堆好用的功能,在这里就不多说了,今天要说的是sass。其实刚接触less的时候就知道有sass这个东西了,但是那...原创 2019-08-06 18:21:11 · 267 阅读 · 0 评论 -
Sass教程九:Sass知识点之——继承
@extend 继承在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。那么通过@extend我们可以这样写:通用样式:.normal{ color: #00d5e8; background: #e8e000;}特殊样式:.special{...原创 2019-08-08 18:00:04 · 401 阅读 · 0 评论 -
Sass教程八:Sass知识点之——混合
前面我们已经知道sass中的变量了,但是变量能记录的毕竟只是一个值,顶多把一个属性的所有值全部记录进去,比如这样:$primary-border:1px solid #899;.box{ border:$primary-border;}这样固然可以让box这个选择器很轻松地获得一个边框样式,但是如果我有大量公用的样式呢?比如文字颜色,字体大小这些东西其实都可以统一起来,那这...原创 2019-08-08 16:11:29 · 567 阅读 · 0 评论 -
入门Webpack
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了...转载 2018-03-12 16:57:36 · 292 阅读 · 0 评论